CSS Backgrounds

Used to add background to an element.
A range of properties to control the backgrounds of HTML elements, allowing you to set colors, images, gradients, and more. Let's see some of the properties used in css

Background Color (background-color)
Background Image (background-image)
Background Repeat (background-repeat)
Background Size (background-size)
Background Position (background-position)
Multiple Backgrounds (background)

Example

p {
    background-color: #F0F8FF;
}

Run

Background Color (background-color)

This property sets the background color of an element.
You can use different color representations, such as named colors, hexadecimal values, RGB values, or HSL values.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Background Example 1</title>
  <style>
p {
    background-color: #F0F8FF;
}
  </style>
</head>
<body>
    <p>Background Changed</p>
</body>
</html>

Run

Background Image (background-image)

This property allows you to set an image as the background of an element using a URL to reference the image file.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Background Example 2</title>
  <style>
p {
    background-image: url('background.jpg'); /* add an image */
}
  </style>
</head>
<body>
    <p>Background Changed</p>
</body>
</html>

Run

Background Repeat (background-repeat)

This property defines how the background image should be repeated if it's smaller than the element.
Values include repeat (default), repeat-x (horizontal), repeat-y (vertical), and no-repeat.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Background Example 3</title>
  <style>
p {
    background-image: url('background.jpg'); /* add an image */
    background-repeat: no-repeat;
}
  </style>
</head>
<body>
    <p>Background Changed</p>
</body>
</html>

Run

Background Size (background-size)

This property determines the size of the background image.
You can use lengths, percentages, or special keywords like cover (scales the image to cover the entire element) and contain (scales the image to fit within the element).

Example

<!DOCTYPE html>
<html>
<head>
  <title>Background Example 4</title>
  <style>
p {
    background-image: url('background.jpg'); /* add an image */
    background-size: cover;
}
  </style>
</head>
<body>
    <p>Background Changed</p>
</body>
</html>

Run

Background Position (background-position)

This property sets the starting position of the background image.
You can use keywords like top, bottom, left, right, and combinations like center center.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Background Example 5</title>
  <style>
p {
    background-image: url('background.jpg'); /* add an image */
    background-position: center top;
}
  </style>
</head>
<body>
    <p>Background Changed</p>
</body>
</html>

Run

Multiple Backgrounds (background)

You can layer multiple background images and settings on an element using the background shorthand property.
Each layer is separated by a comma.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Background Example 6</title>
  <style>
p {
    background:
  url('bg1.jpg') center top no-repeat,
  url('bg2.jpg') center bottom no-repeat;
}
  </style>
</head>
<body>
    <p>Background Changed</p>
</body>
</html>

Run

Quick Recap - Topics Covered

Foramt

Description

Example

background-color

Sets the background color of an element.

Run

background-image

Sets an image as the background.

Run

background-repeat

Defines how the background image repeats.

Run

background-size

Determines the size of the background image.

Run

background-position

Sets the starting position of the background image.

Run

background

Combines multiple background properties into one.

Run

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

CSS Backgrounds

Example

Background Color (background-color)

Example

Background Image (background-image)

Example

Background Repeat (background-repeat)

Example

Background Size (background-size)

Example

Background Position (background-position)

Example

Multiple Backgrounds (background)

Example

Quick Recap - Topics Covered

Practice With Examples in Compilers

Example js

Quiz