1

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

1
  • What does the HTML look like? Dec 30, 2010 at 8:23

3 Answers 3

2

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

2
  • Freelancer – sounds good so far. I would really like the bottom to only repeat when needed and I need it to stop at the footer. Any suggestions on what div I should attach that to? I need it to be as long as the extra content in the content div. Just an FYI - I have #container > #content.
    – Kevin Z
    Dec 30, 2010 at 8:14
  • Hmm..how about setting footer's z-index high? like z-index:1000; so that it's above other elements on page including the bottom div Dec 30, 2010 at 9:34
1

Fiddle with positioning and z-index.

1

Well the stopping at the footer is the hard part. Normally for this type of thing i would do something like:

html {background: SOMECOLOR url(path/to/y/repeater.jpg) repeat-y scroll top center;}
body {background: transparent url(path/to/static.jpg) no-repeat scroll top center;}
1
  • Yes, that would be easy. That is what I am coming to you all for...because this one stumped me! ;)
    – Kevin Z
    Dec 30, 2010 at 8:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.