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 3 of 3
  1. #1
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,556
    Thanks
    75
    Thanked 105 Times in 104 Posts

    Is it possible to stretch a background image

    I am using a background image with no repeat with CSS. I don't want it to tile and don't want it broken up if the page gets bigger than the image. Is it possible to stretch the image so that the larger the box the bigger the image? Thanks
    Last edited by myfayt; 05-08-2014 at 01:14 AM.
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #2
    New Coder
    Join Date
    Mar 2009
    Location
    Texas
    Posts
    33
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Hello myfayt, this is definitely possible!

    Edit fiddle - JSFiddle

    Code:
    body {
    	background-image: url('http://www.royaltyfreeimages.net/wp-content/uploads/2010/09/royalty-free-images-mushroom-500x375.jpg');
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-attachment: fixed; 
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }
    This will set the background image, center it and make sure it covers the screen. It will also keep its aspect ration.
    The Game

  • Users who have thanked mikemrm for this post:

    myfayt (05-08-2014)

  • #3
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,556
    Thanks
    75
    Thanked 105 Times in 104 Posts
    Thank you!!!
    Been a sign maker for 7 years. My business:
    American Made Signs


  •  

    Posting Permissions

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