Where 2 put image 2 display in background
Posted: Wed, 2008-07-23 14:10
Hi people.
I have a question about - where 2 put image so it would display in background of fields Nickname | Message text
in this kind of shoutbox - http://lumichat.com/yshout5/example/
/* Posts
------------------------------------- */
#yshout #ys-posts {
position: relative;
background: #fff;
}
#yshout .ys-post {
border-bottom: 1px solid #f7f7f7;
background:url(../images/transp_blue10.png);
margin: 0 5px;
padding: 5px;
position: relative;
overflow: hidden;
}
#yshout .ys-admin-post .ys-post-nickname {
padding-left: 17px;
background: url(../images/chat_cloud.gif) 0 -1px no-repeat;
}
#yshout .ys-post-timestamp {
color: #b3b3b3;
}
#yshout .ys-post-nickname {
color: #1a1a1a;
}
#yshout .ys-post-message {
color: #595959;
}
/* Hover Controls
------------------------------------- */
#yshout .ys-post-actions {
display: none;
position: absolute;
top: 0;
right: 0;
padding: 5px;
font-size: 11px;
z-index: 50;
background: #fff;
color: #b3b3b3;
}
#yshout .ys-post-actions a {
color: #7a8c99;
}
#yshout .ys-post-actions a:hover {
color: #3d464d;
}
#yshout .ys-post:hover .ys-post-actions {
display: block;
}
#yshout .ys-post-info {
color: #595959;
}
#yshout .ys-post-info em {
font-style: normal;
color: #1a1a1a;
}
#yshout .ys-info-overlay {
display: none;
position: absolute;
z-index: 45;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
padding: 5px;
}
#yshout .ys-info-inline {
display: none;
margin-top: 2px;
padding-top: 3px;
border-top: 1px solid #f2f2f2;
}
/* Post Form
------------------------------------- */
#yshout #ys-post-form {
height: 40px;
line-height: 40px;
background: #eee;
}
#yshout #ys-input-nickname,
#yshout #ys-input-message {
font-size: 11px;
padding: 2px;
background: #fff;
border: 1px solid #c3c3c3;
}
#yshout #ys-post-form fieldset {
_position: absolute;
border: none;
padding: 0 10px;
_margin-top: 10px;
}
#yshout .ys-post {
border-top: 1px solid #fdfdfd;
border-bottom: 1px solid #f1f1f1;
background: #fff;
margin: 0 5px;
padding: 5px;
position: relative;
_position: static;
overflow: hidden;
}
#yshout #ys-input-nickname {
width: 105px;
margin-left: 5px;
}
#yshout #ys-input-message {
margin-left: 5px;
width: 200px;
}
#yshout #ys-input-submit {
font-size: 11px;
width: 64px;
margin-left: 5px;
color: #3F93D8;
}
#yshout #ys-input-submit:hover {
cursor: pointer;
}
#yshout .ys-before-focus {
color: #b3b3b3;
}
#yshout .ys-after-focus {
color: #000;
}
#yshout .ys-input-invalid {
}
#yshout .ys-post-form-link {
margin-left: 5px;
}
I'm sorry code is long, but it's long because I'm a newbie in CSS and have no idea where 2 put it.
Thanks 4 help.


Moderator
Posts: 9190
Joined: 2004-06-30
Location: Milton Keynes
It's an INPUT element which
Posted: Thu, 2008-07-24 10:04
It's an INPUT element which are notoriously difficult to set background-images on.
There's a method here but to be honest, I don't think it's worth the hassle.
Learn of the skillful; for he that teaches himself has a fool for his master - Benjamin Franklin