www.webdeveloper.com
Results 1 to 12 of 12

Thread: Body background image size

  1. #1
    Join Date
    Apr 2007
    Posts
    209

    Body background image size

    Hello, how to do a <body style="background: url(http://www....gif);"> background image where an image fits over the whole background of a web page? I need to use one image and stretch it somehow because of the image so it works in different page resolutions. Repeating doesn't work for this image, only need one.

    Please let me know, thank you very much for your help.

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    You can't resize or stretch a background image but, although I am not fond of the idea, it can be done by using an actual <img> tag stretched to full screen with the contents of the site absolutely positioned over top of this, as can be seen in an example by Stu Nicholls here - view the source to see how it works.

  3. #3
    Join Date
    Apr 2007
    Posts
    209
    Thank you, I can't repeat the same image because it ruins the image when I do so why I need something else. When I right click on that link you gave me to the page I can't view the source. Any other way to view the source of that page? Please let me know, thanx very much.

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Right click works fine for me on that page. You can also select from the view menu on the menu bar.

  5. #5
    Join Date
    Apr 2007
    Posts
    209
    Thanks, real strange won't let me do it. I even tried using "page" in IE and clicking on view source, nothing still happens. Must be some weird setting on my computer somewhere that I don't know where to adjust it.
    Can someone please help me out since its working for others but not me, would really appreciate it.. Just paste page source of http://www.cssplay.co.uk/layouts/background.html into a private message and send it to me? Thank you very much for your help.

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Still works for me in IE (which I normally don't use)....

    Source:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> stu nicholls | CSS PLaY | 100% wide/high 'background' image emulation </title>
    <meta name="Author" content="Stu Nicholls" />
    <meta name="Keywords" content="cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations" />
    <meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS" />
    <meta http-equiv="imagetoolbar" content="no" />
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="icon" href="../favicon.ico" type="image/ico" />
    <style type="text/css">
    html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
    body {font-family:verdana, arial, sans-serif; font-size:76%;}
    #background{position:absolute; z-index:1; width:100%; height:100%;}
    #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} 
    #content {padding:5px 300px 20px 200px;}
    p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
    #fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
    </style>
    
    
    			<script language='javascript' src='http://127.0.0.1:1035/js.cgi?ca&r=4313'></script>
    
    </head>
    
    <body>
    <div>
    <img id="background" src="rabbit.jpg" alt="" title="" /> 
    </div>
    <div id="fixed">
    <p>The background image is always 100% x 100% (body size). But it only works with a 100% x 100% html/body.</p>
    <p><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=100&#037; background image" title="Your comments">Comments</a></p>
    
    </div>
    <div id="scroller">
    <div id="content">
    
    <h1>ALICE'S ADVENTURES IN WONDERLAND</h1>
    
    <h3>Lewis Carroll</h3>
    
    <h2>THE MILLENNIUM FULCRUM EDITION 3.0</h2>
    
    
    
    
    <h3>CHAPTER I</h3>
    
    <h4>Down the Rabbit-Hole</h4>
    
    
    <p>Alice was beginning to get very tired of sitting by her sister
    on the bank, and of having nothing to do:  once or twice she had
    peeped into the book her sister was reading, but it had no
    pictures or conversations in it, 'and what is the use of a book,'
    thought Alice 'without pictures or conversation?'</p>
    
    <p>So she was considering in her own mind (as well as she could,
    for the hot day made her feel very sleepy and stupid), whether
    the pleasure of making a daisy-chain would be worth the trouble
    of getting up and picking the daisies, when suddenly a White
    Rabbit with pink eyes ran close by her.</p>
    
    <p>There was nothing so VERY remarkable in that; nor did Alice
    think it so VERY much out of the way to hear the Rabbit say to
    itself, 'Oh dear!  Oh dear!  I shall be late!'  (when she thought
    it over afterwards, it occurred to her that she ought to have
    wondered at this, but at the time it all seemed quite natural);
    but when the Rabbit actually TOOK A WATCH OUT OF ITS WAISTCOAT-
    POCKET, and looked at it, and then hurried on, Alice started to
    her feet, for it flashed across her mind that she had never
    before seen a rabbit with either a waistcoat-pocket, or a watch to
    take out of it, and burning with curiosity, she ran across the
    field after it, and fortunately was just in time to see it pop
    down a large rabbit-hole under the hedge.</p>
    
    <p>In another moment down went Alice after it, never once
    considering how in the world she was to get out again.</p>
    
    <p>The rabbit-hole went straight on like a tunnel for some way,
    and then dipped suddenly down, so suddenly that Alice had not a
    moment to think about stopping herself before she found herself
    falling down a very deep well.</p>
    
    <p>Either the well was very deep, or she fell very slowly, for she
    had plenty of time as she went down to look about her and to
    wonder what was going to happen next.  First, she tried to look
    down and make out what she was coming to, but it was too dark to
    see anything; then she looked at the sides of the well, and
    noticed that they were filled with cupboards and book-shelves;
    here and there she saw maps and pictures hung upon pegs.  She
    took down a jar from one of the shelves as she passed; it was
    labelled 'ORANGE MARMALADE', but to her great disappointment it
    was empty:  she did not like to drop the jar for fear of killing
    somebody, so managed to put it into one of the cupboards as she
    fell past it.</p>
    
    <p>'Well!' thought Alice to herself, 'after such a fall as this, I
    shall think nothing of tumbling down stairs!  How brave they'll
    all think me at home!  Why, I wouldn't say anything about it,
    even if I fell off the top of the house!' (Which was very likely
    true.)</p>
    
    <p>Down, down, down.  Would the fall NEVER come to an end!  'I
    wonder how many miles I've fallen by this time?' she said aloud.
    'I must be getting somewhere near the centre of the earth.  Let
    me see:  that would be four thousand miles down, I think--' (for,
    you see, Alice had learnt several things of this sort in her
    lessons in the schoolroom, and though this was not a VERY good
    opportunity for showing off her knowledge, as there was no one to
    listen to her, still it was good practice to say it over) '--yes,
    that's about the right distance--but then I wonder what Latitude
    or Longitude I've got to?'  (Alice had no idea what Latitude was,
    or Longitude either, but thought they were nice grand words to
    say.)</p>
    
    <p>Presently she began again.  'I wonder if I shall fall right
    THROUGH the earth!  How funny it'll seem to come out among the
    people that walk with their heads downward!  The Antipathies, I
    think--' (she was rather glad there WAS no one listening, this
    time, as it didn't sound at all the right word) '--but I shall
    have to ask them what the name of the country is, you know.
    Please, Ma'am, is this New Zealand or Australia?' (and she tried
    to curtsey as she spoke--fancy CURTSEYING as you're falling
    through the air!  Do you think you could manage it?)  'And what
    an ignorant little girl she'll think me for asking!  No, it'll
    never do to ask:  perhaps I shall see it written up somewhere.'</p>
    </div>
    </div>
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-451410-1";
    urchinTracker();
    </script>
    </body>
    
    </html>

  7. #7
    Join Date
    Apr 2007
    Posts
    209
    Thanks Centauri! I doesn't stretch like I need it to for some reason it cuts off at half page but at least it gave me a correct way to position a bigger image behind a whole page. So with your help at least I can get the image I want behind the whole page, thanks a lot!

  8. #8
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    If the width and height of both body and html are not set to 100% height, then this may occur.

  9. #9
    Join Date
    Nov 2005
    Location
    PRoM
    Posts
    376
    I'm curious how crumby the image will look when it's stretched. Care to post a link?

  10. #10
    Join Date
    Apr 2007
    Posts
    209
    Thanks, right now I'm not using it trying something else.
    I had the percentage like this as shown in their source but only went halfway down the page. But it did the width correctly.
    html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}

  11. #11
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    With that for the html and body, and the image set to 100% for both height and width, it should have stretched to the entire screen.

  12. #12
    Join Date
    Apr 2007
    Posts
    209
    I thought so too but didn't work. I'll try one more time next week. Thanks.

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