Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Thanked 0 Times in 0 Posts

    Extend background colour 100%

    Hi folks,

    The problem is a little more complicated than the title suggests. I hope that I can adequately explain this tricky css issue. The following Fiddle should help illustrate it.

    I'm looking for the background colour of green and blue to extend fully to the left and right of the page respectively.

    This could easily be achieved by setting a percentage on .green and .blue but there is a complication that makes this solution unsuitable. The two divs are wrapped in a containing div called .inner which has its width fixed to ensure that .green and .blue are always in the centre of the page even if the page zoom setting are changed.

    The actual site I'm working on is a mixture of fixed with divs in places (e.g. the main content area is set to 960px) and also 100% width divs (e.g the footer). I can't figure out how to fix the content but have the different background colours extend to the edges of the page.

    To my mind the div called .full should also have background colours and so I've played around with pseudo elements :before and :after in the hope that I could set the background colour of .full to be both green and blue. This hasn't worked.

    Any suggestions? I'm hoping to avoid using a really long background image.
    Last edited by Bobrooney; 09-25-2013 at 09:24 PM.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts