CODEWITHSUNDEEP
cssimagebackgroundresizeresolution
Onsyzygy
Onsyzygy

Reputation: 51

Automatic background image resizing based on resolution

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).

Upvotes: 5

Views: 8579

Answers (2)

user3373888
user3373888

Reputation: 1

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.

Upvotes: 0

robabby
robabby

Reputation: 2200

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

Upvotes: 4

Related Questions