Bootstrap Cover Photo Sizing

In this post I will show how to create appropriately sized cover photos when using Bootstrap 3.

I did some research online and did not find a simple listing that recommended the appropriate sizing of photographs that are used as a full-screen background (or cover) photo. I am using Bootstrap 3, so I wanted my image sizing to correlate to the grid breakpoints for Bootstrap 3.

Cover Photo Sizes

If you are using Bootstrap then you know that there are 4 main breakpoints:

• lg - devices with a screen width of 1200 pixels or greater.
• md - devices with a screen width of 992 pixels or greater.
• sm - devices with a screen width of 768 pixels or greater.
• xs - devices with a screen width less than 768 pixels.

Here are the cover photo sizes that I have settled on:

• _lg@2x: 2880 x 1620
• _lg: 1440 x 810
• _md@2x: 2400 x 1350
• _md: 1200 x 675
• _sm@2x: 1984 x 1116
• _sm: 992 x 558
• _xs@2x: 2160 x 3840
• _xs: 1080 x 1920

Some notes:

• I have @2x image for high density displays (like Apple’s Retina displays).
• The sizing of the xs cover photos is based on the pixel dimensions for the iPhone 6 plus.

LESS Media Queries

Using LESS with Bootstrap makes it easy to define your cover images using the appropriately sized image for each device target (xs/sm/md/lg) along with Retina graphics support using the img-retina() mixin provided by Bootstrap

header {
  position: relative;
  width: 100%;
  height: auto !important;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    .background-size(cover);
  }

  &.cover {
    min-height: 100%;
  }

  &.amazing-background-image:before {
    .img-retina(
      '/images/bg/amazing-background-image\_xs.jpg',
      '/images/bg/amazing-background-image\_xs@2x.jpg',
      1080,
      1920
    );
  }

  @media (min-width: @screen-sm-min) {
    &.amazing-background-image:before {
      .img-retina(
        '/images/bg/amazing-background-image\_sm.jpg',
        '/images/bg/amazing-background-image\_sm@2x.jpg',
        992,
        558
      );
    }
  }

  @media (min-width: @screen-md-min) {
    &.amazing-background-image:before {
      .img-retina(
        '/images/bg/amazing-background-image\_md.jpg',
        '/images/bg/amazing-background-image\_md@2x.jpg',
        1200,
        675
      );
    }
  }

  @media (min-width: @screen-lg-min) {
    &.amazing-background-image:before {
      .img-retina(
        '/images/bg/amazing-background-image\_lg.jpg',
        '/images/bg/amazing-background-image\_lg@2x.jpg',
        1440,
        810
      );
    }
  }
}

CSS3 Media Queries

If you want the above LESS code in vanilla CSS3 I have compiled it for you as an example.

header {
  position: relative;
  width: 100%;
  height: auto !important;
}
header:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}
header.cover {
  min-height: 100%;
}
header.amazing-background-image:before {
  background-image: url('/images/bg/amazing-background-image\_xs.jpg');
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
  header.amazing-background-image:before {
    background-image: url('/images/bg/amazing-background-image\_xs@2x.jpg');
    background-size: 1080 1920;
  }
}
@media (min-width: 768px) {
  header.amazing-background-image:before {
    background-image: url('/images/bg/amazing-background-image\_sm.jpg');
  }
}
@media (min-width: 768px) and only screen and (-webkit-min-device-pixel-ratio: 2),
  (min-width: 768px) and only screen and (min--moz-device-pixel-ratio: 2),
  (min-width: 768px) and only screen and (-o-min-device-pixel-ratio: 2/1),
  (min-width: 768px) and only screen and (min-device-pixel-ratio: 2),
  (min-width: 768px) and only screen and (min-resolution: 192dpi),
  (min-width: 768px) and only screen and (min-resolution: 2dppx) {
  header.amazing-background-image:before {
    background-image: url('/images/bg/amazing-background-image\_sm@2x.jpg');
    background-size: 992 558;
  }
}
@media (min-width: 992px) {
  header.amazing-background-image:before {
    background-image: url('/images/bg/amazing-background-image\_md.jpg');
  }
}
@media (min-width: 992px) and only screen and (-webkit-min-device-pixel-ratio: 2),
  (min-width: 992px) and only screen and (min--moz-device-pixel-ratio: 2),
  (min-width: 992px) and only screen and (-o-min-device-pixel-ratio: 2/1),
  (min-width: 992px) and only screen and (min-device-pixel-ratio: 2),
  (min-width: 992px) and only screen and (min-resolution: 192dpi),
  (min-width: 992px) and only screen and (min-resolution: 2dppx) {
  header.amazing-background-image:before {
    background-image: url('/images/bg/amazing-background-image\_md@2x.jpg');
    background-size: 1200 675;
  }
}
@media (min-width: 1200px) {
  header.amazing-background-image:before {
    background-image: url('/images/bg/amazing-background-image\_lg.jpg');
  }
}
@media (min-width: 1200px) and only screen and (-webkit-min-device-pixel-ratio: 2),
  (min-width: 1200px) and only screen and (min--moz-device-pixel-ratio: 2),
  (min-width: 1200px) and only screen and (-o-min-device-pixel-ratio: 2/1),
  (min-width: 1200px) and only screen and (min-device-pixel-ratio: 2),
  (min-width: 1200px) and only screen and (min-resolution: 192dpi),
  (min-width: 1200px) and only screen and (min-resolution: 2dppx) {
  header.amazing-background-image:before {
    background-image: url('/images/bg/amazing-background-image\_lg@2x.jpg');
    background-size: 1440 810;
  }
}