how to place an image onto a background color html code example

Example 1: how to add background in html

<!DOCTYPE HTML>
<html lang=us>
  <meta charset=UTF-8>
  //the following code within the style tags is CSS.
<style>
  /*this is a body tag. After specifying 
  that we want to affect the whole body,
  we add {}, and write the background color
  we want to change it to. */
  body{background:rgb(255,0,0);
  }
  /* this is a class, which we have named green. we add {}, then
  write the background color we want.*/
  .green{background:green}
   /* this is an id, which we have named blue. we add {}, then
  write the background color we want.*/
  #blue{background:blue}
</style>

<body>
This background is red.
  // you must make sure to note that when you add a background to
  a paragraph, you must add a class or id, name it, then style it 
  as seen above.  with tags HTML already recognizes, however, you 
  don't have to do anything more than shown above.
  <p class="green">
  This background is green.</p>
  <p id="blue">This background is blue.</p>

</body>

</style>
</html>

Example 2: adding background image css

/* Answer to: "adding background image css" */

/*
  The background-image property sets one or more background images
  for an element.

  By default, a background-image is placed at the top-left corner
  of an element, and repeated both vertically and horizontally.

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

  Tip: Always set a background-color to be used if the image is
  unavailable.
*/

/* Set a background-image for the <body> element: */

body {
 background-image: url("paper.gif");
 background-color: #cccccc;
}

/* Set two background images for the <body> element: */

body {
  background-image: url("img_tree.gif"), url("paper.gif");
  background-color: #cccccc;
}

Tags:

Misc Example

Recent Posts