Is there any way to make a background color stretch out to full width of browser?

I am trying to achieve a full width background color behind a code block on my website.

The code block has two divs - one for the background color, and one for the content.The CSS I am using at the moment is as follows:

#Bio {
 background-color: #e5e5e5;
 margin-left: -600px;
 margin-right: -600px;
}

#BioWrapper {
 margin: 0 auto;
 padding: 40px 600px;
}    

So basically I am playing around with margins and padding to get the effect, but it then creates extra space to the right, causing unwanted scrolling.

This is the page I am working on: http://blussh.com.au/about/The grey area with the heading 'heids' is where I am trying to achieve this full width background color.

I am hoping there is an easy fix to my CSS - can anyone help?Thank you!

#site { overflow-x: hidden; }

You're welcome :)

Thanks! Worked with !important at the end :)

Could the same css be used if I wanted to achieve the same effect with an image instead of a background color?

Yes is exactly the same.

set your background image like this

Bio { background-image:(your image url)}

add a #

you may also need this line

background-position:center;

I want to do the same thing. I tried it but first of all, I have the same extra space problem on the right.

I added

site { overflow-x: hidden !important;}

but it didn't solve the problem.

My second problem is that by adding a div tag into my html, I have to write the content of that "Bio" section also with html. Is there a way to create a customized div like that but still using squarespace tools to add gallery/text and other conent inside?

@cenk To wrap Squarespace content do like this, start one Code Block and type

 <div id="Bio">
<div id="BioWrapper">

Then inserts normal Squarespace blocks, at the end insert another Code Block to close your divs:

</div></div>

Bah, tried now, it isn’t working.

I think it can be done with JavaScript like:

var mytext = "<div id="Bio"><div id="BioWrapper">";
document.write(mytext);

But at the moment any JavaScript I write in a Code Block is stripped into pieces, I musk ask why.

Thanks a lot, cirmiz for your help. I hope someone can figure out how to do this.

I couldn't still fix the extra space on the right side of my page too.

Is everything ok with the code below?

#site { overflow-x: hidden !important;}

post a link to your site, and i will have a look

I wanted to achieve this effect using the 'Five' template -- so after a bunch of experimenting, I believe I've figured it out. This is what I did:

First, in 'Style Mode' - locate 'Sizes and Values' > 'Site Width' and set it to 80% - this can be adjusted to your preference - it acts as margins on the left and right of your content.

Next, I created the two div's, one to act as the background, the other to hold the content. I added this to my custom CSS:

.fullWidthSectionBG { 
 background: pink;
 margin-left: -1600px;
 margin-right: -1600px;
}

.fullWidthSection { padding-right: 1600px; margin-left: 1600px; }

Lastly, in order to remove the scroll bar, I added the overflow CSS -- I had to add "x" and "y", as I found without "y", when you reduced the site and the mobile kicked in, it produced a double scrollbar effect (not sure why).

#page-body-wrapper {
 overflow-x: hidden;
 overflow-y: hidden;
}

This should allow you to add a max-width, so the site doesn't stretch to infinity, and adds some padding.

#page-body { max-width: 1200px; padding: 0px 50px 0px 50px; }    

To add the section to the actual site, I used a 'Markdown Box' and put this in:

<div class="fullWidthSectionBG">
<div class="fullWidthSection">
<p>Content goes here</p>
</div>
</div>

It seems to work fine - I just looked at it in IE8 and it looks fine. I plan on implementing it on a site I'm working on, so if I find any snags I'll update this answer.

@kale can you see the issue of why on a mobile device the full width background extends way past the site width on the right hand side of the page. http://www.jobspark.ca/

@Chris S -- Okay I think this should do it. Change this CSS:

#page-body-wrapper {
 overflow-x: hidden;
 overflow-y: hidden;
}

to this CSS:

body { overflow-x:hidden;  }

That should not affect your search box. Otherwise I'd say to use #site -- but because you have that search box that is "outside" of #site, it disappears, so using body seems to work.

@kale doesn't quite seem to do the trick. Any other ideas??

body { overflow-x: hidden;}

What's not working? Looking at your site in Chrome, the background is 100% width, with no scroll bars, and when resized to mobile, it still looks great.

On my Iphone the light grey background stretches way off screen on the right hand side. It was fine with the code you provided me before but then the search bar was gone.

I see what you're saying -- unfortunately, I'm all out of ideas... I think you're going to have to decide which you'd rather have, the full width background or the search bar in the header.

If you moved the search back "into" the site, you could have both, but the search would have to be below that header image (on the white background).

If I think of anything I'll let you know.

Not a problem at all kale you have been a huge help! what was that css i could insert if I decided I was fine with getting rid of the search bar?

Remove the body { overflow-x: hidden; } and replace it with this:

#site { overflow-x: hidden; }

One last question... If I am wanting to make two columns in that background do I need to make two new divs and place them within the div class or what. Can you show me where about to place the divs among your code

<div class="fullWidthSectionBG">
<div class="fullWidthSection">
<p>Content goes here</p>
</div>
</div>

@Chris S Yes, it would look like this:

<div class="fullWidthSectionBG">
<div class="fullWidthSection">
<div class="myLeftColumn">My Left Stuff goes here</div>
<div class="myRightColumn">My Right Stuff goes here</div>
</div>
</div>

And then in your custom CSS:

.myLeftColumn { width: 50%; float: left; }
.myRightColumn { width: 50%; float: left; }

That would make two columns that are both 50% wide and float left. If you add padding etc. you would have to subtract that from the 50%

@kale ok so that work but only problem is that the background color doesn't stretch down along with the text www.jobspark.ca

Below is my css

.fullWidthSectionBG { background: #f5f5f5; border-bottom: solid 1px #ddd; border-top: solid 1px #ddd; margin-left: -1600px; margin-right: -1600px; padding-top:20px;}

.fullWidthSection { padding-right: 1600px; margin-left: 1600px; }

@Chris S - I'm not sure why it's not working... try adding this after the two inner column divs (but before the two closing divs for the full width background :

[div class="clearer></div]

But change the two square brackets to < and > (the comments strip out the code if I put it how it should be).

I am trying to extend my background image so that it remains at full width. Can somone help me with this? Thanks!www.jobspark.ca

Anyone have any ideas for this? @kale