Develop Reference

Setting background size (of image) for a "scrolling" page

So i'm having the trouble that if I have a "long" webpage (where you make your window as big as you can but still need to scroll) the image doesn't "behave" correctly.
I thought that setting the background-size property to cover would do this but is the image isn't big enough (Which would have to be pretty big) I just get white space once I scroll down the page a little bit. Is there a property that would, say, set the height of the background to 100% then properly scale the image so it has the correct width proportional to the original height?
My solution as of now is having a background color that the image "eases" into, just to make it look smooth.

Try to use
html,body {
background: url(yourImg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Or if image isn't big enough, use a background color as well`
background: #6DB3F2 url('yourImg.jpg');

Try using background-size: 100% 100%; property.
But that will stretch your image.
If you want to add background to the full webpage then you can add background-image:(''); property to body.
e.g.
body{
background-image:url('http://backgrounds-free.com/highresolution/l_086.png');
background-repeat:none;
background-size: 100% 100%;
}

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.

jQuery update css values

i have got a little problem with css on my homepage:
if i visit my page from a android device, and i scroll down,
the background image gets a little bit bigger, and if i
scroll up, it resizes again to the correct size.
I think the problem is: i load the pages with jquery's load()
into a div. Then the page size changes, but css still uses the
old size (at dynamic values (100% and cover).)
css:
body {
background: #000000 url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
max-height: 100%;
max-width: 100%;
overflow-y: scroll;
}
If you don't know what i mean: https://www.youtube.com/watch?v=I_ukAfoiqBo look at the background image
What i tried: i have no idea why this is happening (only on android devices) so till now i tried nothing :/
Xorg

Use CSS (and maybe JavaScript) to make an element be square (or maintain a specific aspect ratio)

I have a div that I want to have the following characteristics:
Width = 50% of its parent element
Height equal to whatever it needs to be in order to maintain a certain aspect ratio.
I need to use percentages because the object will resize left-right when the browser is resized. I want the object to be resized top-bottom to ensure the object maintains the same aspect ratio.
I don't think there's any way to use pure CSS to do this, but does anyone know of a way? Alternatively, is there an easy JavaScript way to do this? (JQuery is fine.)

I figured out how to do this without js, though you need to use a transparent image.
Set up a html structure like:
<div class="rect_container"><img class="rect_image" src="rect_image.png"/>
<div class="rect">Your favorite content here</div>
</div>
Use a AxB transparent png for rect_image where AxB is the aspect ratio.
Meanwhile set up a stylesheet like:
.rect_container {width: 50%; position: relative;}
.rect_image {width: 100%; display: block;}
.rect {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}
The important thing here is taking advantage of the fact that images maintain their aspect ratio when resized in one direction. Meanwhile, we need a useable div, so we make the image display as block, wrap it in a div, and put an absolutely positioned div inside that. I distilled this code from something more complicated I actually tested. Works like a charm.

Here's a pure CSS version with no img tag:
<div class="apple_container"><div class="apple_icon"></div></div>
SCSS (include Compass to render the background-size):
.apple_container {
width: 50%;
}
.apple_icon {
padding-bottom: 100%;
background-image: url(/images/apple.png);
background-repeat: no-repeat;
#include background-size(contain);
background-position: center center;
}
CSS generated from the above:
.apple_container {
width: 50%;
}
.apple_icon {
padding-bottom: 100%;
background-image: url(/images/apple.png);
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-position: center center;
}
Results in a square element with a background image centered and fitted within it. This is good for responsive elements that you want to resize dependent on the user's device.

jQuery sounds pretty easy. Set the 50% width in the CSS, and then the following:
function onResize() {
var el = $('#element');
el.height(el.width());
}
$(window).resize(onResize);
$(document).ready(onResize);

Here you go: Detecting a browser resize using JQuery.