Background color in html using div

CSS background-color Property

The background-color property sets the background color of an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

Tip: Use a background color and a text color that makes the text easy to read.

Default value:	transparent
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.backgroundColor=»#00FF00″ Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
color	Specifies the background color. Look at CSS Color Values for a complete list of possible color values.	Demo ❯
transparent	Specifies that the background color should be transparent. This is default	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Specify the background color with a HEX value:

Example

Specify the background color with an RGB value:

Example

Specify the background color with an RGBA value:

Example

Specify the background color with a HSL value:

Example

Specify the background color with a HSLA value:

Example

Set background colors for different elements:

body <
background-color: #fefbd8;
>

h1 background-color: #80ced6;
>

div background-color: #d5f4e6;
>

span background-color: #f18973;
>

Источник

How to Add & Change Background Color in HTML

Setting the background color of a web page or an element on the page can enable you to create unique layouts.

Take the homepage of Delish as an example. The background image of its header section is a colorful soup. To ensure readers can still see the name of the recipe, the background color of the text box is set to white. The effect is striking and easy to read.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

You’re all set!

Click this link to access this resource at any time.

HTML Background Color

In HTML and CSS, background color is denoted by the background-color property. To add or change background color in HTML, simply add inline CSS to your code. Here’s an example:

In the past, you could use the bgcolor attribute to change the background color of a page or element.

Say you wanted to change the background color of a web page to maroon. You would have simply added the bgcolor attribute in the opening body tag and set it to the hex color code #800000, as shown below.

However, this attribute has been deprecated in the latest version of HTML and replaced by a much better alternative, the CSS background-color property. Using this property, you can add and change background colors on your website.

Below, we cover a tutorial in more detail.

How to Add Background Color in HTML

To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.

Adding a background color can help a certain element stand out on the page, making it more readable.

We’ll walk through this process step-by-step. For this tutorial, we’ll make a table in HTML as an example.

1. Identify the HTML element you’d like to add a background to or create one.

Scan your HTML code to pinpoint which element you’d like to change. If it’s the header, look for the opening tag. If it’s a div, look for the tag.

2. Choose an HTML background color.

You have plenty of HTML color codes to choose from. For this example, we’ll make the color #33475b.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

You’re all set!

Click this link to access this resource at any time.

How to Change a Div Background Color

A div is a container element that’s commonly used to designate different sections of a webpage.

Changing the background color of a div is identical to changing the background color of your web page’s body.

Usually, a web page will have many divs. In this tutorial, we’ll teach you how to change one div only.

Let’s go through the process step-by-step.

1. Add a CSS class to the div you’d like to change.

First, find the div in your HTML code and add a class to the opening tag. Adding a class to an element will allow you to change that element only.

Here’s what that looks like:

2. Add the new class selector to your CSS code.

Next, head over to your CSS code and add your new class selector. Within the brackets, include the background-color property.

Here’s what that looks like:

3. Choose a new background color.

Next, choose a CSS background color for your background-color property. We chose rgb(255, 122, 89).

Here’s what that code looks like:

Here’s the result:

All done! You’ve changed the background of a div on your web page.

Try It Yourself!

The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

You’re all set!

Click this link to access this resource at any time.

How to Add Transparency to Your HTML Background Color

When changing background color in HTML, you aren’t limited to solid colors. You can change the opacity and transparency to create interesting visual effects.

Adding Transparency Using RGBA

You can set an opacity level of your color with the CSS function rgba(). The “a” stands for alpha channel, which represents the level of transparency in a color. This function takes one extra value from 0 to 1, where 0 is completely transparent and 1 is completely opaque.

So, if I wanted to use Solaris with 75% transparency, I’d write the following:

Try It Yourself!

The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

You’re all set!

Click this link to access this resource at any time.

How to Create an HTML Background Color Gradient

For even more style options, you can create a gradient background. This is a special type of image that most commonly shows one color gradually changing to another color in a certain direction like top to bottom, left to right, or diagonally.

