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>
Related
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.
I am having an issue with trying to make a fluid HTML page. (I wanted to take into account different sized resolutions, so I'm working with background images with widths of 1920px)
So I wanted to make a couple stacked divs, each with a background that gets resized via background-size. However, I'm noticing that I can't get 100% or contain to work as the property value unless I also manually set the height of the div. I can set it manually with a set px or %, but I feel like this isn't the best way to dynamically set the height of the div.
So I'm wondering if there's a better way to set the height of the div, so it's set to be the same height as the height of the image with the background-size property, so I don't get all the white space after the image, if the div is too tall.
I've got a live example here: https://jsfiddle.net/fcb1wcth/
#header {
background-image: url('http://i.imgur.com/x5wEY56.png');
background-repeat: no-repeat;
background-size: contain;
height: 710px;
color: #ffffff;
}
For example, this first div above... Since I'm working with a smaller screen, 710px is way too tall! The background-size does its job, I just don't know how to set the height correctly, and using a property value of auto doesn't help it.
// I've never used background-size before, so maybe I'm doing this wrong, but I wanted to try and experiment with making a page that works with any resolution.
Thanks for any help!
I think that better solution is to use a fixed height in combination with background-size: cover. Like this:
#header {
background-size: cover;
height: 400px;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/fcb1wcth/2/
in this example solve this issue.
http://www.jqueryscript.net/animation/Minimal-Full-Screen-Vertical-Slider-with-jQuery-Scroll-On-Scroll.html
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
}
I'm trying to make my background image on my splash page resize to smaller sizes. I want the image to cover the entire section whatever size screen it may be.
.splash{
background-image: url("../images/lanternboys_medium.jpg");
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
padding-bottom: 40px;}
When I view this on my ipad the picture is huge! I've read that others have tried removing the height and width and set background size as "contain" but it doesn't stretch to what I want without the "cover" function.
The current size of the picture is 1366x911 but I do have a larger size of 5184x3456.
Any tips would be greatly appreciated!
Most of the time, vw and vh units doesn't work properly on iOS devices. Maybe if you set your background height to 100% and the background width to auto? Since your height is smaller than the width, it should do the trick.