Make a picture/background scale based on width of the browser

Question

I would like to know how I can scale a picture or a background based on the width of the browser. Basically, I want to make it as responsive as possible and making sure that it adapts well to all browsers including Safari.

Here's an example of what I'm talking about.

Link: http://responsive.gs/. Resize the width of the browser to see the background scale.

I want to make my picture/background scale exactly as shown in that link above.

Would appreciate some help on this.

Thank you.

You can just inspect the element and see exactly how they're doing it: background: url("../images/bg-phoenix.jpg") no-repeat; background-position: center top; -webkit-background-size: cover; background-size: cover; background-attachment: fixed; — Kai Qing, Jan 22 '14 at 02:15
Keep in mind that background-size: cover has poor legacy browser support. Best bet is to use a js solution if you want to support older browsers. — Joe Conlin, Jan 22 '14 at 02:20

score 4 · Accepted Answer · edited May 23 '17 at 10:24

4

Use background-size:cover, as they did:

body {
    background: url("http://responsive.gs/images/bg-phoenix.jpg") no-repeat;
    background-position: center top;
    background-size: cover;
}

EXAMPLE HERE

I'd also suggest taking a look at this recent SO answer of mine, which demonstrates how to get the height of the rendered background image, and scale the background accordingly:

Getting the height of a background image resized using "background-size: contain"

JS:

var img = new Image();
img.src = $('body').css('background-image').replace(/url\(|\)$/ig, "");

$(window).on("resize", function () {
    $('body').height($('body').width() * img.height / img.width);
}).resize();

edited May 23 '17 at 10:24

Community

1
1

answered Jan 22 '14 at 02:17

Josh Crozier

233,099
56
391
304

Thanks a lot for the detailed info. It will help me understand it better. – Jeiman Jan 22 '14 at 02:47
How do I apply this element to pictures or is there another way of doing so?? – Jeiman Jan 22 '14 at 02:57
1

@Jeiman What exactly do you mean? Are you referring to `img` elements? – Josh Crozier Jan 22 '14 at 02:58
Yes, inside divs and such. I have a couple of divs in which contains pictures in which i need to scale based on the width of the browser. – Jeiman Jan 22 '14 at 02:59
1

@Jeiman If you prepare a [jsFiddle example](http://jsfiddle.net), i'll take a look at it. Generally, for responsive `img` elements, you would use `width:100%; height:auto` to maintain the aspect ratio of the element. This of course depends on the parent element. – Josh Crozier Jan 22 '14 at 03:01
Here you go: [link](http://jsfiddle.net/2wGw4/). I tried your theory of having a `width:100%;` and `height:auto;` to maintain the aspect ratio, but it scales way too big on certain widths and it could be annoying to readers who read the website. Your thoughts on this? – Jeiman Jan 22 '14 at 03:11
1

@Jeiman Wouldn't that be the expected result? I'd suggest using media queries to change the layout per screen size. So for instance, on mobile devices with a limited width of under `480px`, you would use a one column layout as in that example. Anything greater than that would go to another layout which would then have a parent with a reduced width; maybe a 2 column layout for instance. – Josh Crozier Jan 22 '14 at 03:17
Ok, will try that out. Thanks again for the help. Really do appreciate it :) – Jeiman Jan 22 '14 at 03:21

score 3 · Answer 2 · answered Jan 22 '14 at 08:04

3

We can try background-size: 100% 100%; to fix it.

body {
    background: url("http://responsive.gs/images/bg-phoenix.jpg") no-repeat;
    background-position: center top;
    background-size: 100% 100%;
}

answered Jan 22 '14 at 08:04

KoemsieLy

722
8
11

score 1 · Answer 3 · answered Jan 22 '14 at 02:21

Using the code from the example you can use it in a page like so:

<head>
<style>
body
{
  background: url("http://www.responsive.gs/images/bg-phoenix.jpg") no-repeat;
  background-position: center top;
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
}
</style>
</head>

<body>
</body>

Make a picture/background scale based on width of the browser

3 Answers3