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;
}
Related
I'm dealing with a background image.
Is there a way I can maintain the aspect ratio of my image even after using background-size: cover;? My image fits perfectly to screen but at the same time - it's a little smushed. I've tried height: auto; or any other value for height but it looks like background-size: cover; doesn't allow height to be manipulated.
Is there a way to manipulate height? In other words, stretch the background image vertically without smushing the image?
As you can see by the snippet, background-size: cover already maintains aspect ratio.
.bg-me{
background-image: url('https://assets.atlasobscura.com/media/W1siZiIsInVwbG9hZHMvcGxhY2VfaW1hZ2VzLzA0MzRjZGI4MTJlNjdkMzBmNV93aW5kb3dzX3hwX2JsaXNzLXdpZGUuanBnIl0sWyJwIiwidGh1bWIiLCJ4MzkwPiJdLFsicCIsImNvbnZlcnQiLCItcXVhbGl0eSA4MSAtYXV0by1vcmllbnQiXV0/windows_xp_bliss-wide.jpg');
background-size: cover;
height: 200px;
width: 200px;
border: 10px solid red;
}
<div class="bg-me"> </div>
I tried these
*background-size: auto auto;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
height: 50vh;*
problem is it is displaying cropped image , I wanted the whole image to be displayed.
You can't show a full image exactly on all devices/viewports because their aspect ratios differ from that of your image.
background-size: cover will cover the viewport but maintain aspect ratio, so if your image is for example very wide compared to the viewport height some of the image will get cropped at the sides.
If it is important that you actually show the full image as stated in the question then use background-size: contain but this will show space at top or sides if the aspect ratios of the viewport and your image are not the same.
To actually show the full image AND cover the entire viewport you can set background-size: 100% 100%; but this is often not satisfactory because it will stretch your image in one dimension or the other to fit which will make it look rather odd in most cases.
Here try this
I used a image from Unsplash
use background-size: cover for full image and background-position: center
body {
background: url('https://images.unsplash.com/photo-1531315630201-bb15abeb1653?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
background-position: center;
}
Let me know if it doesn't work for you
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)