www.webdeveloper.com
Results 1 to 6 of 6

Thread: background images for different screen resolutions

  1. #1
    Join Date
    Jul 2006
    Posts
    110

    background images for different screen resolutions

    Hello, I have been asked to build a website which will have a large background image. I know how to do this but before I get started I still struggle a bit with different screen resolutions. My question in particular is what is the best size of image to use for such a website. Here is a link to a site I like very much for an example. http://www.hagit-tassa.com/

    At this point I will not be doing the site as flash. Thanks for the help in advance.

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    You should be able to specify just one parameter of the background-image in percent and the image will re-size not only on different default resolutions but also if the client manually re-size up-or-down their browser viewport.

    I've done this before. I don't recall now if there was a javascript involved or not, but if you encounter problems post back and I'll try to find the example I did. Just remember that you must declare either the weight or the height of the image that will appear in the constrained container, and this be image must be stated in percent (not pixels, etc.)

  3. #3
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    If your image is blurred like the background in the example you posted then WebJoel is correct - just make the img size be 100% width, but I think this has to be done in a IMG tag, not part of a CSS background-image attribute.

    <div>
    <img scr='bck.jpg' style=position:absolute;width:100%' />
    </div>

    Should do it if you place this inside a DIV (note: The 'position:absolute' on the IMG tag is important as it is prevents the IMG from pushing the content down below the image) .

    To show content on top of the img just place another div inside it and add a Z-Index value so the first part of the content is not hidden behind the img

    <div>
    <img scr='bck.jpg' style='position:absolute;width:100%' />
    <div style='z-index:1'>This is Content</div>
    </div>

  4. #4
    Join Date
    Jul 2006
    Posts
    110

    body background images

    I had decided not to use the background image but now I am trying to figure it out again. I have the image in place and it seems to be adjusting width wise as I wanted but some of my content is not showing. You will see here just the navigation and the left column are visible. I tried to add a z-index of 10 to the container but it didn't do anything. Here is my code and link if you wouldn't mind helping again that would be wonderful, thankyou.

    http://www.catfishwebcreations.com/background/index.php

    html
    HTML Code:
    </head>
    <body>
    <div>
    <img src="images/pitt_lake_with_cresent_moon__&_flood.jpg" style="position:absolute;width:100&#37;;height:661;>
    <div style="z-index:1">This is Content</div> 
    </div>
    
    <div id="navigation">
    <div class="menu">
    <?php include("drop_menu.php"); ?> 
    </div>
    </div>
    <div id="container">
    and then of course the rest of it
    CSS

    Code:
    /* CSS Document */
    html {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    body{
    	margin: 0px;
    	padding: 0px;
    	font-size:13px;
    	color: #000;	
    	background-color: #c37c8a;
    }
    
    #container{
    	width:900px;
    	margin:0 auto;
    	background-color: #f5f5dc;
    	border:1px solid #666;
    	border-top:none;
    }
    Last edited by catfish; 06-04-2011 at 01:18 PM. Reason: changed the code

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    It's NOT the screen resolution that matters. It is the browser's viewport size at any resolution that matters. Unless you implement CSS 3, which is not fully supported yet, you'll have to use code like for this 100&#37; Background Image.

    Optional JQuery One

  6. #6
    Join Date
    Jul 2006
    Posts
    110

    [solved]

    Thankyou for your reply. I seem to have it working finally. Thought I would share so here is the code now

    HTML Code:
    </head>
    <body>
    <div>
    <img src="images/pitt_lake_with_cresent_moon__&_flood.jpg" style="position:absolute;width:100%;height:661;">
    <div style="z-index:1">This is Content</div> 
    </div>
    
    <div id="navigation">
    and the rest

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles