Friday, July 26, 2024

HTML Backgrounds

HTML backgrounds can be set for elements using the background attribute in older HTML or CSS properties in modern practices. The background attribute in HTML was used to set an image as the background of a <body> tag, but it is now deprecated. Instead, CSS is used to control background images, colors, and positions, providing greater flexibility and control. Using the background shorthand or individual properties like background-image, background-color, and background-size enhances styling.

Examples:

<!-- Deprecated HTML background attribute -->

<body background="background.jpg">

  <p>Text on a background image.</p>

</body>


<!-- Modern CSS background -->

<style>

  body {

    background-image: url('background.jpg');

    background-color: #f0f0f0;

    background-size: cover;

  }

</style>

<body>

  <p>Text on a background image.</p>

</body>


HTML Code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Tutorial - Page 25</title>
    <style>
        .bg-color {
            background-color: lightblue;
            padding: 20px;
        }
        .bg-image {
            background-image: url('background.jpg');
            background-size: cover;
            padding: 20px;
            color: white;
        }
        .bg-gradient {
            background: linear-gradient(to right, red, yellow);
            padding: 20px;
            color: white;
        }
    </style>
</head>
<body>
    <h1>HTML Backgrounds</h1>
    <p>Backgrounds can be applied to HTML elements using the <code>background</code> attribute or CSS.</p>

    <h2>Background Color</h2>
    <pre>
        &lt;div style="background-color: lightblue;"&gt;
            &lt;h2&gt;This div has a light blue background.&lt;/h2&gt;
            &lt;p&gt;This is some text inside the div.&lt;/p&gt;
        &lt;/div&gt;
    </pre>
    <div class="bg-color">
        <h2>This div has a light blue background.</h2>
        <p>This is some text inside the div.</p>
    </div>

    <h2>Background Image</h2>
    <pre>
        &lt;div style="background-image: url('background.jpg'); background-size: cover;"&gt;
            &lt;h2 style="color: white;"&gt;This div has a background image.&lt;/h2&gt;
            &lt;p style="color: white;"&gt;This is some text inside the div.&lt;/p&gt;
        &lt;/div&gt;
    </pre>
    <div class="bg-image">
        <h2>This div has a background image.</h2>
        <p>This is some text inside the div.</p>
    </div>

    <h2>Background Gradient</h2>
    <pre>
        &lt;div style="background: linear-gradient(to right, red, yellow);"&gt;
            &lt;h2 style="color: white;"&gt;This div has a background gradient.&lt;/h2&gt;
            &lt;p style="color: white;"&gt;This is some text inside the div.&lt;/p&gt;
        &lt;/div&gt;
    </pre>
    <div class="bg-gradient">
        <h2>This div has a background gradient.</h2>
        <p>This is some text inside the div.</p>
    </div>

    <nav>
        <a href="https://simplilearnat.blogspot.com/p/html-tutorial.html">Home</a> | <a href="https://simplilearnat.blogspot.com/2024/07/html-doctype.html">Back</a>
    </nav>
</body>
</html>

The Output of the above code:


HTML Tutorial - Page 25

HTML Backgrounds

Backgrounds can be applied to HTML elements using the background attribute or CSS.

Background Color

        <div style="background-color: lightblue;">
            <h2>This div has a light blue background.</h2>
            <p>This is some text inside the div.</p>
        </div>

This div has a light blue background.

This is some text inside the div.

Background Image

        <div style="background-image: url('background.jpg'); background-size: cover;">
            <h2 style="color: white;">This div has a background image.</h2>
            <p style="color: white;">This is some text inside the div.</p>
        </div>

This div has a background image.

This is some text inside the div.

Background Gradient

        <div style="background: linear-gradient(to right, red, yellow);">
            <h2 style="color: white;">This div has a background gradient.</h2>
            <p style="color: white;">This is some text inside the div.</p>
        </div>

This div has a background gradient.

This is some text inside the div.

at
Labels: