I found that sometimes when images shrink with Css background, they looks sharpen/blurry/glitch...?
Anyway, they look weird.
Here I have two div with same effect but different approach, the left one use the IMG tag and the right one use a DIV with background image.
with img tag
<div class="left">
<img src="/image.jpg" alt="test"></img>
</div>
.left {
flex: 0 0 $img-w-pc;
height: $img-w-pc * $img-ratio;
position: relative;
overflow: hidden;
img {
position: absolute;
width: 100%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
with background-image
<div class="right" style="background-image: url(/image.jpg)"></div>
.right{
flex: 0 0 $img-w-pc;
height: $img-w-pc * $img-ratio;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
The original image size is 1280 x 720 and when it's shrinking with the background-image it'll looks glitch.
However if I use a smaller image or enlarge the div, make the image "not shrink that much", then it'll be fine.
I test it on Chrome and FireFox and only the former with this problem.
What is the cause of it? Is this some special behaviors with Chrome?
Update
I create a codepen here: https://codepen.io/timtnlee/pen/GRjmxVK
Try adding the image-rendering: pixelated; declaration to the styles for your background image.
https://css-tricks.com/almanac/properties/i/image-rendering/
Related
I have the following snippet for the image container:
<div class="image-container">
<img src="/images/xyz.jpg">
</div>
.image-container {
width:415px;
height:552px;
}
The div's size is fixed and can't be changed. Images can be different sizes. At this moment, I have the following style for the image:
width:100%;
height: auto;
This may show a lot of empty space within the container for most images because their sizes do not math the 415/552 ratio.
Now I need to make images cover the whole div space. If I make the image the background of the container, this is what I would do:
.image-container {
width:415px;
height:552px;
background: url("/images/xyz.jpg") no-repeat center center / cover;
}
However, the images can't be background images due to a few reasons. How can I use CSS to enlarge images to achieve the same results as if they were used as background images through the above CSS. When enlarged, the image shouldn't be distorted.
Because you have a fixed width and height on your containing div, you can use absolute positioning on the image to make it take up the full height and width, for example:
.image-container {
position: relative;
width:415px;
height:552px;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
Edit: The above css worked after some changes. See fiddle: https://jsfiddle.net/rezvj2uw/1/ for an example
Try with:
.image-container {
width:415px;
height:552px;
background-image: url("/images/xyz.jpg");
background-size: 100% 100%;
}
Jsfiddle:
https://jsfiddle.net/MartinGK/0odgxjh3/3/
Jsfiddle second solution:
https://jsfiddle.net/MartinGK/0odgxjh3/9/
other solution:
https://jsfiddle.net/MartinGK/0odgxjh3/12/
My objective is to have a full-screen parallax background that is blurred.
The problem is that when you blur an element it no longer spans the full size of the container (because the edges are blurry). I found an example that suggested using transform:scale in order to stretch it just a little bigger than the size required for 'cover', although now this now makes it so that when you scroll down the page the background slowly moves down as well (once again exposing the blurred edges).
HTML
<div class="viewport"></div>
CSS
.viewport {
background-image: url("images/img1.jpg");
background-attachment: fixed;
filter: blur(7px);
position: relative;
transform: scale(1.1);
background-size: cover;
background-position: center;
height: 130vh;
z-index: -1;
}
Consider putting the viewport in a viewport-wrapper with hidden overflow?
HTML
<div class="viewport-wrapper"><div class="viewport"></div></div>
CSS
.viewport-wrapper {
overflow: hidden;
}
Codepen
I want to create a responsive image that takes up the entire height off the viewport and scales as the viewport changes.
I know that I can set the height with this:
height: 100vmax;
However, I cannot understand how to get the image width to change and effectively crop it's edges off so that the image stays centred horizontally.
A great example of is Big Green Egg's website although they use a video and I want to use an image.
It's worth mentioning that I need to enter this code into a CMS page (Magento 2) so it will sit within a set of other DIVs.
Try to use "vh" and use text-align on the outer container to center the image:
body {
text-align: center;
}
img {
height: 100vh;
}
<img src="http://kingofwallpapers.com/sexy-girl-wallpapers/sexy-girl-wallpapers-002.jpg">
But I would recommend to use background-image instead, since it's a part of design, not a content:
* {
margin: 0;
}
.image {
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
background: #e0eaec url(http://eskipaper.com/images/mikako-zhang-5.jpg) no-repeat center center / auto 100%;
}
h1 {
line-height: 50px;
text-align: center;
}
<h1><header> goes here</h1>
<div class="image"></div>
I'd go very simple here, with a css solution based on adding only object-fit and an optional object-position, very useful when the main point for adjustment is not the center of the picture
html
<img src="https://images.unsplash.com/photo-1518453850752-056b15f0a4ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">
css
img {
float: left;
width: 100%;
height: 100vh;
object-fit: cover;
object-position: 75% 75%;
}
Try to reduce the width of the picture in this JSFiddle: you will see that the focus will keep always around the dome. I suggest also to read this gem
By default, object-position: 50% 50% [i.e. the center of the picture] so in this case you don't need to specify it
NOTE - you can check their support on different browsers here
I'm having issues with background-attachment: fixed. When I apply it to the elements on my page it creates a very choppy scrolling effect. Essentially not something that is not a good experience for the user.
My code is here:
HTML
<div class="con row1">
<p>Some text here just to flesh out example</p>
</div>
<div class="grad-space">
</div>
<div class="con row2">
<p>Some text here just to flesh out example</p>
</div>
CSS
.con {
height: 100vh; }
.grad-space {
height: 50vh; }
.row1 {
background: url('https://s-media-cache- ak0.pinimg.com/736x/3d/88/09/3d880927ac8bfec60a04ca93064569e0.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed; }
.row2 {
background: url('https://d3rt1990lpmkn.cloudfront.net/640/31762579d8fd04a756fb791ac9c3634b5828f0dd') no-repeat center;
background-size: cover;
background-attachment: fixed; }
Here's a link to the codepen showing exactly what I'm talking about:
http://codepen.io/reskk/pen/qaYJwq
Edit: Fullpage Codepen: http://codepen.io/reskk/full/qaYJwq/
Now strangely enough when I resize the browser down to a small width (say 800px) the scrolling actually becomes very smooth - just as you'd want it to appear on a finished project.
When the browser is at its max width (and max height, which you can't quite fully get on codepen due to to the code-input box) that is where the janky, choppy scrolling happens.
I've done extensive searching on this and haven't been able to find a solution.
Does anyone have any ideas on this? It's such a gorgeous effect but is unfortunately made useless by the performance it yields.
Thanks,
Reskk
You know you can see any codepen in full page? Fullpage Codepen
About your choppy effect, what you probably are looking is a scroll animation smoother, not sure if this is the right term. What it does is that delays the mouse scroll effect, or reduces "line jumps" height, making the movement look better.
CSS Parallax by davidwalsh
Edit removed frameworks/libraries references (offtopic)
I was stressing with the same problem, and found a lovely solution here: https://medium.com/vehikl-news/fixed-background-image-performance-issue-6b7d9e2dbc55
Essentially, you need to remove the background image from your .rows and move it to a :before element for each. That way you're not using background-position: fixed, but rather position: fixed on your pseudo element.
.hero {
min-height: 100%;
position: relative;
overflow: hidden;
&::before {
background-image: url('background-image.png');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: '';
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}
Hi I have two columns of content within a container, the first column has text and the second is a span with a background sprite image. The problem is when I get to smaller screen resolutions, I want the background sprite image to have a width in percentage to be able to scale it along with the H5 with a percentage width, is there a way to do this?
h5{
float:left;
display:block;
width:800px;
}
.sprite{
background-image: url("assets/img/website_sprite_a.png");
background-position: -60px -60px;
float:left;
display:block;
width:64px;
}
<div class="container">
<h5>Title
</h5>
<span class="sprite">
</span>
</div>
In your case I would go with a single background-image, but in the case you will have a lot of images or you really want to do this you can use the background-size property.
From MDN:
The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.
.sprite{
background-image: url("assets/img/website_sprite_a.png");
background-position: -30% -30%; //use % instead pixels
float:left;
display:block;
width:64px;
background-size: 100%; //play with this
}
You also should read this:
Scaling background images
I have played a little bit with this on JSFIddle. Resize the browser to see the effect.
nearly a year too late, but I was trying to figure out the same and wasn't able to come up with or find a direct answer. After a little fooling around with multiple pieces of advice, I figured it out. Haven't had a chance to test this on IE8 yet, and stopped bothering with IE6/7, so please bear that in mind.
The trick I found is to use a combination of background-position (using percentages—of the sprite image—as mentioned before), padding-top (again, using percentages—this is the percentage of the total width of the sprite image), and background-size: cover.
Play around with it at jsfiddle.
#wrapper {
position: relative;
width: 100%;
}
.div {
position: absolute;
top: 0;
left: 0;
background-image: url('http://upload.wikimedia.org/wikipedia/en/2/2e/Sprite_logo.jpg');
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: cover;
padding: 50% 0 0 0;
width: 40%;
}
<div id="wrapper">
<div class="div"></div>
</div>