So I got this Fullscreen Background Image Slideshow from tympanus :) You can definitely see the codes on the site linked above... now I do not want it to be taking the whole page... I want to add margins all over... I've been trying to do it but no avail. I tried reducing the size of the background image into lesser percent but it's still not proportioned...
How do I add an equal padding to the slideshow? :(
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}
I think the absolute simplest way is to do like this:
.cb-slideshow li span {
left: 5%; // alter as you like
top: 5%; // alter as you like
width: 90%; // alter as you like
height: 90%; // alter as you like
position: absolute;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}
Related
I have a div with a background image and I'm trying to change its scale infinitely.
I changed the background-size property in the animation but as you can see, there is some noise or vibration when animating. How would I remove it?
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center no-repeat #fff;
background-size: 50%;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
0% {
background-size: 50%
}
50% {
background-size: 55%
}
100% {
background-size: 50%
}
}
<div class="pre-loader"></div>
Consider a scale transformation to have a better rendring:
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
overflow:hidden;
}
.pre-loader:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center/50% auto no-repeat #fff;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
50% {
transform:scale(1.1);
}
}
<div class="pre-loader"></div>
You are centering the background which means applying a background-position equal to 50%. The calculation of this value is related to the background-size so the position is changing slightly when the size is changing creating this bad effect:
If you consider a position using pixel values you will not see this effect:
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
overflow:hidden;
}
.pre-loader:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') 50px 50px/50% auto no-repeat #fff;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
50% {
background-size:55%;
}
}
<div class="pre-loader"></div>
Use transform instead of background-size
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center no-repeat #fff;
background-size: 50%;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
50% {
transform: scale(1.2);
}
100% {
transform: initial;
}
}
<div class="pre-loader"></div>
There is nothing wrong with your code, the problems lays in the CSS. I think there is a performance issue in your animation with:
#keyframes loading {
0% {
background-size: 50%
}
50% {
background-size: 55%
}
100% {
background-size: 50%
}
The animation will relocate every single pixel from every image. So that will be a bit heavy for the browser to render I think.
Also your animation time with animation: loading 5s ease-in-out infinite; is a factor why its making noises. With the animation time of 5 seconds, it becomes clear that each pixel is reloaded.
If you change this time to 1s, you'll find that it runs smoother as the time between animations goes by faster.
But since the 5 seconds should persist, the simplest solution is to add the code snippets from #Félix or #TemaniAfif answer into your code which are really 2 great answers to your question.
Good Afternoon
Trying to make responsive background on my landing, and for some reason i couldn't
I was trying to use height: auto, height: 100% and margin: 0 auto; The height 100% worked but it didn't cover to down of my screen, i had it more than i need.
Here is my code:
.crossfade > figure {
animation: imageAnimation 48s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
height: 470px;
left: 0px;
opacity: 0;
position: absolute;
top: 189px;
width: 100%;
background-color: rgba(0,0,0,.3);
background-blend-mode: darken;
z-index: 0;
}
The only one thing worked for me, it was:
height: calc(100vh - 189px);
189px it indent from my header menu, but is any how i can make it work without calc?
Hope you undertand what i meant
Thanks
Try this
.crossfade > figure {
animation: imageAnimation 48s linear infinite 0s;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,.3);
z-index: 0;
}
Try something like:
.crossfade > figure {
animation: imageAnimation 48s linear infinite 0s;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,.3);
z-index: 0;
}
#menu-contact-us {
background: #5D5D5D;
height: 124px;
color: #ffffff;
width: 100%;
position: relative;
z-index: 1;
}
I was able to get the images to go full screen on the link that you posted
The CSS value background-size: cover will stretch an image but retain its width to height ratio. However, it will only stretch it until the smallest side reaches 100% of the parent node's same side.
/* This is an image of 100px Wide x 50px Tall, so it'll
stretch to 100% of the window height and then scale the
width larger to retain its width-to-height ratio.
*/
body
{
background-image: url( "/images/test.png" );
background-size: cover;
background-position: center;
}
I want something that will do a cover but to some larger percentage, for example 130%. (I will be using this in a CSS keyframes animation to make the background image grow/shrink)
How would I do this?
By using a pseudo element you can achieve something like that
CSS animation has a browser support at +90%: http://caniuse.com/#feat=css-animation
.bkg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.bkg::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(http://lorempixel.com/500/400/nature/1);
background-size: cover;
background-position: center;
animation: growme 5s forwards;
}
#keyframes growme {
from {transform: scale(1);}
to {transform: scale(1.3);}
}
<div class="bkg"></div>
Grow and shrink
.bkg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.bkg::before {
content: '';
position: absolute;
left: -20%;
top: -20%;
width: 140%;
height: 140%;
background-image: url(http://lorempixel.com/500/400/nature/1);
background-size: cover;
background-position: center;
animation: shrinkme ease-in-out 10s infinite;
}
#keyframes shrinkme {
0% {transform: scale(1);}
50% {transform: scale(.72);}
100% {transform: scale(1);}
}
<div class="bkg"></div>
Update based on comment where some browsers have issues animation pseudo elements, where one simply use a child element instead.
.bkg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.bkg div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(http://lorempixel.com/500/400/nature/1);
background-size: cover;
background-position: center;
animation: growme 5s forwards;
}
#keyframes growme {
from {transform: scale(1);}
to {transform: scale(1.3);}
}
<div class="bkg"><div></div></div>
I've done this before by applying the background-image to a psuedo element such as ::before that is positioned absolutely, and applying a scale transform to it.
I have put together a fixed menu bar which appears once scrolled down the page.
http://staging.meadowspetcareservices.co.uk/
I have implemented this, but the customer would like a icon image within the bar. I have tried adding this as a background image within the CSS. But it just isn't showing?
nav.nav-header.fixed {
width: 100%;
z-index: 600;
background: #9D162E url(/wp-content/uploads/2016/03/meadows-favicon-negative.png);
background-repeat: no-repeat;
background-position: 20px center;
background-size: 56px;
position: fixed;
top: 0;
left: 0;
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
-webkit-animation: slidedown 2s forwards;
animation: slidedown 2s forwards;
}
nav.nav-header.fixed.wrap {
width: 100%!important;
}
nav.nav-header.fixed ul#menu-primary {
width: 100%;
text-align: right;
}
Any help would be appreciated
Your code actually works!
The problem is that this code is applied after your image (think painted above)
.site-header .genesis-nav-menu {
background: #9D162E;
}
So just remove the background color for the above class and you're good to go!
Is this what you want?
ul#menu-primary{
background-image: url('wp-content/uploads/2016/03/meadows-favicon-negative.png') !important;
background-repeat: no-repeat;
}
I'm trying to do some interactive map, where I'm using two very large images (3200x800 and 4096x1024 pixels). Problem is, that Chrome decode image with clouds every frame... so performance is really poor (example in snippet).
Found similar problem here, but didn't help. I'm using Chrome 43 (64-bit) on Linux Mint 17.1 (64-bit). I also tried Firefox and without problem...
html, body {
height: 100%;
}
body {
margin: 0;
overflow: hidden;
}
div {
position: absolute;
width: 3200px;
height: 1800px;
background: url('http://i.imgur.com/p1Jf722.png'), url('http://i.imgur.com/zUkgN3j.jpg');
animation: clouds 200s linear infinite;
transition: 5s;
left: 0;
top: 0;
}
#keyframes clouds {
from { background-position: 0 0, left top; }
to { background-position: 4096px 0, left top; }
}
body:hover > div {
left: -500px;
top: -250px;
}
<div></div>
Using a pseudo element and transform still uses a lot of CPU, but it is quite smoother. And it absolutely eliminates the image decodes.
I think that Chrome is using a single buffer for a div background. When you change the relative positions of the 2 images in this buffers, it becomes invalid and has to be rendered decoded again. Probably FF can allocate an intermediate buffer for every image, even if used in the same background
html, body {
height: 100%;
}
body {
margin: 0;
overflow: hidden;
}
div {
position: absolute;
width: 3200px;
height: 1800px;
background: url('http://i.imgur.com/zUkgN3j.jpg');
transition: 5s;
left: 0;
top: 0;
background-position: left top;
transform: translateZ(0px);
}
div:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url('http://i.imgur.com/p1Jf722.png');
animation: clouds 200s linear infinite;
transition: 5s;
left: 0;
top: 0;
transform: translateZ(0px);
}
#keyframes clouds {
from { background-position: 0 0; }
to { background-position: 4096px 0; }
}
body:hover > div {
left: -500px;
top: -250px;
}
<div></div>
There are probably multiple ways to do improve performance here, but the lowest hanging fruit is just to offload everything onto the GPU by adding a non-distorting transform to your div. Voila, no more image decodes.
html, body {
height: 100%;
}
body {
margin: 0;
overflow: hidden;
}
div {
position: absolute;
width: 3200px;
height: 1800px;
background: url('http://i.imgur.com/p1Jf722.png'), url('http://i.imgur.com/zUkgN3j.jpg');
animation: clouds 200s linear infinite;
transition: 5s;
left: 0;
top: 0;
transform: translateZ(0);
}
#keyframes clouds {
from { background-position: 0 0, left top; }
to { background-position: 4096px 0, left top; }
}
body:hover > div {
left: -500px;
top: -250px;
}
<div></div>