W3docs
en
Log in

How to Remove Background Image in CSS

The background image is manipulated with the background-image property. But you may need to remove the background image, and we’ll show how it can be done.

Tags

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.

Create HTML

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

How to Remove Background Image in CSS

<h2>Example</h2>
<div></div>
<div id="no-background"></div>
<div></div>

Add CSS

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

How to Remove Background Image in CSS

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".

How to Remove Background Image in CSS

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>
Try it Yourself »

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