In Google Chrome, when you have two elements, one that has a CSS3 animation and another with a background-image with a fixed position and an absolute positioned parent (important to keep that), the fixed property stops working when the animation is active.
Here is a JSFiddle, open in Chrome, scroll up and down to see the image be fixed, and then hover over the red square to see the fixed property break:
http://jsfiddle.net/keleturner/44mjq/
<div class="animation">
</div>
<div class="background">
<span></span>
</div>
.animation { display: block; width: 300px; height: 300px; background: red; -webkit-transition: 1.8s -webkit-transform ease; }
.animation:hover { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);}
.background { position: absolute; left:0; top: 300px; display: block; width: 100%; height: 500px; }
.background span { background-attachment: fixed; background-size: cover; background-image: url(http://image.jpg); width: 100%; height: 100%; display: block; }
Any ideas why?
Why not make the body element have the background? Demo
But to answer your question, it's rendering error due to the body increasing size due to the scale. To fix it add -webkit-transform:translateZ(1px); to either .animation or .background
But your setup is a silly one to have, it can be done in much better ways
Related
I have problem on Chrome browser while combining two properties: filter: blur(15px) and transform: scale3d(1.2,1.2,1).
I have two images, one over another. Image on higer layer is blurred, but it's edges got transparent when I applied that filter, so I added overflow:hidden to parent div, and scaled up image. I expected to see just opaque part of image.
It works as expected on Firefox and Opera, however on Chrome and MS Edge browsers not. How to fix this?
#images-box{
position: relative;
width: 500px;
height: 280px;
overflow:hidden;
}
.image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://images.unsplash.com/photo-1558389157-a986a38f3431?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');
background-size: cover;
background-position: 50% 50%;
}
.image.blured{
-webkit-filter: blur(14px);
filter: blur(14px);
z-index: 2;
-webkit-transform: scale3d(1.2,1.2,1);
transform: scale3d(1.2,1.2,1);
}
<div id="images-box">
<div class="image"></div>
<div class="image blured"></div>
</div>
Changing scale3d(1.2,1.2,1) to scale(1.2) helped me on Chrome 86.0.4240.198.
Let's say that I want to fit an 10*60 image into a 15*15 container. That is to say, I want to stretch my image so that the width correspond (so that would be an image of 15*90), but I do not want the height to stretch more than the width, so the bottom of my image will not appear.
When I define my html image, I put an width=100% to stretch the width, but what do I say to the height?
Thank you !
You can simply use a background image and set its background-size property to contain (or cover, depends what you need).
.container {
background: url(http://via.placeholder.com/350x300) no-repeat center center orange;
background-size: contain;
animation-duration: 3s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes changewidth {
from {
width: 100px;
height: 300px
}
to {
width: 300px;
height: 100px
}
}
<div class="container"></div>
You can also position the image absolute, so you can do something like this:
.embed.ratio-16-9
img
.embed {
position: relative;
height: 0;
overflow: hidden;
max-width: 100%;
img {
position: absolute;
top: 0;
left: 0;
right: 0;
min-width: 100%;
}
.ratio-16-9 {
padding-bottom: 56.25%;
}
The image height should no longer be stuck to you block.
If I understood the question correctly, you don't have to specify any value on the height property. Just set overflow:hidden on your container if you don't want the overflowing part of the image to show. Hope this helps.
CSS background-image with background-size: cover
You should use CSS background-image property for this kind of styling your web elements.
What you're looking for is probably the background-size: cover;. What it does is it fits the image based on width of the container.
CSS:
.cont {
width: 200px;
height: 200px;
background-image: url('urlToImage100x300.jpg');
background-size: cover;
}
HTML:
<div class="cont"></div>
Also, if you want to center your image vertically use background-position-y: center;.
.cont {
width: 200px;
height: 200px;
background-image: url('urlToImage100x300.jpg');
background-size: cover;
background-position-y: center;
}
HTML img tag
If you really need to use an <img /> tag for this operation; What you need is to put the image into container, then set the width, height to your desired size and overflow-y to hidden. After that, set the width of an img to 100% and it's done.
CSS:
.cont {
width: 200px;
height: 200px;
overflow-y: hidden;
}
.cont img {
width: 100%;
}
HTML:
<div class="cont"><img src="image100x300.jpg" /></div>
Working demo CSS w/o y-axis center: https://jsfiddle.net/e2vt3sw6/
Working demo CSS w/ y-axis center: https://jsfiddle.net/e2vt3sw6/1/
Working demo HTML img tag: https://jsfiddle.net/e2vt3sw6/2/
Tests where made using 150x300px image and 200x200px container
My goal is to create a little slideshow, and I already made it here : https://jsfiddle.net/cas1g2ch/2/
Here's the code :
HTML
<div id="first-block">
<div id="background-header">
<div class="bg-wrapper">
<div class="background-img-1"></div>
</div><!--
--><div class="bg-wrapper">
<div class="background-img-2"></div>
</div>
</div>
</div>
CSS
#first-block{
position: relative;
width: 100%;
height: 100vh;
}
#keyframes zoomPicture {
0%{
transform: scale(1.0);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1.0);
}
}
#background-header{
position: absolute;
top : 0;
left : 0;
width: 200vw;
height: 100vh;
box-shadow: 0px 1px 1px #333;
}
#background-header > .bg-wrapper
{
width: 100vw;
height: 100vh;
display: inline-block;
float: left;
overflow: hidden;
}
#background-header > .bg-wrapper > div{
width: 100vw;
height: 100vh;
background-attachment: fixed;
animation-duration: 20s;
background-size: cover;
animation-timing-function: ease-in-out;
animation-name: zoomPicture;
animation-iteration-count: infinite;
}
#background-header .background-img-1 {
background-image: url("http://www.hd-wallpaper.images-fonds.com/modules/mg3/albums/Paysages_(landscapes)_Wallpaper_HD/Paysages/Paysage_(landscape)_wallpaper_HD_0025.jpg");
}
#background-header .background-img-2 {
background-image: url("http://unreveunvoyage.fr/wp-content/uploads/2015/04/parc-national-de-banff-paysage-canada.jpg");
}
Right now the slideshow has two pictures, and each picture covers the entire screen size (width : 100vw ; height : 100vh ; background-size : cover).
To display the pictures I used background-image, and the backgrounds are fixed.
Because I cannot animate a background with background-size : cover, I used transform : scale to add a little zoom effect.
The problems :
On Chrome there's a weird Glitch (Chrome 56 on Windows), just use the scrollbar
in the demo to see the problem, here's a video I made that shows the
problem : https://www.youtube.com/watch?v=NHCLBTpxCAs (In this video I chose a high transform: scale value to better recognize the bug)
On Firefox the backgrounds are not fixed, but the pictures are
displayed correctly
Surprisingly it works great on Internet Explorer 11
It also seems to work on mobile
How can I fix this? What is the best workaround?
I have element with:
background-image url('../images/belly.png')
background-position 50% 50%
background-repeat no-repeat
background-attachment fixed
background-size cover
And underlying element with position: fixed;
And if I scroll page background is not redrawing. Problem appear in Chrome. Any solution?
demo: http://silentimp.github.io/90daysofbelly/
video: https://www.youtube.com/watch?v=av6jZciNszo&feature=youtu.be
I have noticed the best way to make sure the page backgound stays fixed no matter what is: place it as the background image of an empty first child of body, with these CSS rules:
.background-holder {
position: fixed;
width: 100%;
height: 100%;
display: block;
z-index: -10;
background-image: url(//link-to-image);
background-size: cover;
}
And here's the page structure:
<html>
<head>
</head>
<body>
<div class="background-holder"></div>
<div class="main-container">
<!-- content goes here -->
</div>
</body>
</html>
I had the same issue you had and struggled with it for almost 3 days. But as of June 2020 and improving on #tao's answer, here is a reliable solution I found for this that works on all devices and has 100% browser compatibility. It allows the desired effect in any place of the page and not just the top or bottom of the page, and you can create as many as you need or want.
The only known issue is with safari. The browser repaints the whole image every scroll movement so it puts a heavy burden on graphics and most of the time makes the image flicker up and down some 10px. There is literally no fix for this, but I think there is also no better response for your inquire.
I hope this works for you. You can check the results live in www.theargw.com, where I have three different fixed background images.
body, .black {
width: 100%;
height: 200px;
background: black;
}
.e-with-fixed-bg {
width: 100%;
height: 300px;
/* Important */
position: relative;
}
.bg-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
transform: translateZ(0);
will-change: transform;
}
.e-container {
z-index: 1;
color: white;
background: transparent;
}
<div class="black"></div>
<div class="e-with-fixed-bg">
<div class="bg-wrap">
<div class="bg"></div>
</div>
<div class="e-container">
<h1>This works well enought</h1>
</div>
</div>
<div class="black"></div>
--------------------- EDIT ---------------------
The code posted was missing the background wrapper that allows the background to not change size and maintain the fixed position. Sorry to post the wrong code this morning guys! But here is the change.
So on my page here: dunnrite.co.uk/frame2 you will find under the "text design" header some patterns beneath the 5 solid blocks of colour. They are set as background images for divs. The problem is because I want those divs so small it clips a load off of the original image. How do I get it so that the image shown is more zoomed out to show off the pattern more?
My css was just
background-image:url("Images/pattern12.jpg");
Thanks,
Jonathan
Use the background-size CSS property, and probably you want to use the cover value, which ensures that the background completely covers your container, without distorting the image (if the aspect ratio differs, then clipping will occur).
You can also specify an explicit size for your background image, for example 45px as in your case.
The documentation for background-size can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I zoom in the element using the transform: scale(2,2); property.
here is demo link ..
http://jsfiddle.net/s3hWj/4/
<div class="wrap">
<div></div>
<p>hello</p>
</div>
html, body {
height: 100%;
}
div.wrap {
height: 33%;
width: 33%;
overflow: hidden;
position: relative;
}
div.wrap > div {
position: absolute;
height: 100%;
width: 100%;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
z-index: -1;
}
div.wrap:hover > div {
-moz-transform: scale(2,2);
-webkit-transform: scale(2,2);
transform: scale(2,2);
}