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.

Steps

Setting a Solid Background Color

  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, Style a Page Using CSS.[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.
  3. Type the "body" element inside the <style></style> tags. Anything you do to the "body" element in CSS will affect the entire page.
  4. Add the "background-color" property to the "body" element. In this context, only one spelling of "color" will work.
  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:
    • 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. 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]

Using an Image as a Background

  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 Style a Page Using CSS (Cascading Style Sheets) inside of the <style></style> tags.
  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.
  3. Type the "body" element inside the <style></style> tags. Anything you do to the "body" element in CSS will affect the entire page.
  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]
    • It's a good idea to also add the background-color property, just in case the background image doesn't load.
  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.
    • The first image listed will appear on top. The second image will appear behind the first image.

Creating a Gradient Background

  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 Style a Page Using CSS.
  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]
  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.
  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]
  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.
    • 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.

Setting a Background that Changes Colors

  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, Style a Page Using 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. Add the animation property to the "body" element. You'll have to add 2 different properties, as different browsers require different code.[6]
    • -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. 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]
    • 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.



Related Articles

Sources and Citations

  1. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
  2. ↑ http://www.w3schools.com/css/css_background.asp
  3. ↑ http://www.w3schools.com/cssref/pr_background-image.asp
  4. ↑ https://css-tricks.com/css3-gradients/
  5. ↑ http://www.w3schools.com/css/css3_gradients.asp
  6. ↑ https://codepen.io/metagrapher/pen/tgcLl
  7. ↑ http://www.w3schools.com/css/css3_animations.asp

You may like

Retrieved from "https://kipkis.com/index.php?title=Set_Background_Color_in_HTML&oldid=362584"