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)
Related
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
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
Im trying to design a home page for my website where im using a div to show an illustration.
i want to use an image with the div that covers the entire size of the div.
the image dimensions are 1920x850.
this is the code for the div
<div class="custom-col col-md-12 col-sm-12" id="widget-static-block-1"></div>
the css:
#widget-static-block-1 {
background: url({{ d_banner1.jpg' | asset_url }});
width:100%; }
i want to be able to view the image on different screen sizes , but the it always gets cut off (either height or width)
ive tried playing around with height and width attributes to no luck.
If i set height:850px; then obviously it shows perfectly on a 1080p sceen but gets cut off on a smaller screen.
One thing i want to be clear about is that i want the entire image to show at all times at all browser sizes, i dont want it to be cut off via height or width.
Try background-size: 100% 100% or background-size: 100vw 100vh. If you want to be certain your div suits every media you can use vw and vh units.
It seems like you're asking for the div to fill the parent (height or width). And if you don't want the background image to appear cropped, you need to maintain the aspect ratio.
This looks what you need: Maintain aspect ratio of div but fill screen width and height in CSS?
Working example
Add styles to div with background:
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
You can resize window to see result.
html, body {
position: relative;
height: 100%;
margin: 0;
}
div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url('http://ghk.h-cdn.co/assets/16/09/980x490/landscape-1457107485-gettyimages-512366437.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div>
</div>
My PNG picture size is 1000px by 1000px.
I use it as a background image in a DIV which has a height of 550px and a background-size: cover property.
My issue is that this background-size cover does not seem to be working. My picture is not scaled down to the size of the DIV. What is the issue?
Without seeing your actual code, answers can only be based on assumptions but I am assuming that my assumption must be correct in this case based on the screenshot provided.
From the screenshot, it seems like your element doesn't have a fixed width and is taking up 100% of the available width and also that the width is a lot higher compare to the height of the element.
(The above assumption has been confirmed by your live link.)
As per specs, the cover keyword has the following definition:
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.
The key parts that are relevant for this question have been emphasized. As you have indicated, in this case, the image's dimensions is 1000 x 1000 whereas the container's dimensions is [Y] x 550 where [Y] seems to be higher than 550. Now, let us assume that [Y] is 750. This would mean that the image will be scaled such that it has to fit the entire width (as it is larger). Since image has 1:1 aspect ratio, it would be scaled down to 750 x 750. Thus the image's height is greater than the container's height and so the bottom part of the image will get cropped.
You can see that in the below snippet also. The first image is the background with cover whereas the second is the actual sized image.
div {
height: 550px;
background-image: url(http://lorempixel.com/1000/1000/nature/1);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />
You can use background-size: 100% 100%, it will make the image fill the entire height and width of the container but it will not preserve/maintain the aspect ratio of the image.
Alternately, you could make use of background-size: contain, it would preserve the aspect ratio but it will leave white space on the left and right if the width is larger (or) on the top and bottom if the height is larger.
Demo with width being larger:
div {
height: 550px;
background-image: url(http://lorempixel.com/1000/1000/nature/1);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />
Demo with height being larger:
div {
height: 550px;
background-image: url(http://lorempixel.com/1000/1000/nature/1);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
max-width: 450px;
/* just for demo */
border: 1px solid;
}
<div></div>
<img src='http://lorempixel.com/1000/1000/nature/1' />
Use background-size 100% 100% instead, should solve the issue.
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;
}