Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 4
Heids

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!

Edited by erich
retag

Share this post


Link to post

Recommended Posts

  • 4

#site { overflow-x: hidden; }

You're welcome :)

Edited by cirmiz

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

Share this post


Link to post
  • 2

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

Edited by kale

Share this post


Link to post
  • 1
Posted (edited)

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

Edited by AskQuesty

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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;

Edited by cirmiz

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

Share this post


Link to post
  • 0

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?

Edited by cenk

Share this post


Link to post
  • 0

@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

Edited by cirmiz
Simplify, remove idea that apparently doesn’t work

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

Share this post


Link to post
  • 0

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

Edited by cenk

Share this post


Link to post
  • 0

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.

Edited by kale

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

#site { overflow-x: hidden; }
Edited by kale

Share this post


Link to post
  • 0

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>

Share this post


Link to post
  • 0

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

Edited by kale

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Edited by kale

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...