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
Related
So I want to do something like this, having an image as the fullbackground of a website.
However, I keep trying and trying with ridiculously huge images (The one on my JSFiddle is 6000 x 4000 I think) and they're all still small and get on low resolution when I scale them to fit the website.
Here is my JSFiddle showing my CSS code.
body {
background-image: url(https://snappygoat.com/b/d6249bb487c44ca8e93f4bc0faa46c8f1df7c690);
background-color: #464646;
background-repeat: no-repeat;
background-size: cover;
}
Any help appreciated.
The background cover approach is correct and the resolution of the image shouldn't matter if not for the quality of the image itself (you can have a 400px image fill a 3000px element).
The image will always adapt to fill its container and what I noticed in your fiddle is that the container of the image seems to be the problem, not the image itself.
here's your fiddle, edited with the background element height and width set.
{
height: 100vh;
width: 100vh;
/* Bonus: I think you want your background centered, as in the example that you provided */
background-position: center center;
}
https://jsfiddle.net/edLm73r2/
The image you are used on the example fiddle is very small(768 x 512)
https://snappygoat.com/b/d6249bb487c44ca8e93f4bc0faa46c8f1df7c690
Go for some large image if you want to make it as full screen background. May be use this one from unsplash https://unsplash.com/photos/It0DCaCBr40
body {
background: url(https://source.unsplash.com/user/nolanissac/It0DCaCBr40) #464646 no-repeat;
background-size: cover;
}
It looks like wherever the image is being hosted is not serving the full resolution of the image or quality.
I found the image you are using from a stock image site here and downloaded a re-uploaded so it stays it's full size.
body {
background-image: url(https://i.lensdump.com/i/itbHyH.jpg);
background-color: #464646;
background-repeat: no-repeat;
background-size: cover;
background-position-x: center;
background-position-y: center;
background-attachment: fixed;
}
all.
I am trying to set an image as the background inside a div container which will always have the dimensions of the screen of the device. For this purpose, I am providing the css as follows
.outer {
height: 100vh;
background-image: url(demo_top.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
<body>
<div class='outer'>
</div>
</body>
The positive of this code:
-Image quality is maintained.
The negatives of this code:
-Background image is not responsive as the focus is only on centre
-The top and the bottom part of the images are cropped because the position is used as the centre.
What I am looking for is my div to display the entire image without any cropping or image stretching or distortion.
The image size I am using is 2000x2000
If you want the image to have the same dimensions as your container, you have to use the same image proportions. In this case, the container must also be square (1x1). If the proportions of both elements are not equal, the only solution is to stretch one side of the image or to cut it.
https://developer.mozilla.org/es/docs/Web/CSS/object-fit
Instead of background-size: cover, you need to use contain. This will allow the image to be as large as possible without cropping outside the div and with no stretching/distoring.
-webkit-background-size:contain;
-moz-background-size:contain;
-o-background-size:contain;
background-size:contain;
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)
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;
}