Background Image

background-image Property

  • background-image property allows you to place an image behind any HTML element

  • Image can be “behind” the entire page or part of a page

  • By default a background image will repeat to fill an entire box

  body {
    /* this image will be applied to the entire page */
    background-image: url("images/cool-background-image.gif");
  }

  .hero-section {
    /* this image will be applied to container with a "hero-section" class attribute */
    background-image: url("images/another-cool-background-image.gif");
  }