@codeswithpankaj

CSS Backgrounds

Welcome to the CSS Backgrounds tutorial on codeswithpankaj.com. In this tutorial, we will explore various CSS background properties, including background-color, background-image, background-repeat, background-position, background-size, and background-attachment.

CSS Background Properties

1. background-color

The background-color property sets the background color of an element.

Example:

body {
    background-color: lightblue;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Background Color - codeswithpankaj.com</title>
    <style>
        body {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph with a light blue background.</p>
</body>
</html>

2. background-image

The background-image property sets an image as the background of an element.

Example:

body {
    background-image: url('background.jpg');
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Background Image - codeswithpankaj.com</title>
    <style>
        body {
            background-image: url('background.jpg');
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph with a background image.</p>
</body>
</html>

3. background-repeat

The background-repeat property specifies how the background image is repeated. It can take the following values:

  • repeat (default): The background image is repeated both vertically and horizontally.

  • repeat-x: The background image is repeated horizontally only.

  • repeat-y: The background image is repeated vertically only.

  • no-repeat: The background image is not repeated.

Example:

body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Background Repeat - codeswithpankaj.com</title>
    <style>
        body {
            background-image: url('background.jpg');
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph with a non-repeating background image.</p>
</body>
</html>

4. background-position

The background-position property sets the starting position of the background image. It can take values like left, right, center, top, bottom, or specific pixel or percentage values.

Example:

body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-position: center;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Background Position - codeswithpankaj.com</title>
    <style>
        body {
            background-image: url('background.jpg');
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph with a centered background image.</p>
</body>
</html>

5. background-size

The background-size property specifies the size of the background image. It can take values like auto, cover, contain, or specific width and height values.

  • auto: Default value. The background image is displayed at its original size.

  • cover: The background image is scaled to cover the entire container.

  • contain: The background image is scaled to fit within the container.

Example:

body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Background Size - codeswithpankaj.com</title>
    <style>
        body {
            background-image: url('background.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph with a background image that covers the entire container.</p>
</body>
</html>

6. background-attachment

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. It can take the following values:

  • scroll (default): The background image scrolls with the page.

  • fixed: The background image is fixed in the viewport.

  • local: The background image scrolls with the element's content.

Example:

body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Background Attachment - codeswithpankaj.com</title>
    <style>
        body {
            background-image: url('background.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph with a fixed background image.</p>
</body>
</html>

Conclusion

CSS background properties allow you to control the background color, image, and behavior of HTML elements. By mastering these properties, you can create visually appealing web pages with customized backgrounds. Stay tuned to codeswithpankaj.com for more tutorials and web development tips!

PreviousCSS ColorsNextCSS Borders

Last updated