I'm having a container with height: 100vh; . This contaier has a background image. I want the background to be responsive and fit the entire div. Using background-size: cover doesn't make it look good. How can I achieve this? Thanks
it depends on what you are looking for, there are many options:
background-size:contain it will stretch to max width and height to
fit the container, rest of the space will be background-repeated if
you dont set background-repeat:no-repeat
background-size:100% 100%; will stretch your background to 100% of width and height of container but this will change your image proportions-image will be deformed
cover will stretch image so whole area is covered with image, but
rest of the image will be croped (as you already discovered)
you can also use css (percentual padding top/bottom) to have responsive container with given proportion and so have both, full image cover and no-croped sides
Related
Using background-size: cover I am able to make the background stretch to fit the full width of the page.
Using repeat-y I am able to make the background repeat or tile vertically, to the full height of the page.
Is there any way to combine these two effects? Unfortunately they don't seem to work together (at least in Chrome). It appears that I can either stretch in both directions with background-size: cover, or not stretch in the x direction but repeat in the y direction.
Edit: Using background-size: 100% Npx (where N is the height of the image) I can accomplish the above, but it skews the background image as it's only stretched in one direction. Is there a way to keep it scaling proportionally?
Instead of cover, use background-size: 100% auto; to size the background image to full browser width while maintaining aspect ratio for its height. Use this in conjunction with background-repeat: repeat-y; to tile it vertically.
I'm trying to make a background image in react cover the wohle screen, but everything I've tried so far hasn't worked, from designating the height to be 100% or auto, to having background-size set to cover.
How do I do this? It's a component that's a couple components deep into the app, and should take up the entire screen space. Right now the background image is only as tall as the rest of the page, but I want it to stretch to the bottom of the window.
It works when I designate the pixels, but then I'm designating the pixels and it isn't responsive.
Thank you!
Use vh, vw:
height: 100vh;
width: 100vw;
I've got a Bootstrap page where some rows have background images. Is there a way (preferably css) to scale such a background image, so that it's always centered and fills the div 100%?
So I don't mean a fullscreen background image for the entire page (like this), it just needs to fill the div (typically a row in my bootstrap container).
I mean like so:
So no matter the display resolution and the actual screen size of the div, its background image should scale accordingly so it entirely fills the div. The image should not be stretched out of proportions, which means that part of the image will typically fall outside the div, either up/down or left/right (unless the div just so happens to have the exact same aspect ratio as the image).
Also the image should be centered, i.e. the middle of the background image should be in the middle of the div.
I've tried all sorts of things with background-size:100% auto or auto 100% which seems to work OK in one direction, but I can't seem to find a generic solution that works in all cases.
sure, you could apply the same idea to any element:
yourdiv {
background: url(images/bg.jpg) no-repeat center center fixed;
/* and one of these: */
background-size:contain;
background-size:cover;
}
The div in which I have a background image is of unknown size. It can be 16px high, it can be 1600px, and anything in between. There's a background-image in there that's roughly 440px wide and 250px high.
When the div is higher than 250px, the background image doesn't scale. That's desired behaviour. So far so good.
If the div gets under 250px in height, the background-image is clipped. That's unwanted: I want it to scale to the div's smaller height.
How do I use css (or, if not possible, js) to have a background-image scale down when it doesn't fit its div, but never scale up when the div is bigger than itself? Essentially, I want to use background-size: contain;, but with a max set to the image's height.
I tried all kinds of cover and contains, but none have the desired effect.
This question does not help either, for I cannot set a max-height on the div. It contains content added by the site's editor. If that's a lot, all of it must show.
Here's a fiddle: http://jsfiddle.net/Bakabaka/2zetkrg0/
Is simply inserting an img inside the element you wanted to give a background to an option?
You can use max-width:100%; max-height:100%; on the image, so it will not exceed the container dimensions, but will still retain its aspect ratio and won't grow larger than its original size. Next, you could position the image absolutely and give it z-index:-1 so it'll be behind all the content and won't be affected by it. Finally, just give the image top:50%; left:50%; transform:translate(50%,50%); if you want it centered within its container.
Here's a demo: https://jsfiddle.net/ilpo/9dnqd6bc/1/
You could even set min-width and min-height, if you wanted to have a minimum size for the background.
Try this, hope it'll work :)
container{
background-image: url("/assets/pic.jpg");
background-size: cover;
background-repeat: no-repeat;
max-height:250px;
}
I am trying to add a div to my html with a box image in it. But I couldnt make the image to stretch to the div's size
here is what I have so far,
<div style="background:url('images/box.png') no-repeat center center fixed;width:600px;height:400px">
test
</div>
this displays a div with width 600px and height 400px but it displays half of the image. but I need to make the image to stretch.
thanks
use background-size: cover; or background-size: contain (choose the right property for your needs)
From MDN
cover
This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
contain
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
If you want the image to stretch, losing it's original aspect ratio, add background-size: 100% 100%;.
On the other hand, if you want the image to take up the entire div while maintaining image aspect ratio and some clipping is okay, use background-size: cover