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

Heids · March 26, 2013

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!

chrisschilling · April 25, 2013

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?

kale · April 25, 2013

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

#site { overflow-x: hidden; }

Heids · March 29, 2013

Thanks! Worked with !important at the end :)

chrisschilling · May 22, 2013

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

JanuaryMade1570048198 · June 1, 2016

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

JAD · March 30, 2013

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

chrisschilling · May 22, 2013

Anyone have any ideas for this? @kale

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

Question

Heids

Link to comment

32 answers to this question

Recommended Posts

chrisschilling

Link to comment

kale

Link to comment

Heids

Link to comment

chrisschilling

Link to comment

JanuaryMade1570048198

Link to comment

JAD

Link to comment

chrisschilling

Link to comment

Archived

Support

Community

Developers

Resources