Home Logic Battle Card RPG Godot Tutorials Linux Gaming Blog NodeJS + Postgres LAMP Stack HTML CSS PHP Website Builder ReactJS VR Tech Blog Palm Beach Techie PHP Fiddle

Intro to HTML: Background

Quick Copy Boxes

You can change use HTML to add a background image or change the background color.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Background Image


<!DOCTYPE html>
<html>
  <head>
    <title>Coding Cadets</title>
  </head>
  <body background = "http://i63.tinypic.com/ff0eop.png">
    <!-- Body Content-->
    <div>
      <h1>Good day Coding Cadets!</h1>
    </div>
  </body>
</html>

background The background is set equal to the image URL.
body This background image will display for the entire body.

Background Color


<!DOCTYPE html>
<html>
  <head>
    <title>Coding Cadets</title>
  </head>
  <body background = "http://i63.tinypic.com/ff0eop.png">
      <!-- Body Content-->
      <div>
        <h1>Good day Coding Cadets!</h1>
        <p style="background-color:yellow;">Today is a good day to learn
        web development.HTML is how web content is displayed.  After familarizing
        yourself with HTML, you will be ready for PHP.  PHP is Commander Candy's
        favorite language.</p>
      </div>
  </body>
</html>

background color The background color of the paragraph is yellow.
paragraph The entire element will have a yellow background.
background image The background is set equal to the image URL.
body This background image will display for the entire body.