Question

I have set up some background div’s to theme a blog I am making. I am using 3 colors for the heading, a grey background, and I am wanting to add a texture to the background. I have the semi transparent image I want to tile, but I am not sure of the best way to have this work. I do NOT want position: fixed; on the div containing the image, so that it will move as you scroll.

Example code:
http://jsfiddle.net/YPXmT/

Is there a way to achieve this while not having scroll bars? (Note, I don’t want to get rid of scrollbars, as content may require scrolling.)

Answer 1

Going from your example fiddle, you were most of the way there. All you have to do is make your backgroundTexture div height and width 100% instead of the static pixel values you used:

#backtexture {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}

---

MORE SIMPLE UPDATE:
Simplicity is best most times.
All you should need to do is add:

body{
    position: relative
}

Don’t bother making the container div and rearranging the elements as below, just making the body’s position relative should fix this for you.

---

UPDATE: (Use update above, keeping this for posterity)
As per the comments below, with the code above any content that makes the window scroll beyond the visible space will not include the background. This is because the div is set to position: absolute and height/width: 100%. The div is getting sized to the size of the viewable space, but any content that extends beyond that will cause the background div to look like it has stopped. To fix this problem you just need to tweak your HTML and CSS a little bit more. Instead of the CSS above use:

#backtexture {
    width: 100%;
    height: 100%;
    background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}

Notice we removed the position:absolute and overflow:hidden. Next we change the HTML so that the background isn’t just an empty div placed on the page, but instead used as a container for all other elements on the page:

<div id="backtexture">
        <div id="redtop"></div>
        <div id="orangetop"></div>
        <div id="yellowtop"></div>
        <div id="wrapper">
</div>

And that should do it.

Forked fiddle: http://jsfiddle.net/digthedoug/pVxSq/