Custom Background

With a little bit of tweaking and CSS knowledge, we can modify the look of our Duet studio website.

I am using the Associate theme on my Duet studio website but if you noticed my site background, it is a little different from the default background of the theme. The guitars might look familiar to you because I got them from the Rockstar Guitar theme. I just made the image a bit wider so it is not totally covered by the content area and I overwritten the styling of the theme to replace the original background. I will explain in this article how I did it.

Determine Target

Before we can change the background, we need to determine which element to apply the image to. This part is a bit tricky and requires you to dig into the page source. To view the page source, right click on the page and click View Source. From the source code, try to determine where a background color or an image is applied to the body or an element with an id or class of wrap.

Another helpful tool to help you with this task, if you're using Firefox, is an add-on called Firebug. Simply click the Inspect button on Firebug and click an element on your page to inspect.

For the theme I'm using, I have determined we need to style the .associate-gray #wrap and .associate-gray #inner CSS selectors.

Applying Custom Style

Now that we have found the elements to style, let's create the CSS rule to apply the background. Paste the following stylesheet in your page editor:

<style type="text/css">
	.associate-gray #wrap { background: #ddd; }
	.associate-gray #inner { background: url('http://path/to/your/image.jpg') center 150px no-repeat; }
</style>

Make sure to change the text in red with your custom background image, color, the horizontal and vertical position of the image and whether it will repeat or not. When you're done, click the Save Page button to save changes.

Back to Tips & Tricks