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!
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
Please support us...
We hope you find CSS3Gen useful.
Like us on Facebook.