Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Mar 2012
    Posts
    160
    Thanks
    21
    Thanked 0 Times in 0 Posts

    100% elastic background image

    How can I make a 100% elastic background image? I have tried it all and cant seem to even come close. The image I am working with will be fine if it is constrained (width or height) and will not have a noticeable difference if the monitor is taller/wider so that is not a problem, which is really the only problem I can see running into. floridasbigtoystorage.com is my website if that is needed.

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Do you want a full page background? The browser scales image as needed that type of background styling?

  • #3
    Regular Coder
    Join Date
    Mar 2012
    Posts
    160
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tempz View Post
    Do you want a full page background? The browser scales image as needed that type of background styling?
    Yes full screen and scales when browser window is resized.

  • #4
    Regular Coder
    Join Date
    Mar 2012
    Posts
    160
    Thanks
    21
    Thanked 0 Times in 0 Posts
    background-size:cover obviously works for newer browsers but is there some precautions for other browsers I can take? I remember a long time ago that people were not using "cover" for some reason...

  • #5
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Try:

    Code:
    html { 
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    
    /* IE */
    
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

  • #6
    Regular Coder
    Join Date
    Mar 2012
    Posts
    160
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tempz View Post
    Try:

    Code:
    html { 
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    
    /* IE */
    
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    Seems to work perfect! One question... The last 2 lines (the JavaScript) do I just replace the myBackground.jpg with my image location? And that first line of the 2 has a period in front of it so would it be
    Code:
    .images/myimage.jpg
    ?

  • #7
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Yes indeed, you do.

  • #8
    Regular Coder
    Join Date
    Mar 2012
    Posts
    160
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Perfect. Thanks!


  •  

    Posting Permissions

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