» » How to Set Background Color in HTML

How to Set Background Color in HTML



To set the background color of a webpage in HTML, you’ll just need to make a quick change to the "body" element inside the <style></style> tags. The steps are a little different depending on what you want your background to look like. Learn how to set your website’s background to a solid color, image, gradient, or multi-colored animation.

1
Setting a Solid Background Color


  1. Image titled 2609629 1 1
    1
    Open your HTML file in your favorite text editor. As of HTML5, the <bgcolor> HTML attribute is no longer supported. Background color, along with all other style aspects of your page, should be handled using CSS.[1]

  2. Image titled 2609629 2 1
    2
    Add the <style></style> tags to your document. All of the style information for your page (including the background color) should be coded between these tags. If you already have <style> tags set, just scroll to that part of the file.
    <!DOCTYPE html>
<html>
<head>
 
<style>
 
</style>
 
</head>
</html>

  3. Image titled 2609629 3 1
    3
    Type the "body" element inside the <style></style> tags. Anything you do to the "body" element in CSS will affect the entire page.
    <!DOCTYPE html>
<html>
<head>
 
<style>
body { 
 
}
 
</style>
</head>
<body>
</body>
 
</html>

  4. Image titled 2609629 4 1
    4
    Add the "background-color" property to the "body" element. In this context, only one spelling of "color" will work.
    <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: 
}
</style>
</head>
<body>
</body>
</html>

  5. Image titled 2609629 5 1
    5
    Add your desired background color to the "background-color" property. You can type a color by name (green, blue, red, etc.), use hexadecimal (hex) codes for the color you want, (e.g. #000000 for black, #ff0000 for red, etc) or by typing out the RGB value for the color (such as rgb(255,255,0) for yellow). Below is an example of using a hex code, which will make the background the same color as the wikiHow banner:
    <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #93B874;
}
</style>
</head>
<body>
</body>
</html>
    • White: #FFFFFF
    • Light Pink: #FFCCE6
    • Burnt Sienna: #993300
    • Indigo - #4B0082
    • Violet - #EE82EE
    • See the w3schools.com HTML Color Picker to find hex codes for any color.

  6. Image titled 2609629 6 1
    6
    Use "background-color" to apply background colors to other elements. Just as you set it in the body element, you can use background-color to define the backgrounds of other elements. Just add those elements inside the <style></style> with the background-color property.[2]
    <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #93B874;
}
h1 {
    background-color: orange;
}
p {
    background-color: rgb(255,0,0);
}
</style>
</head>
<body>
<h1>This header will have an orange background</h1>
<p>This paragraph will have a red background</p>
</body>
</html>

2
Using an Image as a Background


  1. Image titled 2609629 7 1
    1
    Open your HTML file in a text editor. Many people prefer to use an image as the background for their website. This allows you to make your background a pattern, texture, photo, or any other kind of image. As of HTML5, all types of backgrounds should be set with CSS (Cascading Style Sheets) inside of the <style></style> tags.

  2. Image titled 2609629 8 1
    2
    Add the <style></style> tags to your HTML file. All of the style information for your page (including the background color) should be coded between these tags. If you already have <style> tags set, just scroll to that part of the file.
    <!DOCTYPE html>
<html>
<head>
 
<style>
 
</style>
 
</head>
</html>

  3. Image titled 2609629 9 1
    3
    Type the "body" element inside the <style></style> tags. Anything you do to the "body" element in CSS will affect the entire page.
    <!DOCTYPE html>
<html>
<head>
 
<style>
body { 
 
}
 
</style>
</head>
<body>
</body>
 
</html>

  4. Image titled 2609629 10 1
    4
    Add the "background-image" property to the "body" element. When you add this property, you'll need the file name of your image. Make sure the image file is stored in the same folder as the HTML file (or enter the full path to the file on your web server).[3]
    <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("imagename.png");
    background-color: #93B874;
}
</style>
</head>
<body>
</body>
</html>
    • It's a good idea to also add the background-color property, just in case the background image doesn't load.

  5. Image titled 2609629 11 1
    5
    Layer multiple images. You can stack multiple images on top of each other. This can be useful if you have images with transparent backgrounds that complement each other when layered.
    <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("image1.png"), url("image2.gif");
    background-color: #93B874;
}
</style>
</head>
<body>
</body>
</html>
    • The first image listed will appear on top. The second image will appear behind the first image.

