WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Backgrounds



CSS background attributes are used to define the background of HTML elements.

CSS attributes define background effects:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background Color

The background-color attribute defines the background color of the element.

The background color of the page is used in the selector of the body:

Example

body {
    background-color: #6600FF;
}
Try it yourself »

In CSS, color values are usually defined in the following way:

  • Hex-e.g. "# ff0000"
  • RGB-eg: "rgb (255,0,0)"
  • Color name-e.g. "red"

In the following example, h1, p, and div elements have different background colors:

Example

h1 {
    background-color: #284370;
}

div {
    background-color: #bc6a32;
}

p {
    background-color: #97a033;
}
Try it yourself »

Background Image

The background-image attribute describes the background image of the element.

By default, the background image is tiled and repeated to cover the entire element entity.

Example of page background image settings:

The background-image for a page can be set look like this:

Example

body {
    background-image: url("architecture-structures-cars.jpg");
}
Try it yourself »

Here is an example of a bad text and background image combination. Text is not readable:

Example

body {
    background-image: url("architecture-structures-cars.jpg");
}
Try it yourself »

Background image-tile horizontally or vertically

By default, the background-image property is tiled horizontally or vertically on the page.

Some images will look very uncoordinated if they are tiled horizontally and vertically, as shown below

Example

body {
    background-image: url("architecture-structures-cars.jpg");
}
Try it yourself »

If the image is tiled only horizontally (repeat-x), the page background is better:

Example

body {
    background-image: url("architecture-structures-cars.jpg");
    background-repeat: repeat-x;
}
Try it yourself »

Background Image - Set position and no-repeat

Showing the background-image just once is additionally determined by the background-repeat property:

Example

body {
    background-image: url("architecture-structures-cars.jpg");
    background-repeat: no-repeat;
}
Try it yourself »

In the above example, the background image and text are displayed in the same position. In order to make the page layout more reasonable and not affect the reading of the text, we can change the position of the image.

You can use the background-position property to change the position of the image in the background:

Example

body {
    background-image: url("architecture-structures-cars.jpg");
    background-repeat: no-repeat;
    background-position: right top;
}
Try it yourself »

Background Image - Fixed position

To indicate that the background-image ought to be settled (won't look with whatever remains of the page), utilize the background-attachment property:

Example

body {
    background-image: url("architecture-structures-cars.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}
Try it yourself »

Background - Shorthand property

In the above example, we can see that the background color of the page is controlled by many attributes.

To simplify the code of these attributes, we can combine these attributes in the same attribute.

The shorthand property for background color is "background":

Example

body {
    background: #ffffff url("architecture-structures-cars.jpg") no-repeat right top;
}
Try it yourself »