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:

Background Attachment:

Value:

Scroll Fixed

Background Color:

Color Type:

Transparent hex code

Color Value:

Background Image:

Image name:

Smiley Flower Car

Background Position:

Position:

Left Top Left Center Left Bottom Right Top Right Center Right Bottom Center Top Center Center Center Bottom 50% 50% 25% 75% 10px 80px 50px 50px initial Custom X-Axis & Y-Axis

Background Repeat:

Value:

No Repeat Repeat Repeat-X Repeat-Y

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

body { background-color: #f5f5f5;}

OR

h1 { background-color: #f5f5f5;}

OR

p {background-color: #f5f5f5;}

OR

div { background-color: #f5f5f5;}

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

body { background-image:url("picture.jpg");}

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

body { background-position: right top; }

OR

body{ background-position: 200px 160px; }

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

body { background-repeat: no-repeat; }

OR TO REPEAT ALONG THE X-AXIS ONLY

body { background-repeat: repeat-x; }

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

body { background-attachment: fixed; }