Remove Background Image in HTML

There are times when you might wish to set a background of a web page or edit an element to make it look much more aesthetically pleasing or to highlight some specific thing and so on.

But, doing so using HTML is not everyone’s cup of tea. Hence, here is your guide on how you can remove background images in HTML easily!

How to remove background images in HTML?

Here are the steps you need to follow in order to remove background image in HTML:

Step 1: Create a HTML by using an <h2> element and three <div> elements. And for the second <div>, use an “id” that reads “no-background.”

<h2>Example</h2>

<div></div>

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

<div></div>

HTML code

Step 2: Add CSS by starting off by adding style to the initial and last <div> elements. 

Add the height and width of your <div> and then specify the margin-bottom, border properties and background-color. And then, use the background-image property with the “url” value. After this, assign the background-repeat to “no-repeat and finish off by adding background-size. Here is how it might look:

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%;

}

HTML Code

Step 3: Lastly, style the <div> with the “id” which is named “no-background” and remove the background of the <div> element and set the background-image property to “none.”

div#no-background {

  background-image: none;

}

Your entire code might look like this:

<!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;

        backgroundimage:url('https://images.unsplash.com/photo1507919909716c8262e491cdeixlib=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>

HTML Code

And with this, the background from your image is successfully removed!

Step 1
Step 2
Step 3
Step 4
Step 5
Step 6
Step 7
Step 8
Step 9
Step 10

Remove Background From PNG, JPG, JPEG and WebP Images with Erase.bg:

Erase.bg is a savvy AI background remover and editing tool that helps edit your images precisely. With Erase.bg, anyone can easily remove background from an image regardless of their technical skills. You can use Erase.bg to remove background from PNG, JPG, JPEG and WebP images too. 

For removing background from these formats, you need to either access Erase.bg through the website or by downloading the Erase.bg Application from the App Store (for iOS users) or Google Play Store (for Android users)

You can easily remove the background from WebP, PNG, JPG and JPEG images using Erase.bg:

Step 1 - Click on the dialogue box that reads “Upload Image”, or you can also drag and drop the image on the page.

Step 2 - A message will appear on the screen that says, “Uploading image, please wait” and during this time, Erase.bg’s AI will perform its wonders to remove the background from the image of your choice.

Step 3 - If you want to remove something or edit the image, you will see an Edit option on the top right corner of the Background Removed image.

Step 4 - Download the edited image in your preferred format to age destination of your choice.

FAQs

Here, we have listed some of the commonly asked questions from the community. If you do not find the information you need, feel free to reach out to us at support@pixelbin.io

How do I add background colour in HTML?

down arrow

In order to add background colour in HTML, here is what you need to do:

PS: In this example we will be changing the background colour of a table.

Step 1: Scan the HTML code to know what element you would like to edit. In case it is the header, search for the <header> opening tag and if it is a div, search for the <div> tag. 

Step 2: Now, pick a colour from the multitude of colors available. Here we will be picking #33475b.

Step 3: After that, add a style attribute to the opening tag. Hence, here is how your HTMl code will look:

<table style="background-color:#33475b">

<tr>

<th>Name</th>

<th>Job Title</th> 

<th>Email address</th>

</tr>

<tr>

<td>Anna Fitzgerald</td>

<td>Staff Writer</td>

<td>example@company.com</td>

</tr>

<tr>

<td>John Smith</td>

<td>Marketing Manager</td>

<td>example2@company.com</td>

</tr>

<tr>

<td>Zendaya Grace</td>

<td>CEO</td>

<td>example2@company.com</td>

</tr>

</table>

How to set a background colour in HTML?

down arrow

In order to set a background colour in HTML, you need to use the style attribute and it specifies an inline style of the element. The style attribute is always used with the HTML <body> tag, along with the CSS property background-color. That is because HTML5 does not support <body> tag bgcolor attribute. Hence, here is how your code might look:

<!DOCTYPE html>

<html>

<head></head>

<bodystyle=“background-color:add_color”>

</body>

</html>

What is the HTML code for transparent?

down arrow

The HTML code for transparent are FFFFFF or 00FFFFFF. Also, you can use the keyword "transparent" to define a CSS property that does not need an opaque color.

rgba() and hsla() have a fourth parameter (in 0;1 range) to define the alpha channel of a color.

Not just that, hexadecimal can also have a fourth alpha parameter by defining a 32-bit color instead of the common 24-bit color. And lastly, you can also use the 'opacity' CSS property (in 0;1 range) to mark the level of transparency to an element.

down arrow

down arrow

down arrow

Why Erase.BG

Remove Background for Free
Remove Background For Free

You can remove the background from your images of any objects, humans, or animals and download them in any format for free.

Quick And Easy To Use
Quick And Easy To Use

With Erase.bg, you can easily remove the background of your image by using the Drag and Drop feature or click on “Upload.”

Remove Background From Any Platform
Remove Background From Any Platform

Erase.bg can be accessed on multiple platforms like Windows, Mac, iOS, and Android.

Can Be Used For Work And For Personal Use
Can Be Used For Work And For Personal Use

Erase.bg can be used for personal and professional use. Use tool for your collages, website projects, product photography, etc.

Highly Accurate AI
Highly Accurate AI

Erase.bg has an AI that processes your image accurately and selects the backgrounds to remove it automatically.

Saves Time And Money
Saves Time And Money

You won’t have to spend extra money or time on hiring designers, green screens, and organizing special shoots to make your PNG image transparent.

Download High Quality Images For Free

Download images in the same resolution that you upload
Upload Image