Jump to content
  • 4

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

Question

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
  • Answers 32
  • Created
  • Last Reply

Recommended Posts

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:

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

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

@Chris S - The problem is that you are using a background image, and it doesn't scale above 100% on Squarespace. Regular images will, which is how you get those full bleed galleries like Momentum, but background images are treated differently.

I have never found a good solution to scale a background image. I've tried numerous CSS hacks and jQuery scripts and none worked, but I didn't really spend a lot of time on it, so it's most likely possible to get a background image scaling the same way regular images do on Squarespace, but I don't know how.

Link to comment

@kale Ok i see that issue that I am having now and it doesn't look like i can fix it easily. I tried the a few hacks and a JQuery script but both did not look right.

Is it possible to show me what I need to do to have just a regular image? This way I could maybe cheat and insert the text into the image using photoshop.

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>
</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%

Link to comment

Hi @Heids, Here's a video tutorial for you on how to edit the background color stretch out to full width on a browser. Hope this helps!

Watch tutorial with the link below

https://www.askquesty.com/squarespace-answers/background-color-stretch-out-to-full-width-of-browser-squarespace-tutorialalt text

Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses.

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

@cirmiz

I'd love to know if you found a solution for wrapping a normal block in an html div wrapper. I've successfully implemented the bioWrapper and css, but I'd love for that color block to wrap an entire chunk of content.

It appears that the code block automatically closes open divs? Is that the case?

Here's a link to the page on my site that i've been experimenting on.

http://mason-hedgecoth.squarespace.com/recent-work-1/

this is what i was hoping to execute:

alt text

Thanks for any and all help!

Link to comment

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

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

Archived

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.