SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image positioning in CSS

    Hi people,
    Am learning CSS for the first time.
    How can I position a background image so that it starts at the top center of my web page? When I position it leaves a gap of like 10px at the top. I want to eliminate the gap. Please help.

    Thanks,
    Muyeshi.

  2. #2
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Peterborough, Ontario, Canada
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.w3schools.com/css/css_background.asp

    It has all the background information you need. Look specifically at background-position.

    If you're still having trouble butting it up against the top - have your <body> tag with margins of 0 (it will move everything up and to the left a few pixels).

    E.G. <body style="margin: 0px;">
    Have I helped you? You could help me.
    Like my business on facebook!
    Text message polls with real-time, live results.

  3. #3
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (obviously have that margin:0 in the stylesheet rather than inline though...)
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  4. #4
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Peterborough, Ontario, Canada
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tailslide View Post
    (obviously have that margin:0 in the stylesheet rather than inline though...)
    I just showed inline for ease - obviously not a difficult process moving it to your stylesheet. But if he's already got background positioning and he's having trouble it's possible he hasn't set his margins.
    Have I helped you? You could help me.
    Like my business on facebook!
    Text message polls with real-time, live results.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jeffvdovjak View Post
    I just showed inline for ease - obviously not a difficult process moving it to your stylesheet. But if he's already got background positioning and he's having trouble it's possible he hasn't set his margins.
    Thank you. It worked.

  6. #6
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Peterborough, Ontario, Canada
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem! But I agree with Tailslide - you would want to put it in your external stylesheet so if you make changes site-wide you won't have to go through each of the pages and edit them manually. If you don't know how to do it - here's a five minute lesson that will teach you how: http://www.tizag.com/cssT/external.php
    Have I helped you? You could help me.
    Like my business on facebook!
    Text message polls with real-time, live results.

  7. #7
    SitePoint Member flover21's Avatar
    Join Date
    Feb 2009
    Location
    Prague
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    html, body {margin:0}
    Then insert backimage into centered div which styled {margin:0 auto}


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
  •