Responsive css background images

Question

I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one thing that I can think of but it's quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.

Basically what I wanna achieve is that the image (with the watermark 'G') automatically resizes without displaying less of the image. If it's possible of course

link: g-floors.eu

Code I have so far (content part)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

Take a look at this link, might it be what you are looking for? http://css-tricks.com/perfect-full-page-background-image/ — Christofer Vilander, Sep 26 '12 at 20:07
I feel like this solution that Christofer Vilander posted is a better solution than the chosen answer. — CU3ED, Mar 21 '13 at 06:45
Just wondering why the site doesn't actually implement this resizing feature you were asking about, as of Feb 2015? Was there some issue with it? — LegendLength, Feb 20 '15 at 12:28

Andrei Volgin · Accepted Answer · 2018-11-22T14:43:12.077

423

If you want the same image to scale based on the size of the browser window:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Do not set width, height, or margins.

EDIT: The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.

edited Nov 22 '18 at 14:43

answered Sep 26 '12 at 19:51

Andrei Volgin

40,755
6
49
58

4

Is it also possible to auto resize the width and let the height be fixed? – jochemke Sep 27 '12 at 19:06
4

Yes, you can set the height of the image in pixels and the width in percents, but the image will be destorted. It won't look nice. – Andrei Volgin Sep 27 '12 at 22:05
Aah i see because the image i use is a brown background with a light grey 'G' as the watermark (quite large) so i want that to resize but thanks for the tip ;) – jochemke Sep 28 '12 at 07:32
2

You can use a much smaller image if you use a vector format: http://en.m.wikipedia.org/wiki/Scalable_Vector_Graphics – Andrei Volgin Sep 28 '12 at 08:30
Should this work with data URI as well ? When I replaced "background-image:url('../images/bg.png');" with a data uri, something like: "background-image:url("data:image/gif;base64,R0....no-repeat scroll center center / contain rgba(0, 0, 0, 0)");" it doesn't seem to work in Chrome. – edbras Nov 11 '13 at 10:36
16

What? Not setting width, height to the container won't show the image at all. – snow Nov 11 '16 at 11:54
@snow: No one is suggesting that a container should not have height. Width is optional as most block elements (e.g. `div`) default to 100%. – Andrei Volgin Nov 11 '16 at 14:44
@AndreiVolgin then what does `Do not set height` mean? – snow Nov 11 '16 at 14:48
3

(1) The original question was about scaling based on a browser window size. (2) Elements like `div` get their own height from their own content, or take available space in a flexbox model. Saying that without explicit width/height the container won't show at all is incorrect. Obviously, if you want to display an empty div with a background image, you will need to set the height and, possibly, width, but then you will see only a part of an image, unless the aspect ratio is exactly the same as of the image itself. – Andrei Volgin Nov 11 '16 at 15:11
Not setting width, height to the container won't show the image at all – Ishan Patel Apr 27 '18 at 00:29
@IshanPatel: There are many ways in which a container may get its size, and explicit height and width is only one of them. You may want to learn a bit more about layouts before downvoting a response that 300 other people upvoted :) – Andrei Volgin May 01 '18 at 00:05
A way to ensure the image displays as long as the parent div has width or height is to set the `width: inherit` and `height: inherit` – GONeale May 21 '18 at 01:03
I am going to cry. Thank you! Just do not forget to to set width and height – Erik Rybalkin Nov 22 '18 at 14:16
1

@ErikRybalkin: An element can get its width and height in other ways - for example, from its children or from its parent. Setting width and height explicitly is just one of possible options. – Andrei Volgin Nov 22 '18 at 14:41

Pnsadeghy · Answer 2 · 2013-11-16T20:37:05.573

81

by this code your background image go center and fix it size whatever your div size change , good for small , big , normal sizes , best for all , i use it for my projects where my background size or div size can change

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

edited Nov 16 '13 at 20:37

answered Nov 16 '13 at 20:12

Pnsadeghy

1,279
1
13
20

At screen size 800x1280px, the image gets cut off on the right side by the box. All the other sizes seem fine. – Mugé Oct 28 '16 at 16:54

score 68 · Answer 3 · answered Mar 17 '14 at 22:43

68

Try this :

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

answered Mar 17 '14 at 22:43

Ashok Dey

869
7
16

Timothy Miller · Answer 4 · 2015-08-30T18:42:03.207

36

CSS:

background-size: 100%;

That should do the trick! :)

edited Aug 30 '15 at 18:42

answered Sep 26 '12 at 19:49

Timothy Miller

2,391
1
27
34

32

This will totally distort the image based on the browser window aspect ratio. Never do it. – Andrei Volgin Sep 26 '12 at 19:51
8

Just for future reference, it actually won't look bad this way. background-size: 100% 100% would, but declaring only the x as 100% keeps it from looking terrible. Test case: http://codepen.io/howlermiller/pen/syduB – Timothy Miller Sep 28 '12 at 21:45
1

