Background Images

← Back to Index

Background Images

Using HTML:

<body style="background-image:
  url('path/to/background-image.png');
  background-size: $value;
  background-position: $value;
  background-repeat: $value;">
</body>

Using CSS:

body {
  background-image: 
  url('path/to/background-image.png');
  background-repeat: $value;
  background-position: $value;
  background-size: $value;
}

Valid Values for Background Properties:

  • background-repeat:
    • Standard Keywords:
      • no-repeat - image appears once
      • repeat - tiles both horizontally and vertically
      • repeat-x - tiles horizontally only
      • repeat-y - tiles vertically only
      • space - repeats with equal spacing
      • round - stretches/shrinks to avoid partial images
    • Global Values:
      • initial - default value
      • inherit - inherits from parent
  • background-position:
    • Standard Keywords:
      • center - centers the image
      • top - aligns to top edge
      • bottom - aligns to bottom edge
      • left - aligns to left edge
      • right - aligns to right edge
    • Fixed Values:
      • pixels - 20px 50px
      • points - 1pt 2pt
      • centimeters - 1cm 2cm
      • millimeters - 10mm 20mm
      • inches - 1in 2in
      • picas - 1pc 2pc
    • Responsive Values:
      • percentage - 25% 75% (of container)
      • em - 1em 2em (relative to font size)
      • root em - 1rem 2rem (relative to root font size)
      • viewport width - 10vw 20vw
      • viewport height - 10vh 20vh
      • viewport minimum - 10vmin 20vmin
      • viewport maximum - 10vmax 20vmax
  • background-size:
    • Standard Keywords:
      • auto - original size
      • cover - scales to cover container
      • contain - scales to fit within container
      • none - no background image
      • auto auto - original size for both dimensions
      • auto contain - original width, contained height
      • auto cover - original width, covered height
      • contain auto - contained width, original height
      • cover auto - covered width, original height
    • Fixed Values:
      • pixels - 50px 100px
      • points - 1pt 2pt
      • centimeters - 1cm 2cm
      • millimeters - 10mm 20mm
      • inches - 1in 2in
      • picas - 1pc 2pc
    • Responsive Values:
      • percentage - 100% 100% (of container)
      • em - 1em 2em (relative to font size)
      • root em - 1rem 2rem (relative to root font size)
      • viewport width - 10vw 20vw
      • viewport height - 10vh 20vh
      • viewport minimum - 10vmin 20vmin
      • viewport maximum - 10vmax 20vmax
    • Global Values:
      • initial - default value
      • inherit - inherits from parent

Examples:

Basic Background Image

Setting an image as the background

body {
  background-image: 
  url('../assets/images/background-image.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Horizontal Tiling

Repeating the background image horizontally

body {
  background-image: 
  url('../assets/images/background-image.png'); 
  background-size: 9vw 25vh;
  background-position: left;
  background-repeat: repeat-x;
}

Vertical Tiling

Repeating the background image vertically

body {
  background-image: 
  url('../assets/images/background-image.png');
  background-size: 100% 33%;
  background-position: center;
  background-repeat: repeat-y;
}

Centered Background

Single background image centered in the container

body {
  background-image: 
  url('../assets/images/background-image.png');
  background-size: 50% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-color: black;
}