Background Image Generator

The  background  CSS property sets one or more background images on an element. The default position of an image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

The  background  shorthand CSS property allows you to define all background style options simultaneously, including color, image, origin, size, and repeat method. In a shorthand property value declaration, any component properties that are not specified will automatically revert to their default values.

Here are the CSS property values that can be used to customized the image:

•  <background-color> 
  • This specifies a color that can be a keyword (eg., green), hexadecimal color (eg., #00b31e), or rgb value (eg., rgb(0, 179, 30)). This defines the background color of an element that serves the same as the  background-color  CSS property.
•  <url()> 
  • This function accepts only a URL string (with or without quotes). Its parameter is an absolute URL, a relative URL, a blob URL, or a data URL (eg., url("sky.gif"), url('../images/cloud.png'), url(https://example.com/images/heaven.jpg)). This specifies the location of the image.
•  <repeat> 
  • This determines the manner in which background images are repeated.
  • A background image can be tiled both horizontally and vertically, or it can be set not to repeat at all.
  • The property allows you to input either a comma-separated list of two repeat-style key terms or a single key term as a shorthand representation for both values.
  • When two values are specified, the first one dictates the horizontal repetition behavior, while the second one determines the vertical behavior.
  • The default value is  repeat repeat .
  • Keyword values:  repeat ,  repeat-x ,  repeat-y ,  space ,  round ,  no-repeat .
•  <attachment> 
  • This determines whether a background image remains fixed within the viewport or scrolls along with its containing element.
  • The default value is  scroll .
  • The attachment CSS property value can be defined using one of the keyword values from the following list:
  •  fixed  – the background is anchored in place, remaining constant in relation to the viewport. Despite the presence of a scrolling mechanism, the background remains stationary, unaffected by the movement of the element.
  •  local  – the background remains stationary in relation to the content of the element. When an element features a scrolling mechanism, its background moves in sync with the content, meaning the area dedicated to background painting and positioning is relative to the element’s scrollable region rather than its border.
  •  scroll  – the background remains fixed in relation to the element itself, ensuring it does not scroll alongside its contents. (It is securely connected to the border of the element.)
•  <position> 
  • It determines the starting position of each background image. The position is determined in relation to the position layer established by the background-origin property.
  • The default value is  top left .
  • Keyword values:  top left ,  top center ,  top right ,  left center ,  center center ,  right center ,  bottom left ,  bottom center ,  bottom right  .
•  <size> 
  • The size determines the dimensions of an element’s background image. The image can remain at its original size, be enlarged, or be adjusted to fit the designated space.
  • Areas not covered by a background image are filled using the background-color property. This background color will be visible through any background images that have transparency or translucency.
  • The default value is  auto .
  • The size CSS property value can be defined using one of the keyword values from the following list:
  •  contain  – it enlarges the image to fit its container as much as possible while ensuring that there is no cropping or distortion. When the container exceeds the size of the image, it will lead to image tiling unless the background-repeat property is defined as no-repeat.
  •  cover  – resizes the image while maintaining its aspect ratio, ensuring it completely fills the container by covering both its height and width without leaving any empty space. When the proportions of the background do not match those of the subject, the image is cropped either vertically or horizontally.
  •  auto  – resizes the background image in the appropriate direction while preserving its original proportions.