it won't look "distorted" but it will stretch the image beyond its intended proportions if it is smaller than the container... – Pure Function Nov 23 '13 at 09:43
1

So will the accepted answer. The OP didn't ask about that problem, just whether it was possible to make it resize nicely. – Timothy Miller Jul 02 '14 at 21:20
For top logo: backgorund-size:100%;background-position:top; padding-bottom:img-height/img-width x 100 = X%. – user956584 Jul 17 '14 at 12:39
The trick doesn't work entirely for resizing when you expect responsiveness from both width/height dimensions. – Masoud Dec 20 '22 at 23:34

score 23 · Answer 5 · answered Nov 25 '13 at 15:57

Here is sass mixin for responsive background image that I use. It works for any block element. Of course the same can work in plain CSS you will just have to calculate padding manually.

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


.my-element {
  background: url("images/my-image.png") no-repeat;

  // substitute for your image dimensions
  @include responsive-bg-image(204, 81);
}

Example http://jsfiddle.net/XbEdW/1/

the code in the fiddle (uses a framework) is different than the code in the answer. — snow, Nov 11 '16 at 12:29

Omar · Answer 6 · 2017-07-24T00:28:48.847

22

This is an easy one =)

body {
    background-image: url(http://domains.com/photo.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

Take a look at the jsFiddle demo

edited Jul 24 '17 at 00:28

answered Jan 28 '17 at 04:28

Omar

11,783
21
84
114

score 14 · Answer 7 · answered Apr 22 '15 at 05:20

14

Here is the best way i got.

#content   {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

Check on the w3schools

More Available options

background-size: auto|length|cover|contain|initial|inherit;

answered Apr 22 '15 at 05:20

Piyush

3,947
9
36
69

score 13 · Answer 8 · edited Apr 14 '18 at 22:12

13

#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}

edited Apr 14 '18 at 22:12

answered Nov 24 '16 at 06:05

amit bende

264
3
4

This works for me without `relative` Thank you man. – Saad Abbasi Mar 22 '21 at 04:43

score 10 · Answer 9 · edited Apr 14 '18 at 22:17

10

I used

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

which worked really well.

edited Apr 14 '18 at 22:17

answered Nov 16 '13 at 18:36

Holly

7,462
23
86
140

That is the code I needed! Thanks :)) I'm trying to do parallax on 100% of the screen but 200px height and I need only the top part of the background but keeping the proportions of the whole image. – thinklinux Aug 31 '18 at 13:31

score 6 · Answer 10 · edited Aug 27 '14 at 00:13

Responsive website by add padding into bottom image height/width x 100 = padding-bottom %:

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/

More complicated method:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

Try to resize background eq Firefox Ctrl + M to see magic nice script i think best one:

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

score 5 · Answer 11 · answered Apr 26 '13 at 15:07

You can use this. I have tested and its working 100% correct:

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

You can test your website with responsiveness at this Screen Size Simulator: http://www.infobyip.com/testwebsiteresolution.php

Clear Your cache each time you make changes and i would prefer to use Firefox to test it.

If you want to use an Image form other site/URL and not like: background-image:url('../images/bg.png'); //This structure is to use the image from your own hosted server. Then use like this: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Enjoy :)

score 5 · Answer 12 · answered Dec 03 '16 at 15:09

5

    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>

answered Dec 03 '16 at 15:09

Indranil

165
1
8

Surprised to see this was the only answer even mentioning @media queries - which was very surprising given the subject of responsive css. If your image is large (in file size) you can create different sizes of it and add different `background` properties for each increasing resolution. That way you're not downloading a huge image on a small phone. – Simon_Weaver Nov 10 '21 at 03:55

score 5 · Answer 13 · answered Feb 10 '17 at 13:51

If you want the entire image to show irrespective of the aspect ratio, then try this:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

This will show the entire image no matter what the screen size.

score 3 · Answer 14 · answered Sep 08 '14 at 14:24

3

background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

or

background-size:100%;

answered Sep 08 '14 at 14:24

bsngr

71
5

score 3 · Answer 15 · edited Sep 25 '17 at 11:02

3

Just two lines of code, it works.

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}

edited Sep 25 '17 at 11:02

Woody

373
2
9

answered Jan 23 '17 at 06:20

Rajkumar Bansal

323
2
10

score 3 · Answer 16 · answered Feb 21 '20 at 12:56

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

the position property can be used to align top bottom and center as per your need and background-size can be used for center crop(cover) or full image(contain or 100%)

score 2 · Answer 17 · answered Jun 15 '13 at 10:10

Adaptive for square ratio with jQuery

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }

score 0 · Answer 18 · answered Apr 25 '14 at 13:18

I think, the best way to do it is this:

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

In this way there's no need to do nothing more and it's quite simple.

At least, it works for me.

I hope it helps.

score 0 · Answer 19 · answered Nov 12 '19 at 01:39

Try using background-size but using TWO ARGUMENTS One for the width and the other one for the height

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;

Responsive css background images

19 Answers19

This is an easy one =)

Linked

Related