CODEWITHSUNDEEP
csswebresponsive-design
user3096803
user3096803

Reputation:

How do you support large screen resolutions with website background images?

I have a website that I developed, but I just got a screenshot from someone who was looking at it on a 2560 x 1600 monitor and it looks kind of ridiculous. What is a reasonable upper limit for screen resolutions to support? I'm concerned about negatively impacting load time by adding a huge image. How can I deal with this properly?

Upvotes: 2

Views: 143

Answers (2)

David Taiaroa
David Taiaroa

Reputation: 25495

To address your load time concern, one option is to use media queries so you can control the background image based on visitor viewport size. e.g.

@media (max-width: 800px) {
  .div-with-background{
        background-image: url("background-sm.jpg");
  }
}

@media (max-width: 1200px) {
   .div-with-background{
        background-image: url("background-md.jpg");
  }
}

@media (min-width: 1201px){
   .div-with-background{
        background-image: url("background-lg.jpg");
  }
}

What is a reasonable upper limit for screen resolutions to support?

It depends on your visitors. If you use Google Analytics, you can get details on this by going to Users > Technology > Browser & OS and under 'Secondary Dimension' search for 'Screen Resolution'

Hope this helps!

Upvotes: 1

Mr. Hugo
Mr. Hugo

Reputation: 12582

Solution 1: Maximum width

Use a container div with the following CSS:

#innerbody {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
}

Put all HTML in this container (wrap the container around all HTML), like this:

<body>
  <div id="innerbody">
  ... your page ...
  </div>
</body>

I would also add a nice subtle background color to the body, to mark where the 'page' ends, like this:

body {background: #eee;}
#innerbody {background: #fff;}

Solution 2: Mask the quality

If you are only worried about the (poor) image quality, you can add the container div (from solution 1) and use this CSS to overlay a hatch (diagonal lines). This is trick is often used for low quality full-screen video, but also works for background images.

#innerbody {
  width: 100%;
  background: url(/hatch.png);
}

Solution 3: Media queries

Got a big screen? Thou shall get a big image. Got a small screen? Thou shall get a small image. Sounds logical, right? You can achieve this by using media queries. This works like this:

@media screen and (max-width: 500px) {
  body {
    background: url(small_image.jpg);
  }
}
@media screen and (max-width: 1000px) and (min-width: 501px) {
  body {
    background: url(medium_image.jpg);
  }
}
@media screen and (max-width: 2000px) and (min-width: 1001px) {
  body {
    background: url(big_image.jpg);
  }
}
@media screen and (min-width: 2001px) {
  body {
    background: url(really_big_image.jpg);
  }
}

For each screen size ONE of these media queries will be true. That image wil be served.

Upvotes: 1

Related Questions