Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Senior Member kade119's Avatar
    Join Date
    Feb 2007
    Location
    USA
    Posts
    532
    Member #
    14888
    Liked
    1 times
    What would be the best method to implement a fullscreen background that is resized based on the resolution/browser size?

    would a fluid css layout be best... i just know when i do it w/ css - and move the browser in so it's more vertical.. the background image doesn't extend to the bottom...

    like so

    HTML Code:
    #background {
        z-index:-6;
        position:absolute; 
        top:0; 
        left:0; 
        width:100%; 
        height:100%;
    
    
    
     <div id="background">
    <img src="graphics/bg-1.jpg" width="100%"alt="crowd">
    
    </div>
    }
    or with javascript?

    thanks

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    The way you described is one of the ``best''. There are ways with Javascript, too, particularly involving the canvas element.

    However, the short answer is, you don't. It's a bad idea. Background images that need to be full screen are usually bad background images. At least if their full-screen-ness can't be achieved by using background repetition via CSS.

  4. #3
    Senior Member kade119's Avatar
    Join Date
    Feb 2007
    Location
    USA
    Posts
    532
    Member #
    14888
    Liked
    1 times
    well if they client demands a full screen background image.. well its sortof a must - but you do believe that the css route is one of the better ways to do this.. even over js, right?

    The only thing about doing it w/ css - is that if i move the browser in horizontally so it's a very vertical browser, it add's a lot of white space to the bottom, anyway around this?

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Can we see what you're trying to do? It really depends on the image.

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    If you want something "full screen" you're best off starting with an image that's 3000 x 2000 or thereabouts (making sure the object of interest is in the center 1600px of the image) and cropping it for smaller resolutions.

  7. #6
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Here's a full-screen background image we recently implemented in a client design:

    http://www.deadoro.com/

    It's not a photo, but a pair of curvy graphics - one top and one bottom - that frame the site.


Remove Ads

Posting Permissions

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

Search tags for this page

full-screen background in fluid

,

fullscreen background image

,

html background image full screen

Click on a term to search for related topics.
All times are GMT -6. The time now is 11:59 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com