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

  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

This worked for me on the Bedford template but instead of "#site" I had to use "#siteWrapper", there was no "#site" when I inspected the site code....with my browser..if that makes any sense. Thanks for the help!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

I'm so sorry but I don't know much about HTML. Could anyone please give me the complete code to be able to do the same treatment on making the color background stretch out to full width like the main person asking this question.

Share this post


Link to post
  • 0

Hi all, I love the look of the full width color blocks used in http://blussh.com.au/about by @Heids, is there a way to do this without being on Developer Mode?

The area I really want to target is the Content Header, or it might be the #page-body-header.

I am pretty beginner when it comes to code, is there an easy way to do this in the FIVE template? @cirmiz @kale

Any help is appreciated :)


Freelance graphic design, with a pretty basic understanding of code, but a craving for things to look pretty and work perfectly. This gets me in trouble! Visit my website to get in contact: www.januarymade.co.nz :)

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