Develop Reference

How to make background-image responsive after resize windows with specific width?

I want to make background-image responsive after resize windows with specific width, like this main img http://preview.oklerthemes.com/porto/5.4.0/demo-construction.html.

This is what you can find in the construction site example using the developer tools:
You can set the background-size to cover.
.element {
background-image: url('*');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
Where * in the url() is the path to your image.
Or simply use the shorthand version:
.element {
background: url('*') no-repeat center center/cover;
}

How can I stop background from moving when zooming out?

When the browser is at 100% the back images are great. Even at 50% zoom out they're still okay. but as you continue to zoom out all the way to 25% the background image position collapses or "hides" and I'd like the images' background-position: center top to remain intact no matter minimize or maximize.
I've attached an example:
http://i65.tinypic.com/k1e54z.jpg
You can also visit www.medshopandbeyond.com and zoom out in your browser to see what's happening. [BTW: I am aware of the grammatical errors in the pics :) ]
The only one that gets close enough to what I want is background-size:contain
however the image is no longer full width from screen to screen if setting it to this
#header-image4 {
background-image:url("{{ 'old-friends-555527_19201.jpg' | asset_url }}");
height: 750px;
position: relative;
background-repeat: no-repeat;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: -50px;
background-size: cover;
width: 100%;
margin-top: -10px;
}
<div id="header-image4"></div>

This is because you are using background: cover and a fixed height. As you zoom out your height remains the same but the width increases and background: cover will expand to fill that width which is why you are getting an unusual crop. The same issue can be seen if you pull out the width of the browser window on a large monitor.
Personally, I'd create a different height for the div at different breakpoints e.g.
#media screen and (max-width: 1920px){
#header-image4{height: 1000px}
}
#media screen and (max-width: 2560px){
#header-image4{height: 1500px}
}

How to make fixed background to cover entire screen in mobile browsers?

I am using following CSS hack
html {
background: url(background.jpg) no-repeat center center fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But when using mobile browsers , the height is of website is not covering the entire screen display ! what to do ??

You need to make the page the full height/width of the screen.
html,
body {
width:100%;
height:100%;
}

In addition to specifying the height and width, note that "background-attachment: fixed" is not supported in some mobile browsers. See the full browser support list (click the "known issues" tab at the bottom).
One way to work around this on mobile (but continue using "fixed" for other browsers) is to revert to "background-attachment: scroll" for mobile widths using a media query. For example:
If your original CSS was
#some-div
{
background: url("background.jpg") no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then your media query might look like this:
#media (min-width : 320px) and (max-width : 767px)
{
#some-div {
background-attachment: scroll;
}
}
Of course, if you don't need "background-attachment: fixed" in the first place, then just removing "fixed" from your first line might help.

Background image in HTML

Please guide me how to set background image of the web page to full screen.
Also I'd like to this image to show fullscreen for all size monitors and mobile devices..
Right now I have an image with resolution 1920 : 1080 and it only looks good on my 19" monitor with resolution 1440 : 900, but not good on 15.4" laptops and mobile devices.
Please help,
Thanks.

The proper solution to keep the ratio to your image is to set background-size: cover.

If the background-size: cover; doesn't work for you, for example, if the aspect ratio of the image is wrong, then you can try using background-size: auto 100% to ensure that the picture keeps it's aspect ratio as well as being tall enough to fit the screen.
I think it all depends on the resolution of the image and the maximum size you're willing to have it. But you will need to put media queries into your code to ensure there are no gaps when the screen gets too big or too small.

Use background-size:cover; will help you.

Use background-size: cover; for newer browsers:
<div id="bg"></div>
html,body{
height: 100%;
}
#bg{
width: 100%;
height: 100%;
background: url(image-path.jpg) no-repeat;
background-size: cover; /* also include vendor prefixes: you may google */
}
check compatibility using background-size
Better solution for full background image with responsive can be found here

You can tackle this in two ways:
New browsers, Use the CSS:
background-size: cover
Old Browsers, use a fake <img /> for the background.
.bg {z-index: 1; position: absolute; width: 100%; height: 100%;}

The background image property for chrome, mozile and opera browsers
body {
background: url(images/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Size div to browser's window height and width

I'm making a site with big background design and I can't understand a couple of things.
Let me explain what I want to see. My web-site will be looking almost like this site
http://www.deepend.com.au/-/website-development-fox8
1. User loads the page
2. Height of every div in my page becomes the same as the height of the browser's window AND STAYS LIKE THIS, so your scrolling through my page becomes more logic.
So my question is: is there property in CSS that can get user's browser window? Or should I use JavaScript? If JavaScript, is there any jQuery plugin to simplify my job?
Thanks for your attention.

It's simply a huge image that is set as background of a div and sized as 'cover' in css which means its width determines its height based on its aspect ratio.
http://jsfiddle.net/f9yy8/4/
Demo: http://jsfiddle.net/f9yy8/4/embedded/result/
* { padding: 0; margin: 0; overflow:hidden;}
html, body { height: 100%;}
.txt {
background-image: url("http://elstika.com/images/2013/09/Pink-Tulips-Bouquet-Huge-Hd-Wallpaper.jpg");
background-repeat:no-repeat;
background-size: cover;
height: 100%;
color:white;
padding: 30px;
}

You can try to use position:absolute for the div's.
div{
position:absolute;
width:100%;
height:100%;
}

To cover 100% width/height of the user's browser window you can do this:
CSS
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
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;
}
div.scroll {
overflow: auto;
}
HTML
<html>
<body>
<div class="scroll">All your content inside here</div>
</body>
</html>

you can use simply this code:
div{
width:100vw;
height:100vh;
}
this code work like a charm... :)
jsFiddle