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,447
    Thanks
    71
    Thanked 102 Times in 101 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 12:14 AM.
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #2
    New Coder
    Join Date
    Mar 2009
    Location
    Texas
    Posts
    31
    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,447
    Thanks
    71
    Thanked 102 Times in 101 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
    •