CSS Background Generator

This CSS background generator will output all aspect of background css codes such as background-attachment, background-color, background-image, background-position and background-repeat. You can preview the exact position of your background image and copy the code to your usage. Enjoy!

Preview:

Value:

Color Type:
Color Value:

Image name:

Position:

Value:

Generated CSS:

About CSS Background

The background of any page or element plays a crucial role in setting the theme of the content within it as well as shifting the focus to or highlighting the foreground. Choosing the right background depends on a host of factors. The CSS background has a number of properties that can be easily modified for a page or element.

Properties of CSS Background

There are five properties of CSS background that can be utilized and modified for the entire page or just specific elements in the page.

      Color
      Image
      Position
      Repeat
      Attachment

CSS Background Color

The background-color attribute can be specified according to hexadecimal (hex color code) value, RGB (red, green, blue) value or by the color name where available. The following examples set the background color for a page and various elements according to a hexadecimal value (#f5f5f5).

Code For Color

OR

OR

OR

CSS Background Image

The background-image attribute allows for an image to be used as the background for a page or element. It is important to choose the image carefully so that it does not hamper the visibility of the foreground, particularly any text.

Code for Image

CSS Background Position

The background-position attribute determines the location of the background image. If the image is being repeated (also referred to as tiled) then the defined location will be the starting point. It is usually defined according to words (example ‘top right’) or pixels (example ‘200px 160px’).

Code for Position

OR

CSS Background Repeat

The background-repeat attribute allows for the axis along which the image is repeated to be defined, or for repeat to be stopped altogether. By default the background image is repeated on both the horizontal and vertical axes.

Code for Repeat

OR TO REPEAT ALONG THE X-AXIS ONLY

CSS Background Attachment

The background-attachment attribute determines whether the image is fixed or scrolls when the user scrolls up or down a page. By default the image scrolls along with the content. The attachment property may not be supported by all versions of different browsers.

Values for the background-attachment attribute include:

  • Scroll
  • Fixed
  • Local
  • Initial
  • Inherit

Code for Attachment