CSS Background

The CSS background properties are used to define background behavior OR effects for an HTML elements. The HTML element can have multiple background properties, and you can define value for them according to our requirements.

CSS Background Property List

You can see that the list of all important CSS background properties below:

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

CSS background-color

The background-color is used to define background color of an HTML element or a group of HTML elements.

Example of CSS background-color


Hello! This is Text Paragraph with background color.

CSS background-image

The CSS background-image property is used to set an image in background of HTML elements. Just pass the image path for accessing image in background;

By default, the image is repeated so it covers the entire element.

Example of CSS background-image

CSS background-repeat

The CSS background-repeat property is used to repeat an image of both horizontally and vertically direction by default. Basically, the CSS background-repeat property is always used along with background-image.

Suppose, you are using an image in the background, which size of image is required for that element BUT image repetition property is able to full-fill the requirement of element.

Example of CSS background-repeat

The CSS background-repeat in repeat-x:

The CSS background-repeat in repeat-y:

The CSS background-repeat: no-repeat

The CSS background-repeat property showing the background image only once, if you don't want to repeat background image, then use the no-repeat property of an element:

Example of background-repeat: no-repeat

CSS background-position

The CSS background-position property is used to define the position of the background image.

  • It is also used along to define the exact background-image location, means that which position you want to start image and where you want to ends.
  • To define background-position value use any length unit like px, em, cs, vw OR direction unit like top, left, right, bottom.
  • The value for background-position will be start from the top of in clock-wise direction.

Example of CSS background-position

Suppose, if you want the background image in right and top then:

CSS background-attachment

The CSS background-attachment used to define whether the background image should scroll OR be fixed.

Example of CSS background-attachment

Example of CSS background-attachment: scroll

CSS background

The CSS background is the shortest form to represent CSS background property, i.e. this is all in one can define all background property in this. It is the most preferable property of background.

Example of CSS background

Email Us: advertise@gdatamart.com

Donate Us: Support to GDATAMART

© 2023 GDATAMART.COM (All Rights Reserved)