BMR EDUCATION Courses Coding Reference Online Tools Education GPT About Contact Login
Quick Recap Examples Quiz Compiler

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
  1. Background Color (background-color)
  2. Background Image (background-image)
  3. Background Repeat (background-repeat)
  4. Background Size (background-size)
  5. Background Position (background-position)
  6. 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

p {
    background-color: #F0F8FF;
}
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

p {
    background-image: url('background.jpg');
}
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

p {
    background-repeat: no-repeat;
}
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

p {
    background-size: cover;
}
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

p {
    background-position: center top;
}
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

p {
    background:
  url('bg1.jpg') center top no-repeat,
  url('bg2.jpg') center bottom no-repeat;
}
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

Example 1

Example 1 Example 2 Example 3 Example 4 Example 5

Quiz

FEEDBACK

Rating


Message