Different background in boxed layout

If you look at my site and compare with http://exmo.se you will see that the page-background is different depending on backgrounds in the box.

But I thought about it for a second and it feels like it would be not so possible as the content in the box differs between pages.

Can I use full-wide layout and still show content “in a box”. Does set #Page-Wrapper to a fixed width solve this?

I’ll wait before I try if you have time to answer, otherwise I will test in a bit.

Ok

If you look at my site it’s now in boxed layout. The main background is grey.
I want the grey background to follow the background inside the box.
If you look inside the box you see the menu is black, slider is blue, content is white, footer is black.
I want the page background to be same so not grey but instead black, then blue, then white, then black. So it follows the bgcolor of what is inside the box.

Or if that is not possible.
How can I use the full-width layout and still make the page look like it’s inside a box? I want to limit the content to 917px. Slider is easy but as example force the menu to center on the page and stay within 917px is for me a challenge I haven’t succeeded with yet.

Hope you understand me now.
Look at http://www.exmo.se you will see what’s the end goal.

But then it would not follow the content of the page so when i scroll the menu sticks in the top but the background will then disappear?
And as different pages are in different layouts (heights of content) I would need to have one background per page and recreate them if I alter the content of the page?

I think it’s not possible but I appreciate the help!

If I use the full-width layout how can I change the menu, slider, content, footer to center on page and be maximum 917px wide?
I have played with css to find a solution but I can’t manage to get the menu to center on the page, it sticks on the left side all the time. Haven’t tried body and footer yet but I think I will get same issue there.

Any ideas? Thanks!

I think I got it in place except for my menu.
The menu itself goes to the right side?
and my BG-image is just on to the left side and not center at all.

My custom css looks like this at the moment:

body.layout-full {
    background-color: #ccc
}

.main-navigation {
	background: black
}

body.responsive.layout-full #page-wrapper nav .full-container {
	/* background: blue */
}

.layout-full #main-slider {
    margin: 0 auto;
}

#main {
    margin: 0 auto;
    max-width: 847px
}

.layout-full #colophon {
    background: black;
    padding: 0
}

.layout-full #footer-widgets {
    background: black;
    margin: 0 auto
}

body.responsive.layout-full #page-wrapper #colophon .full-container {
    max-width: 857px;
    padding: 30px
}

/* Vantage Full Width Layout - Adjust Site Width */

/* body.responsive #page-wrapper {
  max-width: 917px;
} */

#page-wrapper {
  padding-top: 0px;
}

/* body{
  background: #000000;
} */

/* Vantage Menu Background Image */

.main-navigation {
  background-image: url('/wp-content/uploads/2014/12/MenuBG.jpg');
  /*background-size: cover;*/
  background-repeat: no-repeat;
  /*float: center;
  margin: 0;*/
}

/* Vantage center align the main menu */

.main-navigation ul li a {
padding-top: 40px;
padding-bottom: 40px
padding-right: 0px !important;
padding-left: 0px !important;
}

.main-navigation ul {
font-size: 0;
text-align: right;
}

.main-navigation ul li {
display: inline-block;
float: none;
font-size: 10px;
}

.main-navigation ul ul li { 
text-align: left;
}

.main-navigation ul li:hover > a {
background: 0 !important;
color: #FFFFFF !important;
}

Except for the menu it worked straight out of the box.
I have modified it accordingly and now it seems to work perfectly!

BIG Thank you!

The menu works fine but I had to limit the width on it.
So now with this code it works just fine.
I’m working on other things now so I might just come back with a new thread :)

.main-navigation {
	background: black;
}

body.responsive.layout-full #page-wrapper nav .full-container {
	background-image: url('/wp-content/uploads/2014/12/MenuBG.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 917px;
}

Follow-up question:
On the other pages where I don’t have the slider the background is something else.
What tag can I use to alter the background where the slider does not exist?

I solved it.
The problem was my bg-image and not something with the theme itself.

Thanks for your quick support!