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;
Related
I'm trying to get a background image to position correctly on a mobile view. When I look at the website with inspect (or re-sizing the monitor to be a mobile view), the image shows fine. However, when I view it through a phone, the image, for some reason, seems to be re-sizing to fit the phone width instead.
#hero{
height: 100vh;
max-width: 100%;
background-image: url('http://i.imgur.com/molLHMj.jpg');
background-size: cover;
background-repeat: no-repeat;
}
<body>
<div id='hero'>
</div>
</body>
If I remember correctly, setting background size as cover would make it so that if the image is bigger than the screen width, it'll simply be hidden, but this seems to be resizing for some reason.
Edit:
Setting background-size to auto displays the image like how it looks like in chrome's inspector. This shouldn't be the case, as the wider version displays the full width/height (given that it's auto). I'm really lost on what is going on.
Edit2
Looks like only the chrome mobile version displays it that way. The default browser renders the background just like how it looks like in the desktop inspector. Really weird.
The image is resizing because you are telling it to with height: 100vh;. Additionally, the image is getting skewed because you are placing a restriction on the width with: max-width: 100%;.
Setting just max-width: 100%; (and removing the height:100vh) or removing both lines and just sticking with background-size:cover could clear this up.
But, if you want the background to cover the entire viewing area, don't place the background on the div. In fact, get rid of the div and just apply the background to the body.
Also, background-size:cover does not cause the image to hide, it causes the image to resize to cover the background available. This results in cropping when the background size is smaller than the image.
From MDN:
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.
You can achieve your goal like this:
.hero {
height:100vh;
width:100%;
}
.hero:nth-child(1) {
background-image:url('http://placehold.it/1920x1080');
background-size:cover;
}
.hero:nth-child(2) {
background-image:url('http://i.imgur.com/molLHMj.jpg');
background-size:cover;
}
<div class="hero"></div>
<div class="hero"></div>
The problem seemed to be the size of the image. It was around 3000 in width. When I resized it to around ~1900, the behavior returned to normal.
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
I want to place a full width image (somethink like a header or slider) but I want to show only the center of the image, UNLESS the viewport would be so big than the image had to be enlarged.
Some detailed examples:
My image is 2000x200px
In a screen of 1600px width I want to show the central 1600px of my image, no resize.
In a screen of 450px I want to show the central 1600px of my image, but shrink (resized-down)
In a screen of 1900px I want to show the central 1900px of my image, no resize.
In a screen of 2500px I want to show the full width 2000px of my image, of course, enlarged.
What I have so far:
Make a responsive image is quite easy
#header-img {
width: 100%;
height: auto;
}
But it always shows the full image. There are a left and a right chunk I don't want to show unless the resolution of the client screen would be really big.
On the other hand, get the "overflow" behaviour could be done setting the image as background of a div, and setting his background-size property to cover, but it's not responsive.
<div style="background-image: url(header.jpg); background-size: cover; background-position: center; height: 200px" />
I need the two behaviours. Perhaps I need media-queries, but I'm trying to avoid it. I don't want any javascript code neither, only CSS.
I have seen this behaviour in some pages, but I can't find any at the moment.
EDIT: A picture speaks a thousand words
http://tomascrespo.sofiytommy.com/wp-content/uploads/2015/08/pregunta.jpg
Observe that numbers 7 and 8 are only showed in ultra wide screen
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;
}