HTML background color

Within the website, the HTML background color is used to make any section or element stand out. Below are some examples of HTML background color code that you can follow. Let’s know how to change background color in HTML.

body{
	background-color: yellow;
}

p{
	background-color: pink;
}

h1{
	background-color: blue;
}

span{
	background-color: gray;
}

div{
	background-color: red;
}

<div>html body background</div>
<h1>how to change background color in html</h1>
<p>Please change my bg color</p>
<span>html body background color</p>

But if you want to apply bg color with HEX value or RGB value then for that it will be HTML background color code.

body{
	background-color: rgb(16,32,87);
}

p{
	background-color: rgba(01, 36, 36, 0.8);
}

h1{
	background-color: #064857;
}

span{
	background-color: #ff7800;
}

div{
	background-color: #53d9e8;
}

Gradient html background color

If you want to put 2 colors in the background of your section or element, then you can use linear-gradient for that.

.myclass{
	background-image: linear-gradient(pink, green);
}

<div class=”myclass”>
	<h1>how to change bg color</h1>
	<p>how to change bg color in html</p>
</div>

You can start the linear gradient from any side, for example, you will see that the linear gradient color is going from left to right.

.myclass{
	background-image: linear-gradient(to right, pink, green);
}

<div class=”myclass”>
	<h1>Change bg color in html</h1>
	<p>Change bg color in html</p>
</div>

HTML Background Image

But if you want to use the image instead of background color, then for that you have to see the example shown below.

.myclass{
	background-image: url(“myimage.jpg”);

	padding:200px;

	background-repeat: no-repeat;

	background-size: cover;
}

<div class=”myclass”>
	<h1> Html background image </h1>
	<p> I have background image </p>
</div>

Browser Support

  • Edge
  • Firefox
  • Internet Explorer
  • Opera
  • Safari
  • Chrome

Frequently Asked Questions

We have answers to some questions that people search on the Internet everyday. Let us know what are those questions and what are their answers.

How do I link CSS to HTML?

To link CSS with html, you can place your file inside the <head> tag. For example <link rel = “stylesheet” href = “mystyle.css”>.

How do you put a full background image on HTML?

If you want to apply the full background image, then you can apply the image above your body tag. for example Background-image: url (“myimage.jpg”).

What is div in HTML?

In simple language, div is a box inside which you set your elements.

How do you underline in HTML?

With the <u> tag you can underline your text.

Where do I put CSS in HTML?

There are 3 ways to apply CSS, either you can link your file inside the <head> tag, or you can add inline CSS, or you can place your CSS on the same page with the <style> tag.

Note: All the examples shown in this article, we have tested before, you can use these examples without any difficulty.

Related: The Easiest Example Of HTML Underline & Text Highlight