Quick Tip: Component Background Options in Umbraco 7.6.4+ ready themes

Since Source 2.0 we've always had a background colour option in one form or another on advanced page components. With our updates for Umbraco 7.6.4 and beyond we've pushed this even further.

We've not only introduced the background colour options to standard components when they are used on an advanced page or post but we have also introduced the all new background image option that includes settings for position, repeating options and size to all component types when featured on an advanced page.

Background Colour on Standard Components

When creating or editing a standard component type underneath an advanced page or blog post go to the tab 'Advanced Page Settings' and select a background colour then hit save. 

Background Image Options on all Components

When you create any component underneath an advanced page or post you will now be able to assign a background image along with options to decide how it positioned, whether it repeats and its size.

1. Create a Component

This can be any component (Standard or Advanced) as long as you are using it on an Advanced Page or Blog Post.

2. Component Settings

Go to the "Component Settings" tab (or "Advanced Components Settings" tab for Standard Components) and click on the Background Image media picker.

3. Choose a Background Image

The media library slide out panel will appear, you should either upload a new image or locate an existing one. Select your chosen image and then click “Submit” in the bottom right.

4. Background Style & Position

Using the two dropdown boxes provided you should choose the background style and position you would like to use. In our example we want to repeat a pattern image across the bottom of the component to create a jagged (zig-zag) border effect that will bleed into the component below.

5. Final Result

Switch to the front end view of the website to see the final effect.

Further reading

Learn more about how these background properties work from W3C Schools.