CSS Backgrounds

CSS backgrounds are used to add background images, colors, and gradients to HTML elements. CSS can be used to specify the background image, color, repeat, position, and other properties of backgrounds.

Background Image

The background-image property specifies the image that will be used as the background of an element. The background-image property can be set to the URL of an image file, or to a keyword that represents a built-in image.

For example, the following CSS rule will set the background image of all <h1> elements to the image file my-image.png:

h1 {
  background-image: url(my-image.png);
}

Background Color

The background-color property specifies the color that will be used as the background of an element. The background-color property can be set to a hexadecimal color code, an RGB color value, or an HSL color value.

For example, the following CSS rule will set the background color of all <h1> elements to red:

h1 {
 background-color: red;
}

Background Cover

CSS also includes a number of other background properties, such as background-size, background-attachment, and background-clip. These properties can be used to control the appearance of backgrounds in more detail.

For example, the following CSS rule will set the background size of all <h1> elements to cover the entire element:

h1 {
  background-size: cover;
}

Task

Change the color and background-color of the header element to #fff and #333 respectively. Add background-image https://learnwith.tumkurlab.com/wp-content/uploads/2023/10/19449741-scaled.jpg to the body and make background-size cover. Add a form selector and change the background-color to #f2f2f2, light gray. Run the code to see the results and experiment with the code to get used to it.

Image by starline on Freepik

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
    <style>
    /* Change the code below */
    body {
        line-height: 1.6;
    }
    header {
        color: #f00;
        font-family: 'Arial', sans-serif;
    }
    /* Change the code above */
    ul { 
        color: #007BFF;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
     }
    ol li {
       font-style: italic;
      }
    header h1 { 
        font-size: 36px;
        line-height: 1.2;
    }
    h1, footer {
        text-align: center;
    }
    /* Add the form selector code below */
    
    /* Add the form selector code above */
     </style>
</head>
<body data-rsssl=1>
    <header>
<h1>Welcome to <i>My Portfolio<i/></h1>
<img decoding="async" src="https://learnwith.tumkurlab.com/wp-content/uploads/2023/09/pexels-cong-h-1404819.jpg" alt="Cat the Dev." />
    </header>
    <section>
    <h2>Skills</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</section>
<section>
    <h2>Projects</h2>
    <ol>
        <li>Portfolio Website</li>
        <li>E-commerce App</li>
        <li>Blog Website</li>
    </ol>
</section>
<section>
    <h2>Education</h2>
    <table border="1" cellpadding="10" cellspacing="5">
    <tr>
        <th>Position</th>
        <th>Company</th>
        <th>Duration</th>
    </tr>
    <tr>
        <td>Web Developer</td>
        <td>TumkurLab</td>
        <td>2020-2022</td>
    </tr>
</table>
</section>
<section>
    <h2>Contact Me</h2>
    <form action="">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="Submit">
</form>
</section>
    <footer>
        © 2023 My Portfolio. Created by <a href="https://example.com">Your Name</a>
    </footer>
</body>

CSS Backgrounds

Add LearnWebstack.com to your Homescreen!