All of our templates automatically include a color and a logo that floats atop the header section. However, you might want to add a background image to give your site more depth in the header or just more local texture. Here is an example:
This representative's district is on the WA peninsula so the Tacoma bridge is a nice local touch to her site.
Here is how you can do this:
First, you will need the image that you want to use. It will need to be roughly the shape you need it to be. For the header, that's a very low profile - 2000px X 350px might be a good starting point. Load your image and make note of the URL.
To add the image to your header:
- go to website / configuration / advanced
- Click the section for "customize local css files"
- Here, you can add custom css code to include the header bg image you created and loaded earlier.
- Click edit on the custom.css box
- Paste in this sample code:
The above code creates this background effect:
Customize for your site
- top_header is the name of the container (leave as is)
- background:url (change the image url to your image location)
- background-size: (this resizes the image to consume 100% of your page width -- leave as-is likely)
- background-color: (change to your desired hex color)
- opacity: (totally optional)
Click save and refresh your site. If the site doesnt show the changes, be sure to do a hard reset (shift-F5).