I want to have multiple background images using HTML and CSS (as those are the only languages I have learned so far).
The best result I got for background cover is from id="full-bg". Now how do I make it to multiple background cover photo at the same time rotating(changing in every lets say 5 sec).
Try this JSfiddle
This code only uses css and rotates trough the backgrounds you add.
body{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: fixed;
animation-duration: 5s;
animation-name: fade-bg;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: forward;
}
#keyframes fade-bg {
0% {
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
50% {
background-image: url('http://i.imgur.com/sRnvs0K.jpg');
}
51% {
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
100% {
background-image: url('http://i.imgur.com/wL4RT1w.jpg');
}
}
I hope this helps!
Here is a cross-browser solution:
body{
-webkit-animation: change 5s linear infinite;
-moz-animation: change 5s linear infinite;
-ms-animation: change 5s linear infinite;
-o-animation: change 5s linear infinite;
animation: change 5s linear infinite;
}
#-webkit-keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}
#-moz-keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}
#-ms-keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}
#-o-keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}
#keyframes change
{
0% { background-image:url('your_first_img.jpeg'); }
100% {background-image:url('your_second_img.jpeg'); }
}
Related
I've made a certain design in codepen with a background animation, and it works there, but it doesn't work when I put it in my ASP.Net Core project. I know I'm referencing the file correctly because the background color does show, it just doesn't animate. I thought it was just an issue with Chrome, but it doesn't work in Firefox either. The only thing I haven't tested was to see if it worked in regular IIS instead of IIS Express.
Code:
CSS:
body{
margin:0;
padding:0;
background:0 0;
}
.parallaxBackground {
min-height:100%;
min-width:100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.colorcycle {
min-height: 100%;
min-width: 100%;
display: inline-block;
text-align: center;
background: linear-gradient(271deg, #e7ff26, #2ecc00, #ff3b00, #2a9fff);
background-size: 800% 800%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
-o-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
-webkit-keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
#-o-keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
#keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
}
HTML:
<body>
<!--Parallax Landing Section-->
<div class="parallaxBackground">
<div class="colorcycle">testing testing testing </div>
</div>
<!--Parallax Landing Section-->
</body>
Edit: So, I tested it out separate from everything. I just made a plain folder on the desktop and put my HTML and CSS in their respective files and tried it like that. No other references to any JS,Bootstrap or anything else. Got the same issue. So I don't think it's something in my project blocking it, it has to be the way it's being processed. The only thing I can think of is that on Codepen, they CSS is in a .scss file, but I didn't think that would make a difference. I'll test that out but other than that, I have no idea. I'll just need to find an alternative.
Figured it out. In SASS, there are nested selectors, but it doesn't work in normal CSS. I just had to remove them from the class and that made it work.
.colorcycle {
min-height: 100%;
min-width: 100%;
display: inline-block;
text-align: center;
background: linear-gradient(271deg, #e7ff26, #2ecc00, #ff3b00, #2a9fff);
background-size: 800% 800%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
-o-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
}
#-webkit-keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
#-o-keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
#keyframes AnimationName {
0% {
background-position: 92% 0%
}
50% {
background-position: 9% 100%
}
100% {
background-position: 92% 0%
}
}
Is there a way to make this smoother? Or if anyone knows how to do this better I am all ears.
Here is what I have
html {
background: url(Images/landscape.jpeg)repeat-y;
background-size: 150%;
background-position: bottom;
-webkit-animation: backgroundScroll 190s linear infinite;
animation: backgroundScroll 190s linear infinite;
}
#-webkit-keyframes backgroundScroll {
from {
background-position: 0 0;
}
to {
background-position: -400px 0;
}
}
#keyframes backgroundScroll {
from {
background-position: 0 0;
}
to {
background-position: -400px 0;
}
}
You might get better results setting the background image on an element and then moving the entire element with transform: translate:
#keyframes doScroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-400);
}
}
Check out this older, but still relevant article.
I got it! I just needed to play with the interval speed. I slowed it down to around 85s and its a lot smoother. I was dragging it out to long.
You can do it like this:
html {
background: url(http://static.adzerk.net/Advertisers/c878296c4c7f43b8bbb285acb73c0e6c.png)repeat-y;
background-size: 150%;
background-position: 0px 0px;
animation: animatedBackground 15s linear infinite;
-moz-animation: animatedBackground 15s linear infinite;
-webkit-animation: animatedBackground 15s linear infinite;
-ms-animation: animatedBackground 15s linear infinite;
-o-animation: animatedBackground 15s linear infinite;
}
#keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-moz-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-webkit-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-ms-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
#-o-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -400px 0; }
}
I'm trying to make a banner that scrolls sideways infinitely with css3 animation. The problem is that after the animation is over it has a harsh cut when it's restarting. I'm trying to figure out how to prevent that harsh animation.
I've put my code here.
#keyframes slideleft {
from{background-position: right;}
to {background-position: left;}
}
#-webkit-keyframes slideleft {
from{background-position: right;}
to {background-position: left;}
}
#masthead {
background-image: url('http://static.communitytable.parade.com/wp-content/uploads/2014/06/dogs-in-world-cup-jerseys-ftr.jpg');
animation: slideleft 5s infinite ease-in-out;
-webkit-animation: slideleft 5s infinite ease-in-out;
width: 100%;
height: 1200px;
}
<div id="masthead"></div>
JavaScript would probably be a better way to handle this. Though in CSS, you could repeat the background image and extend the background-position and animation duration to a very high number. Here is a fiddle.
#keyframes slideleft {
from { background-position: 0%; }
to { background-position: 90000%; }
}
#masthead {
background-repeat: repeat-x;
...
animation: slideleft 600s infinite linear;
}
If you are using jQuery it would be fairly straightforward:
(function animateBG() {
$('#masthead').animate({
backgroundPosition: '+=5'
}, 12, animateBG);
})();
#keyframes slideleft {
from { background-position: 0%; }
to { background-position: 90000%; }
}
#masthead {
background-image: url('https://i.stack.imgur.com/TE4UI.jpg');
background-repeat: repeat-x;
animation: slideleft 600s infinite linear;
-webkit-animation: slideleft 600s infinite linear;
width: 100%;
height: 1200px;
}
<div id="masthead"></div>
Any one please give me the correct approach to do this using css3?
1) I have on bg image it contains multiple states of each sprite.
i am using keyframe animation to update the each of the position of backgroud, but it not come well
How to do it? if am not wrong any one show the correct way please?
my code :
<div class="bg"></div>
div.bg {
background : url(https://dl.dropboxusercontent.com/u/10268257/all.png) 0 center;
height:443px;
width:795px;
}
#-webkit-keyframes animateBg {
0%{ background-position :0px center}
5.882352941176471%{ background-position :795px center}
11.764705882352942%{ background-position :1590px center}
17.647058823529413%{ background-position :2385px center}
23.529411764705884%{ background-position :3180px center}
29.411764705882355%{ background-position :3975px center}
35.294117647058826%{ background-position :4770px center}
41.1764705882353%{ background-position :5565px center}
47.05882352941177%{ background-position :6360px center}
52.94117647058824%{ background-position :7155px center}
58.82352941176471%{ background-position :7950px center}
64.70588235294119%{ background-position :8745px center}
70.58823529411765%{ background-position :9540px center}
76.47058823529412%{ background-position :10335px center}
82.3529411764706%{ background-position :11130px center}
88.23529411764707%{ background-position :11925px center}
23 94.11764705882354%{ background-position :12720px center}
}
div.bg:hover {
animation-name: animateBg;
animation-duration: 4s;
}
jsfiddle
it's because you need to define the number of steps and then just put the animation as the total length, it will divide it up itself.
(change the '1s' to speed up or slow down the animation)
div.bg {
background : url(https://dl.dropboxusercontent.com/u/10268257/all.png);
height:443px;
width:795px;
-webkit-animation: animateBg 1s steps(16) infinite;
-moz-animation: animateBg 1s steps(16) infinite;
-ms-animation: animateBg 1s steps(16) infinite;
-o-animation: animateBg 1s steps(16) infinite;
animation: animateBg 1s steps(16) infinite;
margin:0;
}
#-webkit-keyframes animateBg {
from { background-position: 0px; }
to { background-position: -12720px; }
}
#-moz-keyframes animateBg {
from { background-position: 0px; }
to { background-position: -12720px; }
}
#-ms-keyframes animateBg {
from { background-position: 0px; }
to { background-position: -12720px; }
}
#-o-keyframes animateBg {
from { background-position: 0px; }
to { background-position: -12720px; }
}
#keyframes animateBg {
from { background-position: 0px; }
to { background-position: -12720px; }
}
http://jsfiddle.net/oe27u6sq/5/
and on:hover
http://jsfiddle.net/oe27u6sq/6/
you need use steps
div.bg {
background : url(https://dl.dropboxusercontent.com/u/10268257/all.png) 0 center;
height:443px;
width:795px;
}
#-webkit-keyframes animateBg {
100%{ background-position: 15900px center}
}
div.bg:hover {
animation: animateBg 2s steps(20) infinite;
}
step num the images and the image size in the keyFrame 100%
About prefixing
#-webkit-keyframes animateBg {
0% {background-position: 0px center}
100%{ background-position: 15900px center}
}
#keyframes animateBg {
0% {background-position: 0px center}
100%{ background-position: 15900px center}
}
div.bg:hover {
-webkit-animation: animateBg 2s steps(20) infinite; /* Chr, Saf */
animation: animateBg 2s steps(20) infinite; /* IE >9, Fx >15, Op >12.0 */
}
http://jsfiddle.net/p65j4oar/
I have the following code:
Here's the CSS:
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
body {
background-image: url(http://puu.sh/hzABm/3768f6abbb.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
Which is for the following HTML:
<body>
<div class="innercontent">
<p>This content is moving, why?</p>
</div>
</body>
I am trying to animate the body background to be clouds moving, but the entire page is scrolling, along with the background. For example, if you were to run the above code, the text "This content is moving, why?" would be moving. How can I fix this?
I show you an example working with your code:
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-ms-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 560px;
height: 400px;
background-image: url(http://puu.sh/hzABm/3768f6abbb.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
<html><head>
</head>
<body>
<div id="animate-area"><p>This content is moving, why?</p></div>
</body></html>