Geek asks and answers

Large background images and screen sizes

I am creating a website that will use an image that I cannot use. I need this image to cover the entire background screen. However, I want this to work on large monitors as well as small monitors.

Should I make one large background image and scale it with background-sizeor do I need to create several versions of the same image of different sizes and then use CSS3 Media Queries to choose which image should be displayed? If so, which break points in screen size should I use?

+5
source share
3 answers

I ended up choosing five breakpoints based on information from StatCounter:

Stat Counter Statistic

2012 .

, , :

/*Monitors Large than 1920px, image has "soft" edges to blend into background */
@media (min-width:1921px){
    html, body{
background: url(/images/backgrounds/1920-bg-large.jpg) no-repeat center top fixed #190303;
background-size:100% auto;
    }
}

/* Mointores ranging from 1367px - 1920px */
@media (min-width:1367px) and (max-width:1920px){
html, body{
background: url(/images/backgrounds/1920-bg.jpg) no-repeat center top fixed #190303;
background-size:100% auto;
    }
}

/* Mointores ranging from 769px - 1366px */
@media (min-width:769px) and (max-width:1366px){
html, body{
background: url(/images/backgrounds/1366-bg.jpg)  no-repeat center top fixed #190303;
background-size:100% auto;
    }
}
/* Tablets like the iPad 2 and iPad Mini */
@media (max-width:768px){
html, body{
background: url(/images/backgrounds/768-bg.jpg)  no-repeat center top fixed #190303;
background-size:100% auto;
    }
}

/* At a certain point the Background images become irrelevant as they are hidden behind other elements. Changed to a solid BG */
@media handheld, only screen and (max-width: 640px) {
html, body{
background:#190303;
    }
}
+4

background-size , contain cover. ( ), .

: vs

IE8 ( ).

+6
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:100% 100%;
}

This should stretch it in every browser on every screen.

I would just use a big one at all.

0
source

More articles:


All Articles