SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help With Background Image.

    I am currently making a website of fixed width(984px). Now I want to use a background image for header which exceeds 984 px. Is there a way by which i can use wider background image?


    Thanks in Advance.

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the bacogrojd iw bigger than the element it is placed on, it will overflow. if yo want it to scale, then you must place it inside the element (as a child element) and give it a width and height of 100%. With CSS3 you can set a background image size, but this does not work on IE8 and lower

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You could place a separate div above the main content that is wider than the main section.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,270
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sanchitgupta View Post
    I am currently making a website of fixed width(984px). Now I want to use a background image for header which exceeds 984 px. Is there a way by which i can use wider background image?


    Thanks in Advance.
    I think you may need to clarify the question a little.?

    You can always use a wider background image in an element because the background is always the width of the actual element and the image will just be clipped at the elements dimensions.

    If you want a bigger element then as Ralph said you will need to make the element bigger or use another element.

    Or if you want to scale a foreground image then you can do as Tommy suggests but that really depends on the image as some images do not scale nicely.

    If you want a header that repeats all along the top of the viewport you could apply it to the body element and repeat it on the x-axis.

    It all depends on your exact requirements


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
  •