These are known as linear gradients. To create a linear gradient, you have to specify at least two color stops.

Let’s look at four quick examples below.

Linear Gradient Tutorial — Top to Bottom

Say you want your background color to transition from white at the top of the screen to blue at the bottom.

Using the body CSS selector, you’ll apply unique style properties to the body of the web page. Here’s what that looks like from beginning to end.

• Step 1: Find the body selector in your CSS code.
• Step 2: Your body might already have a background-color property. Delete that. Rather than use the background-color property, you’ll use the background-image property.
• Step 3: Set the property to “linear-gradient” and specify two color stops in parentheses. Here’s the syntax:

• Step 4: Next, you want to set the HTML element’s height to 100% to ensure this image takes up the entire screen.

All together, here’s the CSS:

Here’s the HTML (including the body tags):

Linear Gradient

This linear gradient starts as white at the top and transitions to orange at the bottom.

Here’s the result:

Try It Yourself!

The code module below is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

You’re all set!

Click this link to access this resource at any time.

Источник

Div Background Color – How to Change Background Color in CSS

Kolade Chris

If you’re working on a web development project, setting a nice background color can give the website a more enticing look.

To set a background color for a div or related element in CSS, you use the background-color property.

While setting this background color, your creativity is your limit as to how far you want to go.

So in this article, I’m going to show you how you can set this background color.

How to Set Background Color with Named Colors

With named colors, you can set the background color by bringing in the background-color property and assigning it a value expressed in a color name like red , green , blue , and so on.

You can use the following styles to make the web page look better. Just set a width and height for the div , so the background-color can take effect:

Modern browsers recognize around 147 colors, so you’re still limited a little.

How to Set Background Color with Hexadecimal Colors

With Hexadecimal values, you can set a background color for a div or any other element with a total of 6 characters.

Hex colors start with the hash sign (#), any number from 0 to 9, and finally any letter from A to F.

The first 2 values stand for red, the next two stand for green, and the last 2 represent blue.

With hex values, you can dive deep into the color wheel and even use colors no one has ever used.

How to Set Background Color with RGB Colors

RGB stands for Red Green, and Blue.

To set the background color with RGB, you specify the amount of red, green, and blue you want with numbers between 0 and 255.

RGB also has a variation called RGBA. The last A means alpha and it lets you determine how opaque you want the color to be.

The alpha takes a value from 0.0 to 1.0. 0.0 means 0% opacity, 0.5 means 50% opacity, and 1.0 means 100% opacity.

How to Set Background Color with HSL Colors

HSL stands for Hue, Saturation, and Lightness. It is the most dynamic within the ways you can specify a background color for a div or other elements.

• Hue represents the color wheel in 360°. 0° is red, 120° is green and 240° is blue
• Saturation is the amount of gray in the color expressed in percentages. 0% is the shade of gray and 100% is the color itself.
• As the name implies, lightness is the amount of darkness and lightness in the color expressed as a percentage. 0% is black and 100% is white.

Conclusion

Since you can apply colors in 4 different ways, you must be wondering which one you should use.

When you use named colors, you’re kind of limited in how far you can go in applying different shades of colors.

Each color like red, green, blue, yellow, or any other color has a lot of variations you won’t get access to with named colors.

You can only access about 147 predefined colors recognized by browsers.
Hexadecimal colors, on the other hand, are very dynamic. They are mostly used among developers, and creativity is the limit. These hex colors allow you to use different shades of the same color.

RGB colors are as dynamic as hexadecimal colors. You can specify the amount of red, green, and blue from 0 to 255, and you can also use the added alpha value to specify the transparency of the color.

HSL is the most dynamic of all of them. You can specify exactly the color from 0 to 360 degrees in the color wheel, set the saturation and darkness as a percentage, and set the opacity to any value between 0.0 and 1.0.

So deciding which to use between named, hex, RGB and HSL colors depends on you and how creative you want to be and what your project’s needs are.

Источник