The CSS3 rule 'background-size: cover;' starts at the top left of a div and stretches the background image in aspect ratio so that it dynamically covers the width of the div.
For a particular image I have, it would look a lot better at higher width screens if 'background-size: cover;' started the image from the bottom left of the div (div has fixed height) and covered up and to the right. This way the sky of the image would not be the only thing visible on wide monitors.
After some trial and research I have come up empty. Is this possible?
Thank you
Yes, by using the position bottom left, well described at MDN
div {
height: 300px;
background: url('http://lorempixel.com/500/500/nature/4') no-repeat bottom left;
background-size: cover;
}
<div></div>
Looks like this with the default top left
div {
height: 300px;
background: url('http://lorempixel.com/500/500/nature/4') no-repeat top left;
background-size: cover;
}
<div></div>
Related
I am trying to have a background image cover the vertical length of the page. When I add background-repeat: repeat-y; the image stretches. When I have background-repeat:no-repeat; it doesn't stretch. What is happening here? I don't want it to stretch, I just want it to repeat until the bottom of the page.
Here is the CSS:
.backgroundTest{
background-color:white;
background-image:url(../images/sideBanner.jpg);
position:absolute;
background-size:175px 100%; /* I need this, otherwise the background image is too big */
background-repeat: repeat-y;
}
The main issue is I want an image along the left side of the page (width 175 px) with all the content to the right of this image. I'll take any solution!
Use table where you can add contents in one column and image in another column.You can set width of image accordingly
try this,
background-size: 100% auto;
I'd wrap the image in a <div> and use the background-size CSS property with one of these two values:
contain
Scales the image as large as possible without cropping or stretching the image.
cover
Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
e.g.
.wrapper-container {
position: relative;
height: 100%;
width: 175px;
}
.backgroundTest {
background-image: url("../images/sideBanner.jpg");
background-repeat: repeat-y;
background-size: contain;
background-color: white;
position: absolute;
}
This seems to be a common question but the existing answers I see do not seem to work for me. I have a background image that is much taller than it is wide. I would like the height to be 100% of the height of body. So far I have tried:
body, html {
height: 100%;
min-height: 100%;
}
body {
background:url("NewLogo.png") no-repeat center center;
background-size: 100% auto;
}
I have also tried changing background-size: cover; but this also just makes the image large but cuts off the top and bottom.
Use contain. This will guarantee that the entire image appears in the container, and nothing is cut off:
body {
background:url("NewLogo.png") no-repeat center center;
background-size: contain;
}
Please note that if you want to have a background image which is cover and has got it's own height (without just being large, as wide as your browser but loosing the top & bottom as you said), you can try giving an appropriate height in vh to your background image.
body {
margin: 0;
}
#image {
background-image: url(https://images.unsplash.com/photo-1504387103978-e4ee71416c38?auto=format&fit=crop&w=2134&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
background-repeat: no-repeat;
height: 293vh;
background-size: cover;
}
<div id="image">
</div>
Otherwise if you just want to make your background image cover, or if you want make it contain(though your image wouldn't fit the browser wide, it would be in it's real height), you can visit the following link:
codepen>background-size>CSS-Tricks
Currently, if my browser is half the monitor's size it will shrink the background to fit the width, cutting off the height and the bottom. I'd like it to instead, keep the height, filling the whole page, and keeping the aspect ratio but just centering the photo and cutting off the sides of the photo, my current CSS is just
body{
background-image: url("/background1.jpg");
background-size: 100%;
background-repeat:no-repeat;
display: compact;
}
Any help on how to do this would be great, thank you
Adding background-size: cover should do the clipping and keeping aspect ratio.
Adding background-position: center; will keep the image in the centre.
(replace rule for div and place it to your body - I used div here for the sample code only)
See running sample below
div {
background-image: url("http://placehold.it/1000/1000");
/* Resizes image to fill div; retains aspect ratio. */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 2000px;
}
<div>
Lorem Ipsum
</div>
background-size: cover;
Should do what you need. Handles cropping / scaling pretty elegantly.
use background-size: auto 100%; in that rule:
body {
background: url("/background1.jpg") center center no-repeat;
background-size: auto 100%;
}
The first parameter (in background-size) is the width, the second the height of the image. If there is only one parameter (as in your rule), the browser will assume it's the width and set the height to auto. My version should give you the full height and adjust the width automatically (and center the image)
So I have an image which is 700px width which is what I'm using as a background image in a div which is 200px width.
I want to keep the image at that size so it can maintain a good resolution for smaller devices.
However the issue I'm having is because the image is larger than the div the image overflows (hidden) but I want the image to resize and fit depending on the size of the div, instead of overflowing.
My div is currently:
.featurebox{
background: #F9C112 url(../img/pan1.jpg) no-repeat center top ;
width:200px
}
Define both width and height and then use background-size: cover
Try adding this:
background-size: 100% 100%;
if you use
background-size: 100%;
the height is set to auto, and can then still overlap.
can you try this?
background-size:100%;
You can set background-size:
.featurebox {
background: #F9C112 url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center top;
background-size: 200px 200px;
width: 200px;
height: 200px;
}
<div class="featurebox">
</div>
I would like to know how I can fill a divs background with an image. No matter what the aspect ratio of the image (landscape or portrait). I tried to use several methods. Over background-size: cover; to background-size: 100% 100%; it doesn't always fill the div. The div has a landscape width/height ratio, the images do have a random ratio. If I try background-size: cover; the landscapes will fill the whole background, but the portrait ones will not (they have gaps on the left and right side).
Edit:
div {
background: url(img.png) no-repeat center center;
background-size: cover;
height: 100%;
width: 100%;
}
background-size:cover; should work for your needs. Basically, the cover value will cause the background image to completely fill the div, regardless of the orientation or size of the div, while maintaining the aspect ratio of the image. The one caveat to this solution is that the image will be cropped, since it has to stretch to fill the div.
More info on the background-size property
You could try this
div {
background: url(img.png) no-repeat center center;
background-size: contain; /*i think its better to use contain if you;re using a large png*/
height: 100vh!important;
width: 100hw!important;
overflow:visible;
}