SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2008
    Location
    Gloucestershire, UK
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Full Screen Flexible Background Image

    Hello,

    I'm about to start a site which needs a background image to fill the whole screen, and I was just wondering about how to implement it.

    What size image should I use (keeping download times in mind)?

    Should I set the width to 100% in CSS, or would it be best to set the width/height using JavaScript.

    Cheers,

    Jon

  2. #2
    SitePoint Enthusiast Baylisstic's Avatar
    Join Date
    Jul 2010
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I answered a similar question to this just yesterday: http://www.sitepoint.com/forums/showthread.php?t=690706

    See if that helps you out at all.

    Ant

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Ant's suggestions are good ones. I wouldn't recommend using JS to set width/height on anything, and certainly not something as central to your design as your single large BG image.

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2008
    Location
    Gloucestershire, UK
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was thinking that I could do it in CSS by default but try to make it look better using JavaScript, if it's enabled. If I use JavaScript to firstly change the CSS so there is no background image and then create the image element but hide it until it's fully loaded (because it will be a rather large file), as soon as it's ready I can fade it in.

    How does that sound?

    What size (width) image should I be going for?

    Cheers,

    Jon

  5. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    The simple way to accomplish it would be to have the background image in an IMG element within the document, use absolute positioning to make it 0 at the top, left and 100% wide and tall, then use z-index on the content of the site to position it above the image. When you scale the browser window it'll scale because the height and width on a normal image is taken into account... and it'll appear in the background due to the z-index placing all the content above it. It's not the most semantic solution but it's clean, will validate and will give you the precise look you require with absolutely no scripting (it's the best solution that exists to-date).

    Here's an example of it in action: http://www.ringvemedia.com/

  6. #6
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jonpugh114

    hi check these two example if u want to use background like these two sites i will snd u css .
    http://whatstheweather.net/weather/submit
    http://www.seasonfive.com/


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
  •