two Background

[mpoer]

currently the header is thus:

/* relevant css */#header {  padding-bottom: 10px;  text-align:center;  font-size: 1em;  background-color:#00ced1;  color:#191970;  background-image:url('tux-head.png');   background-repeat:no-repeat;  background-position:bottom right;}----<div id="header">    <h1><a href="http://thinktank.ichyware.net:81/%7Ematthew/wordpress/">the weblog of mpoer</a></h1>    <div class="description">Family, Web Development, Debian GNU/Linux, and the Atlanta Thrashers</div>  </div>

and that renders it as shown here: http://thinktank.ichyware.net:81/~matthew/wordpress/What I would like is to have tux's head on both the bottom left and the bottom right parts of the head section, or perhaps tux's head on one side and another similarly-sized image on the other side. Any suggestions? I think this is beyond CSS' capabilities.

[aspnetguy]

you will have to create columns to acheive this. Then create a CSS class for each column with the correct background image you want.That is the only way I no of

[mpoer]

not a bad idea! I'll mess around and see if I can do that.

[mpoer]

a little bit like this:

#header { padding-bottom: 10px; text-align:center; font-size: 1em; background-color:#00ced1; color:#191970;}#header .left { background-image:url('tux-head.png'); background-repeat:no-repeat; background-position:bottom left; float:left;}#header .middle {  text-align:center;  margin-left:105px;  margin-right:105px;}#header .right { background-image:url('tux-head.png'); background-repeat:no-repeat; background-position:bottom right; float:right;}  <div id="header">    <div class="left"></div>    <div class="middle">      <h1><a href="http://thinktank.ichyware.net:81/%7Ematthew/wordpress/">the weblog of mpoer</a></h1>      <div class="description">Family, Web Development, Debian GNU/Linux, and the Atlanta Thrashers</div>    </div>    <div class="right"></div>  </div>

doesn't seem to be working. neither image shows at all. can you see what I'm doing wrong?

[aspnetguy]

you need to specify the width and height of the columns on each end becuase they have no content.

[mpoer]

actually, i tried setting both the widths to 100px, but it didn't show the image

[sbrownii]

You probably need to set the height, too.I'm not sure, but it might be better to just create one graphic that looks how you want (with tux on both sides) and use it as the background for your header - although I'm sure there will be some problems with that, too...I think it looks fine as it is though...

[F-Man]

Put one div inside another. Apply "background: url(image.jpg) no-repeat scroll bottom left" to one and "background: url(image.jpg) no-repeat scroll bottom right" to the other.