Background-Image Opacity Issue
Question
I am working on a Homepage right now, and got a few Problems.
I got a Background-Image set to Cover in the Body:
body{
opacity: 1;
transition:opacity 0.5s ease-out;
background-image: url(Background.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Now I want that to change the opacity of the whole body-tag to 0 with javascript.
$("body").css("opacity", "0");
Everything disappears except the background-image, although it's in the body-tag? Any Ideas?
UPDATE!! I uploaded the "problem-site" to a webspace. Website
Just click on "Query" than click in any box and press ENTER to call the js-function.
Thanks!!
2 answers
solution1
4 ACCPTED 2013-10-16 16:05:20
I've made a fiddle with your code that reproduces the issue. Code can be simplified into this:
body{
opacity: 0.1;
background-color: red;
}
The root issue is that fiddling with the opacity of the <body> element doesn't have any effect unless you have something below. A simple fix is to add this:
html{
background-color: white;
}
solution2
0 2013-10-16 16:01:59
For whatever reason (I can't seem to find any references to why), setting opacity:0 or visibility:hidden on the <body> tag has no effect on the background-image . It definitely has an effect an element with a background-image that is a child of the body tag. So you have two options:
Add a wrapper <div> around the <body> content :
Where you currently have:
<body>
<!-- Content -->
</body>
Change this to:
<body>
<div id="wrapper">
<!-- Content -->
</div>
</body>
And move the CSS on body to #wrapper as well any Javascript/jQuery targeting body
Set the opacity on the HTML element
Wherever you are setting opacity:0 , do it on the <html> element instead.
Personally, I'd recommend the first option.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.