Question

So here is the the thing.
I have footer div.
I wanted to create a nice background to it.
There will be an image in the center.
Background will extend to infinity to left with X bg pattern
Background will extend to infinity to right with Y bg pattern
Like this;
XXXXXXXXXXXXXXimageYYYYYYYYYYYYY

Following code didnt do it.
What am I doing wrong?

.subcontent {
    min-height:50px;
    width:100%;
    background:#00CC66;
}
.leftcontent {
    float:left;
    min-height:50px;
    width:100%;
    background:url(images/bg_lpattern.jpg) repeat-x;
}
.rightcontent {
    float:right;
    min-height:50px;
    width:100%;
    background:url(images/bg_rpattern.jpg) repeat-x;
}

  <div class="subcontent">
    <div class="leftcontent">
    </div>
    <img src="images/bg.jpg" alt="Insert Logo Here" name="Insert_logo" width="400px" height="50px" />
    <div class="rightcontent">
    </div>
  </div>

Answer 1

This may be complicated if you don’t know exact dimensions of logo and your layout is fluid.

Width: 100% will stretch div to 100% and make next floating div to go to next line.

Why not use a large background image that will be say 1x6000px and make a y-repeat on it: you will cover the centre of it with overlaying image anyway so it matters not if you have anything under there or not.

Try this:

<div class="subcontent" style='width:100%; background: url("images/bg_pattern.jpg") repeat-y scroll center top #00CC66; border: 0 none; min-height:50px; text-align:center;'>
  <img src="images/bg.jpg" alt="Insert Logo Here" name="Insert_logo" width="400px" height="50px" />
</div>

Where bgpattern.jpg is a loooong thin image… or if you need it to be some nice background (not just stretched one line of colour) then make it a huge image 3000×6000 or so and use it as a background – it will still work the same – centred under logo and sides will extend until you reach 6000px resolution.