CODEWITHSUNDEEP
css
Ba Horus
Ba Horus

Reputation:

Dual body background images

Is it possible to to have:

  1. A patterned body background image for the main page,
  2. Followed by another background image on top of the first one (this time a picture on the
    right hand side, on edge of the page)

  3. The content (using semi-trrasparent gif is overlayed across the body background images)
    should be scrollable whilst both background images remained fixed.

  4. Ideally css solution without script or hack

Please help as I am loosing my hair and sanity trying to figure how to get this to work.

Many thanks

Del

Upvotes: 0

Views: 4306

Answers (3)

Matt Brunmeier
Matt Brunmeier

Reputation: 1310

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;
    }

Upvotes: 2

Dave Everitt
Dave Everitt

Reputation: 17876

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">

<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>

Upvotes: 2

LucaM
LucaM

Reputation: 2846

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

  1. the body gets the patterned background
  2. 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)
  3. 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)

Upvotes: 0

Related Questions