How to float two backgrd images inside a div?

**stevefarillo** · 01-07-2006, 01:45 AM

I am trying to place one background-image to the left side and another background-image to the right side of a div container using the float attribute. Am able to float one background-image to one side of the containing div when I assign it in a h1 as follows:

#header h1 {
margin: 0;
padding: 20px 5px 45px 100px;
color: #00008B;
background: url(../images/sphinx-logo.jpg) no-repeat top left;
font: 200% Arial, Helvetica, sans-serif;

Is there a way to get this to work for two background-images with one being floated to the left and the other to the right?

If not I will try using the img method using floats instead.

Appreciate your help.

Steve

**gringo** · 01-07-2006, 03:21 AM

Hi stevefarillo,

technically speaking, you are not 'floating' your background images - floating is something else.

I would wrap your div in another div with a background image positioned to the other side:

HTML Code:

<div id="left">
  <div id="right">
  </div>
</div>

so #left would have background: url(../images/sphinx-logo.jpg) no-repeat top left;
amd #right would have background: url(../images/sphinx-logo.jpg) no-repeat top right;

**stevefarillo** · 01-07-2006, 10:57 AM

Gringo,

Gave that approach a try but it did not work at all using background-images. Can only get a single background-image to work right with it placed in a h1, h2,..., p, etc. element in a div id, otherwise the image dosen't appear at all.

An important note I didn't tell you about in my original post!
Also, I have another background-image in the #header div, which is before the background-image I am placing to the left in the #header h1. Here is the CSS code for entire header section of my page. This was done so that the logo image to the left would appear on top of the 1st background-image.

/* Header */
#header {
border-bottom: 3px solid #00008B;
background: #6495ED url(../images/header-bg.jpg) no-repeat top left;

}
#header h1 {
margin: 0;
padding: 20px 5px 45px 100px;
color: #00008B;
background: url(../images/sphinx-logo.jpg) no-repeat top left;
font: 200% Arial, Helvetica, sans-serif;
}

I think I will try removing the 1st background-image and adding the two image to the left & right and see what happens. If that does it, then I will have to go without having a nice gradient effect in my header bar.

Steve

**stevefarillo** · 01-07-2006, 12:31 PM

No luck at all getting that second background-image to display in my browser. Tryed it without the 1st background-image, tryed it several different ways using the technique posted by Gringo.

No matter what I try the 2nd background-image never appears. lol
Dosen't make any sense to me.

Have any ideas on what is wrong?
Must be something simple I am overlooking.

CSS layout:

/* Header */
#header {
border-bottom: 3px solid #00008B;
background: #6495ED url(../images/header-bg.jpg) no-repeat top left;
}
#header h1 {
margin: 0;
padding: 20px 5px 45px 100px;
color: #00008B;
background: url(../images/sphinx-logo.jpg) no-repeat top left;
font: 200% Arial, Helvetica, sans-serif;
}
#header2 {
margin: 0;
padding: 0;
background: url(../images/pyramids.gif) no-repeat top right;
}

html coding

<body>
<div id="wrap">

<div id="header">
<h1>FullMoonSphinx.net</h1>
<div id="header2"></div>

</div>

<div id="content">
<h2>Hathor: the perfect face reveals the pentagon</h2>
<div class="gutter">... content goes here ...</div>
</div>

<div id="sidebar">
<div class="gutter">... sidebar goes here ...</div>
</div>

<div id="footer"></div>

</div> 

</body>

Steve

**gringo** · 01-08-2006, 08:03 AM

I think wrapping the <h1> in the header2 div might work:

HTML Code:

<div id="header">
<div id="header2">
<h1>FullMoonSphinx.net</h1>
</div>
</div>

**vangogh** · 01-08-2006, 03:58 PM

Try assigning a width and height to #header 2. If that doesn't work put a   inside the div. Sometimes when a div is empty the browser will close it up unless a width and height are explicitly specified. Not sure it that will be your solution, but worth a try.

**stevefarillo** · 01:33 PM

Tryed using both of your suggestions, but it turns out that background images are limited in this case anyways. I can do it by creating 3 separate divs with floats and assigning the two images in the html markup, but it breaks down to easily when the h1 title is resized.

So I decided to do without the second image and keep my layout user & search engine friendly.

Thanks for the help!

**vangogh** · 01-11-2006, 01:43 PM

Sorry the suggestions didn't work, but glad you were able to come up with a solution.