Treehouse: Grow your CSS skills. Land your dream job.

need a background trick

  • # June 26, 2012 at 10:12 pm

    I have been recoding a site that I have been working on and I have spent about 6 hours trying to figure out the background. I have it just the way I want it now but ran into a problem. I achieved this look by applying the dark background to the body tag, applying the white pattern to the content area and then used absolute positioning to apply the white background again to the top right corner of the page and I wanted it to extend all the way right which is does and all the way down which it does not. Take a look and you can see. Got any idea how I can fix this?

    # June 27, 2012 at 1:48 am

    That should help a little…

    # June 27, 2012 at 8:30 am

    Hi Cybershot,

    First off your div #right-background is an empty div you are using for presentational purposes only, this is bad practice and you don’t need to do this.

    I think you’re going about it the wrong way.

    Instead of trying to style each div create a background for the whole body.

    Create a very wide background image say 2000px wide with the left half your brown texture and the right your white texture, it only needs to be a few pixels deep, just play with it until the repeating texture looks correct. (It needs to be this wide to fill the screen of all monitors).

    Then apply this background to your body element and add the following css to body:


    Since you are centering your background you can work out how many pixels you need to offset your image by to the left i.e. making the white section wider (when you are making it in photoshop / gimp or whatever) so it fits your columns.

    Then you are centering your wrapper over the top of your background – set the background to transparent and everything will be lovely.

    This should work as you are using a fixed width on your wrapper . If you were going with a fluid width and a percentage based wrapper I think we’d be looking at add one background to the html element and another to the body element and then giving the body a % margin to the left. Then you’d overlay this with a background on your wrapper. Bit more to it but is should work out with some tweaking.

    Hope this gets you rolling.

    # June 27, 2012 at 9:02 am

    I thought about going the way you are talking about simoncmason but thought I would try this other way first. It would have worked fine if the html and body stretched 100% height. I can’t figure out why it won’t. Everything I have researched says putting 100% height on the html and body tag should allow it to stretch.

    I didn’t want to do the full body background the way you are talking. I look into your way tonight.

    # June 27, 2012 at 9:16 am

    Well, without digging through your css some more, by setting the height to 100% you are setting it to the height of the viewport, so when you scroll down this element retains its height – i.e. the height of the viewport. Since you have positioned it absolutely it moves up with the page – it is stuck to the top of the page.

    That’s why it is happening, you’re better off finding a way to get the styling right without presentational only divs or other elements.

    # June 27, 2012 at 1:41 pm

    You could use fixed position on that background and increase the z-index of the footer.

    # June 27, 2012 at 2:28 pm

    I would position fixed cause the background of stretch to the bottom of the screen?

    # June 28, 2012 at 6:28 am

    As @schmotty said setting position: fixed; to #right-background would indeed stretch it properly. Additionally, I would apply z-index: -1; to it instead of adjusting z-index of the footer since you are already editing the #right-background element anyhow.

    # June 28, 2012 at 8:30 pm

    Thanks to everyone who contributed to this post. I went with the position fixed and then z-index: -1 on the right-background and it worked like a charm. I never would have thought of position: fixed.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.