How to Remove Background Image in CSS

As we know, the background image is manipulated with the CSS background-image property, which can specify one or more images for an element. However, there are cases, when we don't want a background image and want to remove it. This is quite easy.

In our tutorial, we’ll show how the background image can be removed using a few steps.

Start with creating HTML.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use an <h2> element.
  • Use three <div> elements.
  • For the second <div>, use an id attribute with the name "no-background".
<h2>Example</h2>
<div></div>
<div id="no-background"></div>
<div></div>

Add CSS

First, add style to the first and last <div> elements.

div {
  height: 170px;
  width: 300px;
  margin-bottom: 20px;
  background-color: #CDCDCD;
  border: 2px solid #CDCDCD;
  background-image: url('https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
  background-repeat: no-repeat;
  background-size: 100%;
}

Now, we can style the <div> with the "id" named "no-background" and remove the background image of only this <div> element.

  • Set the background-image property to "none".
div#no-background {
  background-image: none;
}

Let’s see the result of our code.

Example of removing the background image:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        height: 170px;
        width: 300px;
        margin-bottom: 20px;
        background-color: #CDCDCD;
        border: 2px solid #CDCDCD;
        background-image: url('https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
        background-repeat: no-repeat;
        background-size: 100%;
      }
      div#no-background {
        background-image: none;
      }
    </style>
  </head>
  <body>
    <h2>Example</h2>
    <div></div>
    <div id="no-background"></div>
    <div></div>
  </body>
</html>

So, we demonstrated an example where we used three <div> elements but removed the background image of only one <div>.