Is there a way to scale background-image with CSS only to a particular height in pixels and 100% of the parent container, which can change depending on the viewport width.
I've attempted using background-size: inherit; but it seems to just placing image as in auto
I event tried using:
background-size: 100vw 300px;
It doesn't seem to like the vw... Unfortunately I cannot use:
background-size: cover;
because it will crop from the bottom is the width of the container exceeds that of the image.
Related
I'm working on a project where I have to give a background-image a full width. The image should become larger as I make the screen larger, and smaller as I make the screen smaller.
This is my code at the moment. It's a footer decoration:
.footerDeco {
background-image: url(../resources/image_geometry_2.svg);
background-repeat: no-repeat;
height: 160px;
background-size: cover;
}
The background-size: cover makes the image adapt to full width, but the height of the image remains 160px no matter what. If I make the height larger, then it's a problem because it doesn't shrink back proportionally as the screen becomes smaller.
I have tried giving it a height auto or a height 100% expecting the height to change proportionally to the width. (I do understand this height is the height of the footer container, but I don't know how to change it otherwise).
I know it would be much easier to use an img tag. But the demands of the project and good practice insist that since this is a decoration, I should use the background-image property. Is it possible? Thanks!
P.S.: There are similar questions that have been answered here, but none of them (as far as I can tell) solve the problem of the image resizing past the constant container height of 16px.
To make the height change proportionally to the width, you can use vw to specify the height, for example:
.rooterDeco {
height: 20vw;
}
maybe for a size of 100% it will work
background-size: 100% 100%;
using percentage makes the element one size relative to the size of the parent element.
You can use aspect-ratio.
.footerDeco {
aspect-ratio: 16 / 9;
background: url(https://www.fillmurray.com/g/300/200);
background-size: cover;
}
<div class="footerDeco"></div>
I am trying to make a slider with background images, when I am trying to make it fit to the mobile screen, the proportion is affected and look as pixels, how can I resize the background-image to fit the mobile screen without affecting the proportion.
and when I increase the height to :
background-size: 100vw 55vh !important;
height: 55vh !important;
You can use the object-fit property to maintain the aspect ratio of the image:
img {
height: 55vh
object-fit: contain;
}
contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.
Instead of fixing both height and width of the image, just define the one which you need (for example width) and set the other one to auto. For height that would be:
background-size: auto 55vh;
height: 55vh;
that way the original image proportion will be kept, avoiding a distorted image.
you can use this CSS:
{
background-size: contain;
background-repeat: no-repeat;
}
if it didn't work please share your code. I know I can help you.
How can I display a cover image at the top of a web page that stretches when the width of the screen is bigger than the width of the image, but that retains a fixed height?
Here is a page with the behavior I am trying to emulate.
http://outsite.co/san-diego/
Here is the link to the page I am trying to apply it to.
http://phrasemates.com/xcode-developer-language-app.html
Thanks!
That would be an element with specified height, and a large background-image with background-position set to 50% or center, and background-size set to cover or auto 100% (for some older browsers).
div.wide{
height:500px;
background-image: url(path/to/big.jpg);
background-position: 50%;
background-size: cover;
}
to add to what Isaac Lubow said, i would also add an overflow rules in there so it would look like
div.wide {
height:500px;
background-image: url(path/to/big.jpg);
background-position: 50%;
background-size: cover;
overflow:hidden;
}
Adding overflow: hidden; will make sure that the image doesnt bleed anywhere. however it may not be necessary, just depends on your setup.
You could also set the width to 100vw and retain the set height of 500px. This would fill the width of the viewing window but retain your height.
My PNG picture size is 1000px by 1000px.
I use it as a background image in a DIV which has a height of 550px and a background-size: cover property.
My issue is that this background-size cover does not seem to be working. My picture is not scaled down to the size of the DIV. What is the issue?
Without seeing your actual code, answers can only be based on assumptions but I am assuming that my assumption must be correct in this case based on the screenshot provided.
From the screenshot, it seems like your element doesn't have a fixed width and is taking up 100% of the available width and also that the width is a lot higher compare to the height of the element.
(The above assumption has been confirmed by your live link.)
As per specs, the cover keyword has the following definition:
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
The key parts that are relevant for this question have been emphasized. As you have indicated, in this case, the image's dimensions is 1000 x 1000 whereas the container's dimensions is [Y] x 550 where [Y] seems to be higher than 550. Now, let us assume that [Y] is 750. This would mean that the image will be scaled such that it has to fit the entire width (as it is larger). Since image has 1:1 aspect ratio, it would be scaled down to 750 x 750. Thus the image's height is greater than the container's height and so the bottom part of the image will get cropped.
You can see that in the below snippet also. The first image is the background with cover whereas the second is the actual sized image.
div {
height: 550px;
background-image: url(http://lorempixel.com/1000/1000/nature/1);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />
You can use background-size: 100% 100%, it will make the image fill the entire height and width of the container but it will not preserve/maintain the aspect ratio of the image.
Alternately, you could make use of background-size: contain, it would preserve the aspect ratio but it will leave white space on the left and right if the width is larger (or) on the top and bottom if the height is larger.
Demo with width being larger:
div {
height: 550px;
background-image: url(http://lorempixel.com/1000/1000/nature/1);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />
Demo with height being larger:
div {
height: 550px;
background-image: url(http://lorempixel.com/1000/1000/nature/1);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
max-width: 450px;
/* just for demo */
border: 1px solid;
}
<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />
Use background-size 100% 100% instead, should solve the issue.
I have div with absolute height and width:
<div style="height: 500px; width: 300px;">
I want to put a background image (width 500px; height 1500px ) to fit the width of the DIV, but i want to let overflow the height of the div. I don't want to loose proportions of my image.
Image is generated dynamically, sometimes is height smallest than a div height. I need to be always cover on width, don't care about height.
Is in CSS some way to do it without need of using javascript?
background-size: cover value works only when image height is smaller than div height.
Im finding something like:
background-size: 100% default;
Should be
background-size: 100% auto;
Try:
.element {
background-size: cover
}