ansaurus

Question

Answer 1

A:

You may do this using a mixture of background images and absolutely positioned divs/images:

the body gets the patterned background
the picture on the side is an image (or a dive with the image as background) that uses fixed positioning (i.e. uses the position:fixed css rule)
the content would be inside a div with the semi transparent gif as background.

I think that it would abtain what you need, everythign is doable in CSS except perhaps the fixed positioning for some versions of IE (namely IE6 and below) as position:fixed is available in IE from version 7 onwards only in "standards-compliant mode" (but this article may help: position:fixed for Internet Explorer)

LucaM 2009-06-13 20:13:55

Answer 2

+2 A:

CSS example for two non-scrolling background images

Some browsers (Safari) allow (CSS3) multiple background images, but since these aren't yet universal, here's my solution.

For a start, you don't need a fixed position div. You can prevent the background image from scrolling by using:

background-attachment: fixed;

Use background-position to put the background top, bottom, center, right, left e.g.

background-position: top right;

And set background-repeat to the setting you want.

The CSS

The CSS below will give you two background images that don't scroll in the page background - set the width of #mydiv to whatever you want (or leave it unset for 100%) and its height to 2000px (just to test the scrolling), and use your image URLs instead of the example:

body {
 background-image: url(body_background.gif);
 background-attachment: fixed;
}
#mydiv {
 position: absolute;
 right: 0px; /* or whatever */
 background-image: url(div_background.gif);
 background-attachment: fixed;
}

The HTML

If you need a complete example, change the background image URLs and use this (obvious) HTML/CSS example as a starting point:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>untitled</title>
    <style type="text/css">
    body {
     background-image: url(body_background.gif);
     background-attachment: fixed;
    }
    #mydiv {
     position: absolute;
     top: 0px; /* 0 is default for top so remove or make > 0 */
     right: 0px; /* or left, whatever you need */
     width: 250px; /* or whatever you want */
     height: 1500px; /* remove after testing! */
     background-image: url(div_background.gif);
     background-attachment: fixed;
    }
    </style>
</head>
<body>
<div id="mydiv">
    the div
</div>
</body>
</html>

Dave Everitt 2009-06-19 15:41:12

This solution isn't perfect. Correct me if I'm wrong, but that height parameter will cause the page to scroll regardless of the fixed position background image. If you remove the explicit height statement the background will only expand to the height of the page content. This is not ideal in situations where you may have a relatively large background image for "mydiv".

epalla 2009-06-19 16:09:29

the page will scroll, but the background won't, which is - I think - what the original query requires... but yes, the div height could be set to 100% instead.

Dave Everitt 2009-06-19 16:34:08

You wouldn't want the page to scroll though if you didn't have the content to fill it. 100% height will work for most decent browsers but I think it gets ugly with IE6 (you'd have to set height: 100% in the body too which gets janky).

epalla 2009-06-19 16:42:33

agreed, although position: fixed; with height: 100%; sorts the scrolling div and the 'too short' issue in modern browsers. IE 6 is slowly fading (thankfully) so a conditional comment with an alternative but acceptable solution might suit.

Dave Everitt 2009-06-19 16:56:09

BTW you wouldn't need height: 100%; on the body - the body fills the browser window by default, and it's (from the original question) a repeating pattern anyway. I think between us, we've arrived!

Dave Everitt 2009-06-19 17:00:50

Answer 3

+1 A:

This probably isn't the most "correct" solution, but you can use a separate background-image for the HTML and body tags. IE

html {
    background-image: url('images/bg_repeat.gif');
    background-position: top center;
    }

body {
    background-image: url('images/splatter_top.png');
    background-position: top center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    text-align: center;
    }

epalla 2009-06-19 15:59:31

+1 for the creative.

David Thomas 2009-06-19 16:04:41

ansaurus

tags:

views:

answers:

Dual body background images

CSS example for two non-scrolling background images

The CSS

The HTML

related questions