Quick Tip: Component Background Options in Umbraco 7.6.4+ ready themes
The following functionality is available in all themes that support Umbraco 7.6.4 and above.
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.