Uly.me

cloud engineer

  • Home
  • About
  • Archives
Home/CSS/Background Cover

December 22, 2014

Background Cover

Adding background images to your designs is quite simple. All you need to do is assign CSS background-image to the body of your design. In addition, you can also assign a background color, just in case the background image is not rendered.

body {
    background-image: url("path/to/the/background/image.gif");
    background-color: #cccccc;
}

body { background-image: url("path/to/the/background/image.gif"); background-color: #cccccc; }

The code above may have worked in the past, but with 4k and 5k monitors becoming popular nowadays, you need to make sure your background images are big enough to cover the large monitors as well.

To make your background image cover all monitor sizes, you need to use “background-cover.”

body { 
    background-size: cover;
}

body { background-size: cover; }

Here’s the entire code.

body {
    background-image: url("path/to/the/background/image.gif");
    background-color: #cccccc;
    background-size: cover;
}

body { background-image: url("path/to/the/background/image.gif"); background-color: #cccccc; background-size: cover; }

Filed Under: CSS, HTML Tagged With: background, images

About Me

I'm Ulysses, a Cloud Engineer at Cardinal Health based in Columbus, Ohio. I’m a certified AWS Solutions Architect. This website is my way of documenting the things I have learned in the Cloud. When off the grid, I enjoy riding my electric skateboard. I have surfed, snowboarded and played the saxophone in the past. I hope you will find this site helpful. It's powered by WordPress and hosted in AWS LightSail.

  • Cloud
  • Linux
  • Git

Copyright © 2012–2021