Header width same size as the container

[biobulle]

Hello ! ( I’m not english, so excuse me if i’m not very clear in what i’m writing)

I would like to make a the whole one page website in a container, so that my background “wraps” around my content(like a wreath).

For that I was using different tips i found on the older forum.

Instead of making a boxed website, I used one section and multiple rows, so that my background was responsive.

Then for the header (logo and navigation) I used this code to take away the space between content and header

.page .masthead {
left: 0;
position: absolute;
right: 0;
top: 0;
}

This code to make the header transparent

.x-topbar, .x-navbar, .x-logobar {
background-color: transparent !important;

and this one to change it’s position (different on mobile because it didn’t work)

@media (min-width:979px) {
.x-brand img {
width: 300px ;
padding-top: 0px;
margin-top: 200px ;
margin-bottom: 0px;
}

@media (max-width:767px) {

.x-brand img {
width: 100px ;
padding-top: 0px;
margin-top: 70px ;
margin-bottom: 0px;
}

I set a similar marging for the section. It worked, but was weird on mobile, and I often had to re-configure the section marging.

I upgraded my licence from x to “pro”. My header returned to it’s normal form. I tried to make a header in the header builder. It’s really nice to use, but I can’t figure out how to fix the width and to delete the space between the content and the header.

Maybe it’s simply impossible to do ?

Thanks for helping !

[friech]

Hi There,

Thank you for writing in, please provide us the site URL so we can take a closer look.

That design seems to be feasible with the Boxed layout please set your site as Boxed layout first and set your background-image under PRO > Launch > Theme Options > Layout and Design and lets see what we can do.

Cheers!