SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    positioning a center bg / header

    I have placed a background image for my header and ontop of that background I would like a center image so I placed the following code in header.php file:

    <div id="top-center-bg"></div>

    and then this in the css file:

    #top-center { background: url(images/blue/top-center-bg.png) no-repeat center 10px; width: 960px; height: 500px; }

    The problem is that the center background is now pushing the heading text and images too far down. How can I fix this?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    This isn't enough information to go on. A background image doesn't push anything anywhere, so presumably the "top-center-bg" div is what you mean? We need to see this in context. If that is an extra div in the header, you could set it to position: absolute and add position: relative to the main herder div. Then you'd have to position the new div where you want it. But this is just a guess.

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oops sorry I meant to add the url:

    http://umcwales.com

    I tried adding position: absolute with some variations but I don't think I'm doing it right as nothing comes as it should be

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    If there's a "top-center-bg" div on that page, then I'm a blind monkey's uncle.

    Sorry, I can't find it.

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    sorry again, the id is #top-center

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Why not put that background image on the #container div instead? then you don't need the height on the top-center div.

  7. #7
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    yea, getting to understand it a little more now. I have put it in the container but there are different containers for the top header and the slider, so what if I want that image in the background from the top ( of the header ) to the bottom of the slider?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You could wrap a div around .container and #featured and add the bg image to that.


Bookmarks

Posting Permissions

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