Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
  • 💬 Discuss
From the author of Tip 3: Use a Very Wide Header Image to Suit Multiple Screen Widths

Tip 3: Use a Very Wide Header Image to Suit Multiple Screen Widths

For wider viewport sizes, it often makes sense to serve a much wider image than you think you'll need, in order to cater to extra-wide screen monitors. Going back to our masthead example, we could add another couple of media queries:

header {
  background: url(small-masthead-image.png);
}

@media all and (min-width: 480px) {
  header {
    background: url(large-980px-masthead-image.png);
  }
}

@media all and (min-width: 980px) {
  header {
    background: url(very-large-1300px-masthead-image.png);
  }
}

@media all and (min-width: 1300px) {
  body {
    width: 1300px;
    margin: 0 auto;
  }
}

After the narrow screen layout, we're serving an image 980 pixels wide for viewport widths up to 980 pixels, and then a very wide, 1,300-pixel image for viewport widths from 980 to 1,300 pixels. Then, when the viewport width goes wider than 1,300 pixels, at which point the masthead effect would start to break down, we set a fixed width of 1,300 pixels for the content, and then just center that content in the middle of the available space using the classic old margin: 0 auto trick. This technique should handle most viewport sizes. You're unlikely to have to deal with viewport widths much greater than about 1,980 pixels (at the moment, anyway).

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus