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

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


Heids

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

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

Link to comment

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

Archived

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


×
×
  • Create New...