asked on

How to deal with header and blur background on my website?

Hi,

3 questions for you! :)
I'm a newbie in building my own website <http://www.juraglo.com/>. It's a Canvas Theme on Wordpress. The HTML and CSS have been already slightly customized by a friend on a child theme.

1. I'm struggling with header: I want to put it outside the body of the content when I box-layer the content.

2. I also need the primary navigation to be outside "the box."

3. About the background color of the "box," I want it to be blurry. I found a CSS code

.wrapper {
background-color: url(images/bg-blurry.jpg) no-repeat fixed !important;
}

online but I don't understand what suppose to be this <url(images/bg-blurry.jpg)>? The code doesn't work on the custom CSS.

Any suggestions beside the one that I should go back to a friend to finish customizing? :D

Jason C. Levine

Honestly, go back to your friend. Unless you have a good understanding of HTML, CSS, and some PHP along with knowledge of how WordPress expects a theme to be constructed you are not going to have a pleasant experience.

For 1 and 2, you need to modify the theme to move elements around. Most of this will be in header.php

For 3, that CSS code requires an image to use as the background. The code just calls the image, it doesn't magically make stuff blurry.

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tom Beck

Try this:

Temporarily comment everything out that you have for #wrapper by enclosing it in comment delineators, /*#wrapper {...*/

Then add this definition for #content:

#content {
padding: 40px;
background-color: rgba(240, 241, 245, 0.7);
border-radius: 5px;
}

This will put only the content in a semi-transparent off-white box with rounded corners. The header and navigation will be floating above it on the page background. Footer will be outside the content box as well.

Lempute

ASKER

Genius, you are Genius! :D