Karma Full Page Background – Semi Transparent Content

This tutorial describes how to customize the design of Karma WordPress Theme to include a full page background image with a semi-transparent content area of the website.

Custom CSS

The design effect will be achieved with some Custom CSS code. Simply grab the code below and modify to suit your needs. Add this CSS code to the “Custom CSS” section of Karma’s Site Options Panel: Appearance > Site Options > Custom CSS

/* define the background image */
body { background: url(....url to image goes here.....) !important; }
/* remove solid color from content-area */
#main, #wrapper { background-color: transparent !important; background-image: none !important; }
/* add semi-transprent effect to content-area */
#main { background: rgba(255,255,255,0.7) !important; }
/* extras */
#footer-top { display: none; }