Jump to content

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

Recommended Posts

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!

Link to comment
  • Replies 32
  • Created
  • Last Reply

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

Self learner when it comes to web design. I fancy creativity and strive to engage in and learn more about the entertainment industry -- which my website/company is based upon.

Link to comment

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?

Link to comment

@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:


Bah, tried now, it isn’t working.

I think it can be done with JavaScript like:

var mytext = "<div id="Bio"><div id="BioWrapper">";

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

alt text

Mostly graphic design but also a bit of coding (html, css, js )

Link to comment

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;}

Link to comment

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>

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.

Link to comment
  • 3 weeks later...

@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.

Link to comment

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.

Link to comment

@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>

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%

Link to comment

@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).

Link to comment
  • 4 weeks later...


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.