Hi - I think you have to give it a position and include a z-index
instruction to tell it to put the image at the "back", eg
background-attachment: fixed;
background-position: 50% 60px;
margin: 30px 0px 0px 0px;
z-index: 1;
}
That, above, is taken from a very old style sheet; I wouldn't use pixels
doing this now.
Rachel
On 09/02/2014 19:02, Tim Dawson wrote:
I've been playing around with a few menu design ideas, and mocked up a
site to try them out. The menus are OK as far as they go, but I'm
having trouble with a background image.
I have been trying to set up a background image in the <body> (or in
<body class='plain'>), but when I do so it appears outside the body,
as if it were attached to the viewport or perhaps the HTML. If I move
the background image to appear in the <header> there's no problem.
I've tried several variants without success.
CSS is like this:
body {
background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;
margin: 0 auto;
width: 100%;
max-width: 900px;
padding: 0;
}
body.plain {
max-width: 900px;
border: 0;
border: 1px dashed red; /*(temporary)*/
border-radius: 5px;
}
div#outer {
/* background-color: #DFEFFF; */
width: 100%;
margin: 0 auto;
padding: 0.25em 0.25em;
padding: 0;
}
/* HEADER */
header#banner {
/* when the background image is set here, all is well */
/* background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;*/
margin-bottom: 1em;
width: 100%;
float: left;
}
I can live with the background being in the <header> if necessary, but
I would like to know why it doesn't work correctly in the <body>. I
suspect it may be very simple, but I can no longer see the wood for
the trees. Any suggestions, please ?
It can be seen at http://www.webadit.co.uk/newhmi
Tim Dawson
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
