Hey, you certainly noticed that the website had a new look. I used the wordpress Spacious theme. You can find it here.  This theme is responsive and you can highly customize the header. Basic header consiste of a picture and a menu. It’s look like as this:

Thème origine

This already look great but, I would to overlay the menu on the header image. This post explains how to change the theme in order to have somethink like this:

spacious_sc2

Disable Header image

In the theme customization, just disable the header image.

Updating CSS

So now, the CSS. First I add the background image in ID #header-text-nav-container. The CSS code is:

#header-text-nav-container CSS
#header-text-nav-container {
border-bottom: 1px solid #EAEAEA;
background: url(http://yourimage_url)
no-repeat center center;
background-size: cover;
}

Now you have the image cross the page. The last think to add is to give an oppacity to the backgound image. This improve text lisibility.

#header-text-nav-wrap CSS
#header-text-nav-wrap {
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(255, 255, 255, 0.62);
}

That’s all!

if it can help someone : )

WordPress Spacious theme modification
Tagged on:         

Leave a Reply