Brian Love
Angular + TypeScript Developer in Denver, CO

Bootstrap Cover Photo Sizing

Reading time ~3 minutes

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

Brian Love

Hi, I'm Brian. I am interested in TypeScript, Angular and Node.js. I'm married to my best friend Bonnie, I live in Denver and I ski (a lot).