Background Properties

CSS Hero allows you to get full control on an element’s background properties:

Background Properties

Background Properties

Here’s the list of all CSS properties inside this panel, remember to slide up and down with mouse’s Scroll wheel on the CSS Hero interface to see all the proprieties sections:


The Academic Definition:

The background-color define the background color of an element (class, id, h1 etc…).
The background of an element is the total size of the element, including the padding area and or its border. Remember that the margin is not included in the background.


Click on the the color to enable the Color Picker tool. Choose your color then click again on the color to deactivate the Color Picker.

Click on color to enable the color picker panel

Click on color to enable the color picker panel

CSS Hero Cross-app color picking (only on Chrome)

Chrome users will notice a small round icon behind each color picker input field, by clicking it will fire Chrome’s native color picker window that will allow extra color-picking features such as cross app color picking (Photoshop -> CSS Hero) by simply using his lens option.


The Academic Definition:

The background-image property sets one or more background images for your element.
As seen above, the background of an element is the total size of the element, including padding and border (but not the margin).
Generally, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Adding a background image

Click on the Choose Image button to add a background image

Click on the Choose Image button to add a background image

Choose your image uploading in your wordpress website

Choose an image to upload

Once the image has been uploaded click the use as background button

Insert the background image in wordpress twenty twelve

Insert the background image

Now the image has been set as background, now feel free to play with background-position, background-size to arrange it and fit your needs.

Note: Once uploaded your image/pattern in the background, you will see the url path into your background image input area just in case you may need to change it manually.

Use default gradients or build a new fade in the background-image

Click on the arrow in the right to see your select list. You can see some fade effect in the list like B&W, Radial, User defined 0 etc..

A wide set of pre-built gradients are available

A wide set of pre-built gradients are available


Create a Fade for the background (gradient effect):

Start by clicking on Gradient button.

In this panel you can choose 2 colors. One on the left and one on the right of the panel. you are be able to setup also the orientation of gradient. Remember with CSS hero you’ll see in live what you are doing on your website.

Easily build CSS linear gradients

Easily build CSS linear gradients

Once you have finished to choose the fade click on the save button in the bottom of your browser.

Useful Tips:

Once you have created a new fade, you’ll see in your select list, and in each background elements.
Just work on your fantasy and save your works everytime you want.

Recommendations: ALT dude! Older ie browser doesn’t see this fade. So select a background color to fix this ie bug.


The Academic Definition:

The background-repeat property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

Click on the Background Repeat Arrow in the right to enable the selection menu. You’ll find the 4 state available Repeat (generally default), No Repeat, Repeat X, Repeat Y.


The Academic Definition:

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.


The Academic Definition:

The background-size property specifies the size of the background images. The default value is auto. Remember that with CSS Hero you can direct input your the syntax, like:

background-size: length | percentage | cover | contain;

and see the live effect on your browser.


The Academic Definition:

The background-position property sets the starting position of a background image.

In this Select Menu who can select all the presets state. As mentioned above you have total control of the in the input area, comply with the CSS syntax rules.

CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.


Become a CSS Hero affiliate and earn 40% on each sale right now. Spread the CSS Hero word and share the wealth with us!
Start Earning →

Follow the Hero