I'm trying to make my background image always 100% width, but it's not working. With my current code, I get the picture where I want it, but there's a bunch of unwanted dead space (all the yellow background below pic). Overflow options don't fix this.
If I leave out the fixed height/width, then the image takes on 0x0 size for some reason; if I use background-size: cover, the image becomes too large, and no longer sits well in my parent container
jsFiddle:
http://jsfiddle.net/CSS_Apprentice/z7bojmbn/1/
.mainpic {
background-image: url('http://www.placehold.it/1922x1080');
width: 1922px;
height: 1080px;
background-size: contain;
max-width: 100%;
max-height: 100%;
background-repeat: no-repeat;
}
You can simply do:
background-size: 100% 100%;
This will keep the background image stretched 100% to the size of the container it currently is in. So, if it is in the body, it will fill the whole background of the page.
You might be interested in the cover declaration.
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Related
I had to set 4 pages with 100% width and height background depending of the screen size.
The imgs have got the same width and height and these are my settings,
.fullImg{
width: 100%;
height: auto;
max-height: 100vh;
max-width: 100vw;
}
this is working perfectly for few pictures but not with others, how is that possible if the pictures got the same dimensions?
I tried to do background-size: cover which is working for a while but then it will cut off the img so the best way so far is that one i wrote above.
I am talking about big screen sizes from 1440px to 2560px.
Thanks a lot
You can have a look at the headers here: http://provaresponsive.herokuapp.com/pr.html
As mentioned in the comments if you want an image to always use all available height and width, then you have to decide: Do you want the image to retain it's aspect ratio - then it has to be cropped, or do you want the image to change aspect ratio, in which case it will stretch.
Here is an example for each option:
No Stretching - Will Crop
html {
background: url(http://www.olejarz.com/arted/perspective/images/intro.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
jsfiddle
Stretching - No Cropping
div {
background-image:url(http://www.olejarz.com/arted/perspective/images/intro.gif);
/*
* Width & Height can be percetages only when the parent
* element has explicitly declared dimensions.
*/
height:200px;
width:500px;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
}
jsfiddle
And there is a third option, you probably won't like, which is to contain the image, so:
No Stretching, No Cropping - not filling the x/y
html {
background: url(http://www.olejarz.com/arted/perspective/images/intro.gif) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
jsfiddle
use backstretch js .it can fix your issue.if you call your background image using backstretch js then it will automatically adjust your image according to your screen ,whatever your image resolution is
My background image is scaling down as the window width decreases. I want the image to be full image regardless of the display. How would I implement that? The following code scales the image, then starts only show a section.
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #fff;
background-image: url(../img/header.jpg);
background-position: center !important;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
If I'm reading your question right, simply set your header width to the width of the image.
If you are trying to full width background image for your header(Hero Header).
Try these code examples.
Demo Link
Here's the original image (2880 x 900):
And here's how it appears on the rendered page (1280 x 500):
1280 x 500 is the dimension of the <div> that contains the image as its background. If you notice, the rendered background is getting cropped instead of shrinking to fit inside the div which is smaller than the original image. My understanding is that a background-size: cover is meant to scale the image up or down without cropping. Why is it not working?
HTML
<div class="page-header-div">
<div class="page-header-div-image-blog" style="background: url(<?php echo $bannerurl ?>) no-repeat;"></div>
<div class="downarrow text-center downarrow1" onclick="scrollPage(this);"><i class="fa fa-chevron-down"></i></div>
</div>
CSS
.page-header-div { position: relative; }
.page-header-div-image-blog {
background-size: cover;
height: 100%;
}
The exact same markup on another page works just fine! The two pages have the exact same tags used for the snippet. Is there no way to fix this issue through CSS? If so, how can one go about doing it using JS (I would really want to avoid that if at all possible).
You have to use background-size: contain; instead and also set background-repeat to no-repeat.
From MDN background-size docs:
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.
contain: A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.
Also note that, as #zgood pointed:
2880 x 900 is a different aspect ratio than your div at 1280 x 500, so event when you use contain you will have a gap
div {
width: 1280px;
height: 500px;
background-image: url(http://i.stack.imgur.com/rf8Wg.jpg);
background-size: contain;
background-repeat: no-repeat;
}
<div></div>
See also:
Scaling background images (MDN)
I was having this same problem. It turns out that I had my background-size declared before my background. See example:
DID NOT WORK:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: url(../img/background.jpg) center center no-repeat;
WORKS:
background: url(../img/background.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
div {
width: 1280px;
height: 500px;
background-image: url(http://i.stack.imgur.com/rf8Wg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div></div>
I need help to make my background fit properly.
I want the whole image to show and be stretched if i use full-screen window.
The image is smaller than my monitor, so when I try to stretch it, it only zooms-in.
I'll show you the image.
Image can be seen here:
http://i.imgur.com/DDsTag7.jpg
My code so far (CSS):
body {
background-image:url(Ranger_with_Tusks_of_Killed_Elephant.jpg);
background-size:100%;
background-repeat:no-repeat;
height: 100%;
width: 100%;
}
It completely ruins the background image on my size of screen: 1920x1080
How can I make it show the WHOLE image no matter what size?
Only using CSS preferably.
My code works great AS LONG AS the window size doesn't exceed the width/height of the image. Try my code and see for yourself, it doesn't show the full image. It's like it zooms-in.
just use code below
html{
background: url(Ranger_with_Tusks_of_Killed_Elephant.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
}
I think what you are looking for for is background-size: cover;
I have an 4:3 aspect ratio image to put as a background-image.
My first aim is to have a full height image, resizing accordingly to the height, with variable width (depending on the height). The image should be centered.
For example, if I have a 16:9 viewport it should display the background-image centered with left and right blank spaces.
I tried different method (using as example 4:3 image with 16:9 viewport).
First of all, background-size both with contain and with cover applied to the <body> tag:
with cover it respects the aspect ratio but crop the image at the top and at the bottom
with contain it doesn't cover the whole viewport, but actually only the body
Also using background-size: auto 100%; produce the same effect as contain
This is the CSS code I used:
body#home {
background-image: url(../bg.jpg);
background-size: auto 100%;
-moz-background-size: auto 100%;
-webkit-background-size: auto 100%;
-o-background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
Thanks to #Pete, with this code it actually works:
html, body {
min-height: 100%;
}
body#home {
background-image: url(../ppersia-home.jpg);
background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
-o-background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
Now I've just to add some other background pattern to avoid monochrome color in the left and right blank spaces
Update your css:
background-position: center center; /* needs horizontal and vertical positions */
background-size: contain; /* use contain so your image fits inside */