Background

Background

The CSS background property is used to specify the element's background effects. It's a shorthand property, which means you can write what would otherwise be numerous CSS properties in only one. The HTML elements are affected by five CSS background properties:

background-position is a CSS property

The background-position parameter is used to specify the background image's initial location. The background image is put in the top-left corner of the webpage by default. The following positions can be set:

  • center
  • top
  • bottom
  • left
  • right

Many backgrounds

Multiple backgrounds can now be layered on top of each other, thanks to CSS3. The first value in the comma-separated list is the top layer, the second value represents the second layer, and the backdrop colour is always the last layer.

  • Background Color

    Used to color the background of the webpage.

  • Background Image

    Used to set an image as the background of the webpage.

  • Background Repeat

    Used to repeat an image on the background of the webpage. An image is repeated horizontally as well as vertically by default. Background repeat is used when we want the image to be repeated in a particular direction only. Background position is used to specify the position of the image.

  • Background Attachment

    This attribute can have either fixed or scroll values. Fixed means when the webpage is scrolled the image won’t move. Scroll means when the webpage is scrolled the image moves.

Example No.1:

<html> <html lang="en-US"> <style> body { background-color: Blue; } </style> </head> <body> <h1>Knowledge2life</h1> <p>Website</p> </body> </html>

OUTPUT:

Knowledge2life

Top Learning Website

Example No.2:

<html> <html lang="en-US"> <style> body { background-color: orange; } </style> </head> <body> <h1>Knowledge2life</h1> <p>Top Learning Website</p> </body> </html>

OUTPUT:

Knowledge2life

Top Learning Website