Using background-size: cover I am able to make the background stretch to fit the full width of the page.
Using repeat-y I am able to make the background repeat or tile vertically, to the full height of the page.
Is there any way to combine these two effects? Unfortunately they don't seem to work together (at least in Chrome). It appears that I can either stretch in both directions with background-size: cover, or not stretch in the x direction but repeat in the y direction.
Edit: Using background-size: 100% Npx (where N is the height of the image) I can accomplish the above, but it skews the background image as it's only stretched in one direction. Is there a way to keep it scaling proportionally?
Instead of cover, use background-size: 100% auto; to size the background image to full browser width while maintaining aspect ratio for its height. Use this in conjunction with background-repeat: repeat-y; to tile it vertically.
Related
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'm having a container with height: 100vh; . This contaier has a background image. I want the background to be responsive and fit the entire div. Using background-size: cover doesn't make it look good. How can I achieve this? Thanks
it depends on what you are looking for, there are many options:
background-size:contain it will stretch to max width and height to
fit the container, rest of the space will be background-repeated if
you dont set background-repeat:no-repeat
background-size:100% 100%; will stretch your background to 100% of width and height of container but this will change your image proportions-image will be deformed
cover will stretch image so whole area is covered with image, but
rest of the image will be croped (as you already discovered)
you can also use css (percentual padding top/bottom) to have responsive container with given proportion and so have both, full image cover and no-croped sides
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;
When i set the background-size property from an image of a div to background-size: cover; or background-size: 100%;, the both look the same.
What is the difference?
When should i use cover and when 100%?
cover = Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
Basically it zooms in until the inner most edges are touching the side, which means that some of the image may be cut off unlike 100% where all of the image will be visible.
If it did not do the zoom in, you would end up with two sides that reach the edge but on the other axis you would have blank horizontal (or vertical) looking 'bars' on either side of the image in one of those directions.
Your Question: Why would they looks the same ?
Answer: If the image / container are square
See http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover for example
here's a fiddle: http://jsfiddle.net/RS5kX/19/
background-size:100%; = background-size:100% auto; = the width is set to be 100% large and the height of the background image follows respecting the image aspect ratio.
background-size:cover; means the background image will always fit the whole div , you won't be left with any empty spots in your div
background-size:100% 100%
won't leave any empty space too, but of course this will detroy the original image aspect ratio
Pretty sure background-size: cover; means the image will fill the element while maintaining its aspect ratio, while background-size: 100%; will just make the image fill 100% width of the element.
I am trying to add a div to my html with a box image in it. But I couldnt make the image to stretch to the div's size
here is what I have so far,
<div style="background:url('images/box.png') no-repeat center center fixed;width:600px;height:400px">
test
</div>
this displays a div with width 600px and height 400px but it displays half of the image. but I need to make the image to stretch.
thanks
use background-size: cover; or background-size: contain (choose the right property for your needs)
From MDN
cover
This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
contain
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
If you want the image to stretch, losing it's original aspect ratio, add background-size: 100% 100%;.
On the other hand, if you want the image to take up the entire div while maintaining image aspect ratio and some clipping is okay, use background-size: cover