3
Creating a Gradient Background


  1. Image titled 2609629 12
    1
    Use CSS to create a gradient background. If you're looking for something a little more stylized than a solid color, yet not as busy as a multi-colored animation, try a gradient background. Gradients are colors that fade into other colors. You can use CSS to create and customize your gradient. Before you try making a gradient, make sure you understand the basics of styling a page with CSS.

  2. Image titled 2609629 13
    2
    Understand the basic syntax. When making a gradient, there are two pieces of information you'll need: the starting point/angle, and the colors that the gradient will transition between. You can select multiple colors to have the gradient move between all of them, and you can set a direction or angle for the gradient.[4]
    background: linear-gradient(direction/angle, color1, color2, color3, etc.);

  3. Image titled 2609629 14
    3
    Make a vertical gradient. If you don't specify the direction, the gradient will go from top to bottom. Different browsers have different implementations of the gradient function, so you'll have to include several versions of the code.
    <!DOCTYPE html>
<html>
<head>
<style>
html {
    min-height: 100%; /* This is required to ensure that the gradient stretches across the whole page */
}
 
body {
    background: -webkit-linear-gradient(#93B874, #C9DCB9); /* Chrome 10+, Safari 5.1+ */
    background: -o-linear-gradient(#93B874, #C9DCB9); /* Opera 11.1+ */
    background: -moz-linear-gradient(#93B874, #C9DCB9); /* Firefox 3.6+ */
    background: linear-gradient(#93B874, #C9DCB9); /* Standard syntax (must be last) */
    background-color: #93B874; /* It's a good idea to set a background color in case the gradient doesn't load */
}
</style>
</head>
<body>
</body>
</html>

  4. Image titled 2609629 15
    4
    Make a directional gradient. Adding a direction to the gradient will allow you to change the way the color shift appears. Note that different browsers have different ways of interpreting directions. All will result in the same gradient.[5]
    <!DOCTYPE html>
<html>
<head>
<style>
html {
    min-height: 100%;
}
 
body {
    background: -webkit-linear-gradient(left, #93B874, #C9DCB9); /* from left to right */
    background: -o-linear-gradient(right, #93B874, #C9DCB9); /* ending on the right */
    background: -moz-linear-gradient(right, #93B874, #C9DCB9); /* ending on the right */
    background: linear-gradient(to right, #93B874, #C9DCB9); /* moving to the right */
    background-color: #93B874; /* It's a good idea to set a background color in case the gradient doesn't load */
}
</style>
</head>
<body>
</body>
</html>

  5. Image titled 2609629 16
    5
    Use other properties to adjust the gradient. There's a lot more that you can do with gradients.
    • For example, not only can you add more than two colors, you can also put a percentage after each one. This will allow you to set how much spacing you want each color segment to have. 
      background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
    • Add transparency to your colors. This will make the color fade. Use the same color to fade from the color to nothing. You'll need to use the rgba() function to define the color. The ending value determines the transparency: 0 for solid and 1 for transparent. 
      background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));

4
Setting a Background that Changes Colors


  1. Image titled 2609629 17
    1
    Navigate to the <style> part of your HTML code. If a single solid background color is not your thing, try experimenting with this animated, color-changing background. As of HTML 5, background colors should be defined by CSS (Cascading Style Sheets). If you've never set a background color with CSS, see Setting a Solid Background Color before trying this method.

  2. Image titled 2609629 18
    2
    Add the animation property to the "body" element. You'll have to add 2 different properties, as different browsers require different code. [6]
    <!DOCTYPE html>
<html>
<head>
<style>
body {
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
    }
</style>
</head>
<body>
</body>
</html>
    • -webkit-animation is the property required for Chromium-based browsers (Chrome, Opera, Safari). animation is the standard for all other browsers.
    • colorchange is what you'll call the animation in this example.
    • 60s is the duration (60 seconds) of the animation/transition. Make sure to set it for both the webkit and standard syntax.
    • infinite tells the animation to repeat forever. If you'd rather the colors loop one time and then stop at the last color, you can leave this part out.

  3. Image titled 2609629 19
    3
    Add your colors to the animation. Now you'll use the @keyframes rule to set the background colors through which you'll cycle, as well as the length of time each color will appear on the page. Again, you'll need separate entries for the different sets of browsers.[7]
    <!DOCTYPE html>
<html>
<head>
<style>
 
body {
    -webkit-animation: colorchange 60s infinite; 
    animation: colorchange 60s infinite;
}
 
 
@-webkit-keyframes colorchange {
 
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}
 
 
@keyframes colorchange {
     0%  {background: #33FFF3;}
    25%  {background: #78281F;}
    50%  {background: #117A65;}
    75%  {background: #DC7633;}
    100% {background: #9B59B6;}
}   
 
</style>
</head>
<body>
</body>
</html>
    • Note that the two rules (@-webkit-keyframes and @keyframes have the same background colors and percentages. You'll want these to stay uniform so the experience is the same on all browsers.
    • The percentages (0%, 25%, etc) are of the total animation length (60s). When the page loads, the background will be the color set at 0% (#33FFF3). Once the animation has played for 25% of of 60 seconds, the background will turn to #78281F, and so on.
    • You can modify the times and colors to fit your desired outcome.


Subscribe to: Post Comments (Atom)