I'm trying to make my background fade in upon entering the website. I've tried several methods that does work. However, I'm just having trouble centering the background on different resolution. As you can currently see upon entering my website, whenever you resize your browser, the background would be in the middle at all times. Website: / That's exactly what I'm trying to achieve, yet still have the globe to be in the middle at all times. And my background is pure CSS. Keep in mind, I just started website designing. I've been trying to code for 2-3 weeks now.
html,
body {
background: url(.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition: background 0.0s linear;
-moz-transition: background 0.75s 0.0s linear;
-o-transition: background 0.75s 0.0s linear;
transition: background 0.75s 0.0s linear;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}I'm trying to make my background fade in upon entering the website. I've tried several methods that does work. However, I'm just having trouble centering the background on different resolution. As you can currently see upon entering my website, whenever you resize your browser, the background would be in the middle at all times. Website: http://studi0.ml/ That's exactly what I'm trying to achieve, yet still have the globe to be in the middle at all times. And my background is pure CSS. Keep in mind, I just started website designing. I've been trying to code for 2-3 weeks now.
html,
body {
background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition: background 0.0s linear;
-moz-transition: background 0.75s 0.0s linear;
-o-transition: background 0.75s 0.0s linear;
transition: background 0.75s 0.0s linear;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}- I don't understand the problem since the globe is on the image, isn't it? – Chris Commented May 7, 2016 at 16:27
- Yes, the globe is on the image. However, on some codes, whenever you resize the browser size, the global would go to the right. If you e.g click on my website, and try to resize your browser, you can see that the whole background moves according to the browser size. - Sorry if I'm not explaining so well, trying my best. – azuz53487 Commented May 7, 2016 at 16:40
- perhaps screenshots of good and bad behavior and the wanted result made in photoshop or something will help us understand. – Itai Bar-Haim Commented May 7, 2016 at 16:48
2 Answers
Reset to default 4I would remend a different setup if you want a background image to fade in on page load. You can have a separate div in a different flow than the rest of your page and have it animate to an opacity of 1 on page load.
HTML
<html>
<head> ... </head>
<body>
<div class="page-bg"></div>
</body>
</html>
CSS
html, body {
height: 100%;
width: 100%;
}
body {
position: relative;
}
.page-bg {
opacity: 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed;
background-size: cover;
animation-name: fadeIn;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-duration: 1s;
animation-fill-mode:forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Of course you might need to add polyfills for the animation and keyframes declarations. (i.e. -moz-animation-name, -webkit-animation-name, etc..)
Here is a working example on Plunkr. I had to swap the image you used with one with a https link so there wouldn't be an issue loading it.
If we are trying just to fade bg-color of a div, we can use:
.field-error {
color: #f44336;
padding: 2px 5px;
position: absolute;
font-size: small;
background-color: white;
}
.highlighter {
animation: fadeoutBg 3s; /***Transition delay 3s fadeout is class***/
-moz-animation: fadeoutBg 3s; /* Firefox */
-webkit-animation: fadeoutBg 3s; /* Safari and Chrome */
-o-animation: fadeoutBg 3s; /* Opera */
}
@keyframes fadeoutBg {
from { background-color: lightgreen; } /** from color **/
to { background-color: white; } /** to color **/
}
@-moz-keyframes fadeoutBg { /* Firefox */
from { background-color: lightgreen; }
to { background-color: white; }
}
@-webkit-keyframes fadeoutBg { /* Safari and Chrome */
from { background-color: lightgreen; }
to { background-color: white; }
}
@-o-keyframes fadeoutBg { /* Opera */
from { background-color: lightgreen; }
to { background-color: white; }
}<div class="field-error highlighter">File name already exists.</div>Similarly you can achieve any style change in from and to sections like color: green to change the font-color to green, or if you want to use :
1) Fade-in: give opacity: 0 to opacity: 1
2) Fade-out: give opacity: 1 to opacity: 0
For Further details refer to https://stackoverflow./a/58525787/1904479
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742348148a4426968.html
评论列表（0条）