For the body, I have set the following CSS:
body {
background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;
}
It successfully displays my desired background. However, when I use this code:
body {
z-index: -1;
background: #425b77;
}
#myBody {
background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;
}
The background does not display as expected and instead only shows the color from the body tag. Any suggestions on how to resolve this issue?
Update: Interestingly, when I implement this code on another webpage, it works correctly despite being identical.
Below are the outcomes of the two sets of code:
Result with code from line 2: https://www.dropbox.com/s/ioo1cnfszdzh0wu/Skärmavbild%202014-03-07%20kl.%2018.44.33.png?m=
Result with code from line 8 and below: http://www.dropbox.com/s/d8wjnwt346gzdv3/Skärmavbild%202014-03-07%20kl.%2018.44.02.png?m=
Update: If I add content within the
<div id="myBody"></div>