5

this is the problem: I would like to have a CSS code that allows me to resize automatically the background of my website, based solely on the resolution of the pc used.

This means, for example, that the image will not be resized if the user resizes the browser window (not like the .stretch value, to be clear).

abatishchev
  • 98,240
  • 88
  • 296
  • 433
Onsyzygy
  • 51
  • 1
  • 4
  • I don't think you can do it without javacript, but you can compute `window.screen.width` and `window.screen.height` – Vitim.us Jan 14 '14 at 14:56
  • You can't, even with javascript. We work in the realm of browser windows, not system specifications. – QuestionMarks Jan 14 '14 at 15:12
  • @JacquesGoulet um, yes you can? http://stackoverflow.com/questions/10022584/can-you-get-a-users-screen-size-resolution-using-javascript – brandonscript Jan 14 '14 at 19:27
  • @remus - no, he is talking about the actual monitor or device screen size, not the browser resolution. Completely different things, and you cannot obtain a users monitor size without accessing keys. This would obviously pose some vulnerability problems. – QuestionMarks Jan 16 '14 at 21:59
  • Well, I thought the same, but apparently you can use that to detect it. Obviously the browser can detect that otherwise `@media` queries wouldn't work, no? – brandonscript Jan 16 '14 at 22:02
  • No, media queries are based on browser resolution, not device screen size; unless you explicitly use device-width parameter... But that gets messy since you have to list explicit widths for each device. – QuestionMarks Jan 17 '14 at 05:33

2 Answers2

4

This will give you a responsive background with only CSS:

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;
}

This would be a responsive image with CSS only. If you want to change images per screen size, throw that declaration inside a media query.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    /* Styles */
}

For more info you can view this Q&A:

Responsive backgrounds with Twitter Bootstrap?

If you do NOT want a responsive image, just remove the CSS3 declarations from the html selector:

html { 
    background: url(images/bg.jpg) no-repeat center center fixed;
}
Community
  • 1
  • 1
robabby
  • 2,160
  • 6
  • 32
  • 47
0

This may be help full...

background-size:contain;background-origin:content-box;

This will help you keep the image as its original size in normal screen size and resize as per the div size changed. but we must keep the height as auto. Otherwise its height will be affect the background images size.

user3373888
  • 1