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 9 of 9
  1. #1
    Junior Member
    Join Date
    Dec 2008
    Posts
    11
    Member #
    17992
    Hi can anyone help please, is there a way to make a background image(jpg/psd) resizeable so that it fills any browser window and can be resized as the window changes with no distortion or stretching. Is this possible with just CSS and no JS.
    thank's Sheldyn.
    HNY 2009

  2.  

  3. #2
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    It is possible with CSS, but only for CSS 3, which currently doesn't have much browser support. So you have to 'fake it', using a normal <img> tag and placing it under the content, using z-index. There's a lot to explain, so I suggest you read this article:
    http://webdesign.about.com/od/css3/f/blfaqbgsize.htm


    But this method does stretch the image, As far as I'm aware, there's no method of doing this without the picture stretching or distorting.

  4. #3
    Junior Member
    Join Date
    Dec 2008
    Posts
    11
    Member #
    17992
    Thank's Diddy, i found this http://css-tricks.com/how-to-resizea...kground-image/ the 'third attempt' example works well interms of distortion/stretching, although resizing does cause some cropping issues. What do you think?

  5. #4
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    I think it's a good soloution, but there are some cropping issues. The javascript versions in attempts 1 and 2 were also good. It's ultimately up to you to choose what way you do it. But do you have a webpage so we can see where you're coming from? I might be able to come up with another soloution if I saw the page in action.

  6. #5
    Junior Member
    Join Date
    Dec 2008
    Posts
    11
    Member #
    17992
    I think it's a worthwhile and versitile method to have in your toolbox and one that i'd like to know how to code correctley. In appropriate design situations using the full browser would be great. I submitted a post titled " Menu Design Methods" under Web Design Discussions on Dec 31,08 where i attached a jpeg of a mockup site i was working on, i was wondering how this would work in a full browser window where the entire page incl background image is scalable to a certain point. I know this is not the best example of what i'm intending due to readability issues, but having a full browser background image with minimal typography would be more of what i'm thinking and like to explore.

  7. #6
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Ah yes, I remember reading that thread. Are you saying that the page that you want the 100% background image on is this site?
    What I am suggesting is that if you don't decide to do the rezisable background image, then you could also have a very large background, that on a very large screen you could see all of the background, say on a screen of 1280x1024. But make the important bit of the background - the part that you want everyone to see be a size of 800x600. So just have other stuff around it that adds to it for the larger screen size people. I don't know whether that's a very good soloution but I'm just throwing out ideas. Gooldl luck with it!

  8. #7
    Junior Member
    Join Date
    Dec 2008
    Posts
    11
    Member #
    17992
    Thank's Diddy, i was thinking of trying a 100% B/image on that site just to see how things would work and give it a try. It is not the best example to try this though as other elements do come into play, however i'd like to use the 100% method on another project sometime that is more minimal in design. Diddy do you know how to make the image scale without stretching or distortion? as in the CSS Tricks examples. I can make the image fill the window and resize but i don't know they make it resize in ratio, this would help so much. This is what i have done so far:

    Thank's Sheldyn,

    ( safari, Firefox)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>

    <head>
    <title> Background Image</title>
    <style type="text/css">
    html, body {height:100%; margin:0; padding:0;}
    #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
    </style>
    <style type="text/css">
    html {overflow-y:hidden;}
    body {overflow-y:auto;}
    #page-background {position:absolute; z-index:-1;}
    </style>
    </head>

    <body>
    <div id="page-background"><img src="crowd background.jpg" width="100%" height="100%" alt="crowd"></div>

    </body>
    </html>

  9. #8
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Your example isn't working for me at the moment, but I'll keep at it. I think there's something in the javascript in Attempt Two that does the resizing.
    Code:
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/jquery.dimensions.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    var $winwidth = $(window).width();
    $("img.source-image").attr({
    width: $winwidth
    });
    $(window).bind("resize", function(){
    var $winwidth = $(window).width();
    $("img.source-image").attr({
    width: $winwidth
    });
    });
    });
    </script>
    (There is jquery referenced in the above code by the way)

    But there's something in the CSS that is talked about in attempt three that does is as well. So I went to the example page, and got this css:
    Code:
     
    * {
     margin: 0;
     padding: 0;
    }
    body {
     font-size: 62.5%;
     font-family: Georgia, serif;
     overflow: hidden;
    }
    #weather-info {
     background: url(images/transpBlack.png);
     padding: 20px 0 20px 0;
     position: relative;
     top: 200px;
     left: 0px;
     width: 100%;
     text-align: center;
     color: white;
     font-size: 18px;
     z-index: 6000;
    }
    .bg {
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 5000;
    }
    #extended-forecast {
     position: relative;
     top: 0px;
     display: none;
    }
    #tab {
     width: 200px;
     height: 36px;
     background: url(images/tab-bg.png) no-repeat;
     position: absolute;
     z-index: 9999;
     top: 0px;
     left: 50px;
    }
    I will eventually sift through it but I thought I'd post it now so that you and others can go through it as well. Plus, my javascript isn't too crash hot.

  10. #9
    Junior Member
    Join Date
    Dec 2008
    Posts
    11
    Member #
    17992
    Thank's Diddy, i tried to work on a solution and came up with this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> Background Image</title>
    <style type="text/css">
    html, body {height:100%; margin:0; padding:0;}
    #background {position:absolute; top:0; left:0; width:100%; height:100%;}
    </style>
    </head>
    <body>
    <div id="background"><img src="crowd background.jpg" width="100%"alt="crowd"></div>
    </body>
    </html>

    It works, by just giving the id "background" a width of 100%it makes the entire browser window scalable in ratio with no distortion. I have tried in FF and Safari and no prob's. This is the simplest and barebones solution i could do and no JS. To add content i would create a #container with a higher z index and go from there.
    I have read there are issues with IE but there is a simple conditional statement that fixes that.I'm not sure how to link my image to you, you couild just replace it with another.


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
  •  
All times are GMT -6. The time now is 09:26 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com