I want to achieve a background-image effect, similar to on http://yipit.com/.
Here is what I currently have:
<div id="landing-header">
<img class="landing-background" src="{{ STATIC_URL }}images/new/landing-background.jpg"/>
</div>
#landing-header {
height: 489px;
}
.landing-background {
height: auto;
min-width: 1460px;
width: 100%;
position: fixed;
left: 0;
}
What I want to accomplish is that the horizontal width is always as wide as the browser and the image scales accordingly. For example, if it is a 500x200 image and the browser is 1000px wide, the image would scale to 1000x400. This is working.
However, I only want the container to be 400 px high. In other words, I want to cut off the image at 400px. For example, the image in a 2000px browser width would be 2000x800, but only the top 400px would show. How would I accomplisht this?
Note that I only want the image to resize when the width of the browser is larger than the width of the image, I don't want the image to resize every single time the browser is changed.
hi you can achieve your desired results through CSS3 Property background-size:cover;
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
see the demo :- http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
UPDATED
see the updated demo its a very small image rather than the width of browser so its covering the whole background :- http://tinkerbin.com/CraP8wBh
Related
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
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
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>
Is it possible to set a minimum background size in a container which is set to percentage (100%), the background is set to cover the whole container (div).
When you re-size the browser window the container (div) re-sizes because it is set to 100%, and same with the background image also re-sizes.
Here is i want to try is is possible to set a minimum background size because when you resize the browser window to smaller the background cannot be seen.
Here is my sample code:
HTML
<div class="fullwidth_wrapper fullbg">
<div class="content">
<h3>How to set minimum background size</h3>
</div>
</div>
my css
.fullwidth_wrapper {
width: 100%;
height: 720px;
}
.fullwidth_wrapper.fullbg {
background: url('http://dummyimage.com/1080x620/d1d1d1/0064c2.png') no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
display: block;
background-size: 100%;
/* can we use something like min-width or like min-background-size??? */
}
check my JSFIDDLE here http://jsfiddle.net/gqm2rbgn/7/
use background-size:50% 50% or something like that instead of cover - this will size your background to be smaller
If you don't want it to be seen on smaller devices then add a media query that says background:#fff repeat or something along those lines like this:
#media screen and (max width:480px){background:#fff repeat;}
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;