Back ArrowExplore all kits

Html and css background color

share link

by vsasikalabe dot icon Updated: Mar 14, 2023

technology logo
technology logo

Guide Kit Guide Kit  

By default, the background of the webpage is white. Sometimes, you may not like it. HTML provides you following two good ways to apply background to your webpage. 

  • HTML Background with Colors 
  • HTML Background with Images 


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

You can specify an image for the background of your HTML page or table. On various websites, you might have seen many patterns or transparent backgrounds. Using a patterned or transparent image in the background is achieved. The bgcolor attribute is used to apply the color to the background of an HTML element, specifically the body of the page. 

Use the smallest dimensions possible images, even as small as 1x1, while creating patterns or transparent GIF or PNG images to avoid slow loading. To set an element's background color, the background-color CSS property is used. The main difference between background and Background-color CSS is that the CSS background property is the simple property of all background properties. At the same time, the background colors are the property used to set the background color. The content of the webpage is created using HTML code. 


Here is an example of how to set the background color using HTML and CSS: 

Preview of the output that you will get on running this code from your IDE.

Code

Html and css background color

HTMLdotLines of Code : 51dotLicense : Strong Copyleft (CC BY-SA 4.0)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .two {
            background-color: #f0f0f0;
            margin-bottom: 125px;
            text-align: center;
            width: 100%;
        }

        #Lorem {
            background-color: #f0f0f0;
            margin-right: auto;
            margin-left: auto;
            margin-bottom: 125px;
            text-align: center;
            width: 950px;
        }
    </style>
</head>

<body>

    <div class="two">

        <article id="Lorem">

            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar nibh id dolor placerat, et
                luctus libero pretium. Vivamus eget arcu ligula. Vivamus blandit diam non sapien cursus malesuada. In
                vulputate facilisis velit ut interdum. Nam commodo ex quis ipsum rutrum, convallis venenatis ex
                tincidunt. Praesent tincidunt semper ex, eget semper ante porta vel. Integer egestas turpis vitae
                ullamcorper ultricies. Ut arcu tortor, imperdiet vel felis et, fermentum rutrum dolor. Vestibulum
                bibendum eu massa et tincidunt. Integer a porta enim. Curabitur quis imperdiet ante, aliquam tincidunt
                felis. Praesent nec est ac massa hendrerit tempus. Vivamus in mattis quam.</p>

        </article>

    </div>

</body>

</html>

Instructions

Follow the steps carefully to get the output easily.

  1. Download and Install VS Code on your Desktop.
  2. Open the VS Code and install Live Server from Extensions.
  3. Open the new file and save it as filename.html.
  4. Copy the code using the "Copy" button above, and paste it into your HTML file.
  5. Click the Go live button in the bottom right corner to get the output.


I hope you found this useful. I have added version information in the following sections.


I found this code snippet by searching for ' HTML and CSS background color ' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in VS Code 1.73.1 version.
  2. Live Server v5.7.9


Using this solution, we are able to do HTML and CSS background color with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to do background color using HTML and CSS.

Support

  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow

  • © 2023 Open Weaver Inc.