/    Sign up×
Community /Pin to ProfileBookmark

Backgound images?

Copy linkTweet thisAlerts:
May 09.2004

Hello,

I’m very new to the webdeveloping world, I just made my first site a few days ago… so forgive me if what I’m asking seems very obvious to you. I’m having problems with the background image: either I put a nice image which tiles or I put little jpg images that tile prefectly but which don’t look very nice. So my question would be:
1. Is it possible to have a background image that stretches to fit the screen whatever the size of the webpage (kinda like the stretch option when you define a background image for Windows). Sice the size of my pages are variable, the background image should stretch and adjust accordingly.

  • 2. If that’s not possible, then is there a source on the net where I could find loads of sample background mages that tile nicely?

    • Thank you ?

    to post a comment
    Full-stack Developer

    4 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @soccer362001May 09.2004 — I don't think it is possible to stretch a background image. I may be wrong but you may want to check out http://www.w3schools.com/css/css_reference.asp#background
    Copy linkTweet thisAlerts:
    @FangMay 09.2004 — You can fake the effect using an absolute positioned image and contents.

    All page contents must be in the div.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Stretched background image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type="text/javascript">
    //<![CDATA[
    <!--
    function Stretch() {
    var theWidth, theHeight;
    if (window.innerWidth)
    theWidth=window.innerWidth;
    else if (document.documentElement && document.documentElement.clientWidth)
    theWidth=document.documentElement.clientWidth;
    else if (document.body)
    theWidth=document.body.clientWidth;

    if (window.innerHeight)
    theHeight=window.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight)
    theHeight=document.documentElement.clientHeight;
    else if (document.body)
    theHeight=document.body.clientHeight;
    document.getElementById('bgImg').style.width=theWidth+"px";
    document.getElementById('bgImg').style.height=theHeight+"px";
    }
    //-->
    //]]>
    </script>

    </head>
    <body onload="Stretch();">
    <img id="bgImg" alt="Stretched image" style="position:absolute;top:0;left:0;" src="myimage.gif" height="100" width="100" />
    <div id="contents" style="position:absolute;top:0;left:0;">
    <h1>Contents</h1>
    </div>
    </body>
    </html>
    Copy linkTweet thisAlerts:
    @fredmvMay 10.2004 — How about:<body style="margin:0;">
    <img src="foo.png" style="height:100%;width:100%;" alt="" />
    </body>
    Copy linkTweet thisAlerts:
    @FangMay 10.2004 — No-way [B]fredmv[/B], it would work in Moz. with the addition of [I]position:absolute;[/I], but not in IE ?
    ×

    Success!

    Help @darcangelo spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...