This question already has answers here:
Background images: how to fill whole div if image is small and vice versa
(7 answers)
Closed 4 years ago.
I'm making a website where I need to have a notable difference between fill and center background images. My template is this:
Center: Uses native resolution to determine size.
Fill: Fits sides to fill screen without changing aspect ratio. Two sides exactly fit screen, while other two are cut off.
I managed to get centered with
.center {
background-repeat: no-repeat;
background-size: auto auto;
background-position: center center;
}
But I can't figure out how I would do fill. Any insight?
I believe you want background-size: cover. Other background-size options.
Related
This question already has answers here:
Fit website background image to screen size
(14 answers)
Closed 4 years ago.
CSS:
body{
background-image:url("img-address");
}
I want the image not to repeat itself multiple times, but to span the entire screen. I don't want to use a normal image I want to use background-image.
you can use background-size:
https://www.w3schools.com/cssref/css3_pr_background-size.asp
body {
background-size: 100% 100% ;
}
or
body {
background-size: cover;
}
Use background-repeat: none and background-size: cover
Try to use background-size: cover; as described in this article: https://css-tricks.com/perfect-full-page-background-image/
It will make the image stretch to fill the available space and scale accordingly to the size of its container.
Let me know how it goes :)
You can use the following to make it fit:
background-size:cover; Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
background-size:contain; Resize the background image to make sure the image is fully visible
So it does not repeat: background-repeat: no-repeat;
https://www.w3schools.com/cssref/css3_pr_background-size.asp
I am having an issue getting my background image in my header to look right.
Right now, it is set to:
.hero {
background: url(http://wordstream-prod.s3.amazonaws.com/landing_pages/assets/img/e682443e-b4c0-483f-823e-8170fd4b71b2) no-repeat center center;
background-size: cover;
background-position: center;
}
Ive tried many variations of css to get it to work but cant figure it out. I would like the section to show the full image and keep showing it (not cut it off) as the browser shrinks. As of now, it is cutting on the top and bottom of the image until I shrink down and then it shows the whole thing. When I shrink further, it cuts off the sides.
When I switched the bg size to contain, I was left with a bunch of space around the image on small devices. Any help is appreciated.
Link: http://solatube.solabrite.com/premier-dealer
To do that, the aspect ratio of .hero needs to match that of the image. You can do this by applying a padding to the element with the percentage amount that represents the image aspect ratio. You can get that percentage by dividing the image height by it's width (500/1280 = 39.0625%).
Add this CSS
.hero {
height: 0;
padding-top: 39.0625%;
}
If you usebackground-size: cover, then the image will be scaled until it covers the whole available space.
Maybe try it with background-size: contain, then the image will be scaled until it covers either the x or y dimension of the available space.
BUT: If your image has the same aspect ratio as the area it is trying to cover, neither of this should be a problem though.
I am trying to crop a set of images of slightly varying sizes to be squares of matching sizes and make them responsive. I found that it's possible to crop my images by putting them in div's and then making the image a background image, but when I try to use height: auto to get responsive images, the div collapses.
This is the closest thing I can find to my problem:
How to make centre cropped image responsive?
but this solution can only get a square crop if the image is in a portrait orientation to begin with. Additionally, I would have to hand-crop every image according to it's size.
I guess what I am looking for is a CSS hack that could crop all my images to be the same size square and then responsively scale them. Is this wishful thinking for CSS?
Did you try the background-size:cover? it adjust the background image to the size of the container..
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
I want to place an image as a background, I've also apply the
background-size:cover
for no-scroll. The problem is when i view the page at different resolutions the whole picture (full width) showed up instead of the center portion (blue bordered area), is there any possible way that I can set the image as background with no scrolling and image will remain center aligned.
this image may describe more specifically what I'm trying to ask. I just want to fix this image at any resolution but the blue bordered area must be remain center aligned,
You can combine background-position: center center with background-size: cover.
use:
overflow: hidden;
max-width: 1200px; // change the width
and add to the background :
no-repeat 50% 0;
I have been using css for a few years but have never ventured past using fixed width layouts. I'm looking at using a fluid layout for my next site, or as much percentage as I can, but I have a question that worries me.
If I have an image with 1900px width set as a background, I understand that it simply shrinks when the browser calls for say 1600px.
What happens when the resolution calls for a 2000px width? I will be left with white space, correct? How can one avoid this? I feel like I should probably just throw out that its not an image that can be repeated horizontally.
A trick usually used is to have the image be "inner-glowed" with a color, then set the background color the same as well.
Suppose your image doesn't tile, and has black "inner-glow" or "feather" effect, then you can make the container's background color as such:
background-color: #000;
background-image: url(your_bgimage.jpg); /* image with black borders due to effect */
background-repeat: no-repeat;
background-position: center center;