I've got a an image I'm using as a background that is animated in CSS, but it is push all of my content to the bottom of the page with plain white background. Does anyone know how I can get it to act more of an animated wallpaper so my content isn't pushed down?
#map {
height: 400px;
width: 400px;
margin: 0 auto;
}
.check {
text-align: center;
}
h3,
h2,
h1,
a {
text-align: center;
background-color: transparent;
}
#sky {
overflow: hidden;
}
#clouds {
width: 200%;
height: 1000px;
background-image: url('https://images.unsplash.com/photo-1455735459330-969b65c65b1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80');
-webkit-animation: movingclouds 25s linear infinite;
-moz-animation: movingclouds 25s linear infinite;
-o-animation: movingclouds 25s linear infinite;
}
#keyframes movingclouds {
0% {
margin-left: 0%;
}
100% {
margin-left: -100%;
}
}
<div id="sky">
<div id="clouds"></div>
</div>
Move the animation to the background position. This way, it will animate behind whatever is on top of it. In this case, I've moved the background to the body, but you can use absolute/relative position as well.
By animating the margin, you push everything to one side, not just the background.
body {
background-image: url('https://images.unsplash.com/photo-1455735459330-969b65c65b1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80');
-webkit-animation: movingclouds 25s linear infinite;
-moz-animation: movingclouds 25s linear infinite;
-o-animation: movingclouds 25s linear infinite;
}
#keyframes movingclouds {
0% {
background-position: 0%;
}
100% {
background-position: -100%;
}
}
Working example: https://jsbin.com/ruyemijasi/edit?html,css,js,output
Related
I am trying to create a slideshow as background but it does not work in Firefox. The image change but there is not the specified transition.
.main-page {
width: 100%;
height: 100vh;
animation: animate 15s ease-in-out infinite;
-webkit-animation: animate 15s ease-in-out infinite;
-moz-animation: animate 15s ease-in-out infinite;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
background-size: cover;
}
#keyframes animate {
0%,
100% {
background-image: url(/img/001.jpg);
}
50% {
background-image: url(/img/002.jpg);
}
}
Checking inspector and I can see that the following is active:
-webkit-animation: animate 15s ease-in-out infinite;
What do I do wrong?
Thanks.
It seems that FF and Chrome interpret animation between background images differently. Chrome continuously fading one out while fading the next one in (as with background color) but FF just shows one, then the other.
One way round this for the two image situation shown in the question is to put the background images on before and after pseudo elements and use CSS animations to fade them in and out using opacity which FF does treat as animatable.
Here's a simple example as demo:
.main-page {
width: 100%;
height: 100vh;
}
.main-page::before,
.main-page::after {
width: 100%;
height: 100%;
position: absolute;
content: '';
top: 0;
left: 0;
animation: animate 15s ease-in-out infinite;
-webkit-animation: animate 15s ease-in-out infinite;
-moz-animation: animate 15s ease-in-out infinite;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
background-size: cover;
}
.main-page::before {
background-image: url(https://picsum.photos/id/1015/200/300);
}
.main-page::after {
background-image: url(https://picsum.photos/id/1016/200/300);
animation-delay: 7.5s;
}
#keyframes animate {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="main-page"></div>
I want to blink my bg image using css.
It should blink quickly and I have no idea how to do it.
I can only use HTML and CSS.
header {
width: 100%;
height: 100vh;
background-image : url('bg.jpg');
animation: blinkingBackground 2s infinite;
background-position: right bottom, left top;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Dosis', sans-serif;
}
I have also added
animation: blinkingBackground 2s infinite;
but it's not working.
#Ahmad's solution is good, but it doesn't fade in smoothly. So I made a code which makes the blinking smoother.
.html_bg {
background-image: url(https://cdn.arstechnica.net/wp-content/uploads/2020/09/macOSBigSur.jpg);
animation: blink 1.5s infinite;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#keyframes blink {
50% {
opacity: 0;
}
}
<div class="html_bg">
<!--Put your content here-->
</div>
I made the opacity change to zero at 50% so that the opacity can change back to 1 smoothly.
Do you need something like this?
.html_image {
background-image: url('https://i.picsum.photos/id/686/536/354.jpg?hmac=nQKjRmIoZtUkWvI-wNF8RFNW89VHuPIPT2muuPPL3QY');
height: 200px;
animation: blink 1s infinite;
}
#keyframes blink {
50% {
opacity: 0;
}
}
<div class="html_image">
</div>
Working Fiddle
I'm trying to create a nice old CRT "tv" effect using animation in CSS, but having some problems with the scanlines displaying above and below the intended div.
What I have is a landing page that has 4 divs that link to other areas of the site. The 1st 2 divs are "TVs" each have a background showing the "tv" (static image) of the content of the link.
On a desktop or other larger screen, the 4 divs are displayed as 2x2, on a smaller screen it's shown in a 1x4 format.
I've created a single image that will be animated with css to fake the moving scanlines moving down the 1st 2 divs.
What's happening is that the "scanlines" appear above the "TVs" and move to below the "TVs".
You can see what's happening on JSFiddle:
http://jsfiddle.net/blyzz/ynekxcud/2/
Here's some cleansed HTML code:
<a href="URL1" target="_blank">
<div class="content" id="outside">
<div class="scanlines">
<div class="aniscan" id="aniscanout">
</div>
<div class="aniscan" id="aniscanout2">
</div>
</div>
</div>
</a>
<a href="URL2" target="_blank">
<div class="content" id="inside">
<div class="scanlines">
<div class="aniscan" id="aniscanin">
</div>
<div class="aniscan" id="aniscanin2">
</div>
</div>
</div>
</a>
and the accompanying cleansed CSS:
.content{
width: 300px;
min-width: 300px;
height: 125px;
min-height: 125px;
float:left;
margin: 5px;
border: 3px solid #555555;
z-index: -100;
}
.scanlines{
width: 100%;
height: 100%;
background-repeat: repeat;
z-index: 100;
}
.aniscan{
width: 100%;
height: 100%;
background-image: url('http://www.oocities.org/~special_effect/holo_scanlines.jpg');
background-repeat: repeat-x;
z-index: 200;
position: relative;
opacity:0.6;
}
#inside {
background-image: url('http://www.clipartbest.com/cliparts/xig/7rM/xig7rMriA.png');
border-radius: 0px 15px 0px 0px;
}
#outside{
background-image: url('http://cdn.graphicsfactory.com/clip-art/image_files/image/6/1347556-2587-Royalty-Free-Dog-With-Big-Bone-In-Mouth.jpg');
border-radius: 15px 0px 0px 0px;
}
#aniscanin{
-webkit-animation: mymove 5.2s linear infinite;
-moz-animation: mymove 5.2s linear infinite;
-o-animation: mymove 5.2s linear infinite;
animation: mymove 5.2s linear infinite;
}
#aniscanin2{
-webkit-animation: mymoveb 5.2s linear infinite;
-moz-animation: mymoveb 5.2s linear infinite;
-o-animation: mymoveb 5.2s linear infinite;
animation: mymoveb 5.2s linear infinite;
}
#aniscanout{
-webkit-animation: mymove 4.8s linear infinite;
-moz-animation: mymove 4.8s linear infinite;
-o-animation: mymove 4.8s linear infinite;
animation: mymove 4.8s linear infinite;
}
#aniscanout2{
-webkit-animation: mymoveb 4.8s linear infinite;
-moz-animation: mymoveb 4.8s linear infinite;
-o-animation: mymoveb 4.8s linear infinite;
animation: mymoveb 4.8s linear infinite;
}
#-webkit-keyframes mymove {
0% {top: -125px;}
100% {top: 0px;}
}
#keyframes mymove {
0% {top: -125px;}
100% {top: 0px;}
}
#-webkit-keyframes mymoveb{
0% {top: -125px;}
100% {top: 0px;}
}
#keyframes mymoveb {
0% {top: -125px;}
100% {top: 0px;}
}
I considered making a "window" with higher z-index divs above and below the 2 TVs, but it doesn't really work well with responsive design.
Any help would be appreciated!
P.S. It'd be nice if i could get the scanlines behind the rounded corners as well, but it's not really a deal-breaker - I can always remove the rounded corners.
You need overflow: hidden in your .content class:
Like this:
.content{
width: 300px;
min-width: 300px;
height: 125px;
min-height: 125px;
float:left;
margin: 5px;
border: 3px solid #555555;
z-index: -100;
overflow: hidden;
}
Fiddle:
http://jsfiddle.net/ynekxcud/3/
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>
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>