How to styled background – easy way

Posted on: September 29, 2024 in CSS , HTML ,

CSS backgrounds define the background effects for elements in a web page. There are several properties related to backgrounds, each offering different customization options, such as setting colors, images, position, repeat options, etc.

Here are the main background-related properties:

1. background-color: Sets the background color of an element.

2. background-image: Sets an image as the background of an element.

3. background-repeat: Specifies if/how a background image will be repeated.

4. background-position: Specifies the position of the background image.

5. background-size: Specifies the size of the background image.

6. background-attachment: Defines if a background image is fixed or scrolls with the page.

7. background (shorthand): A shorthand to set all the background properties in one go.

Example 1: Background Color

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Background Example</title>
    <style>
        body {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <h1>This page has a light blue background.</h1>
</body>
</html>

Example 2: Background Image with No Repeat

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Background Image Example</title>
    <style>
        body {
            background-image: url('your-image.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h1>This page has a background image.</h1>
</body>
</html>

background-color: Sets the background to a specific color (e.g., light blue in Example 1).

background-image: Adds an image as the background.

background-repeat: Prevents the image from repeating (default is to repeat).

background-position: Centers the background image.

background-size: Stretches the image to cover the entire background area.

Note: You can mix and match these properties for more complex background effects.

Share your thoughts Cancel reply

How to Adding CSS to HTML – easy way
Adding CSS to HTML is essential for enhancing the visual…

How to use Selectors in CSS- complete guide
CSS selectors are patterns used to select elements in HTML…

Mastering CSS: A Complete Guide to Styling
A complete CSS tutorial typically covers all aspects of CSS…

What is HTML and How to Start
HTML (HyperText Markup Language) is the standard language for creating…

Learn HTML in easy way
Hypertext Markup Language, or HTML, is the standard markup language…