#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    1
    Rep Power
    0

    Newbie: how to extend background bar to screen edge


    I am trying to extend the black background of this Twitter scroller here:

    Code:
    edm73.co.uk
    so that it extends to the left edge of the screen. I need the Twitter logo and scroller/fade to stay where they are but just the black background element to extend the full way across. Have tried tweaking the CSS but nothing really works as desired.
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    your mark-up is a bit of a mess, it can be done simpler. Also if the background extends to the left you wont see your logo "mechanex"

    What you want to do is make a header div with a width of 100% give it a fixed height and a background (with that black gradient)
    Inside that div you can put another div with a fixed width and height
    Code:
    <body>
       <div id="header">
             <div id="twitterlogo"></div>
        </div>
    some css (fill this in yourself with correct values)
    Code:
    #header{height:150px;background:url('sprite.jpg') 0 0 repeat-x}
    #twitterlogo{width 300px;height:150px;float:right;background: url('sprite.jpg') 0 150px no-repeat}
    P.s. you can place the feed and other stuff in that container (#header) make sure you read about "Float" and "Clear"
    Last edited by aeternus; February 5th, 2013 at 07:43 PM.

IMN logo majestic logo threadwatch logo seochat tools logo