Search code examples
htmlcsslayoutpositionpositioning

Best way to position a two part background in CSS?

I have a weird background I am trying to figure out the best way to style it.

So, there are two parts to the background image, the top part which has a unique horizontal and vertical design (its about 1024x700) then a bottom section that has a unique style horizontally, but can be repeated vertically . (1024 x 1)

Right now I have the top section being a background image for the header, the problem is that it screws me up for styling all of the page content because it is so big!

What would be the best way to code a two piece background like that in HTML and CSS?

Page is laid out like so:

div container

-> div header

-> div content

div footer

I can certainly change that though...

Thanks!

Kevin

Solution

  • If I understood you well, this may be a solution:

    1. for bottom section, simply do it with repeat-x of your 1px image applied to body background

    2. for top-section, have your main container div styled with this:

    width:100%; background:url('your-image.jpg') center;

    note:untested