SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: background-size

  1. #1
    SitePoint Enthusiast edgarzakaryan's Avatar
    Join Date
    Aug 2012
    Location
    Yerevan, Armenia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question background-size

    Hi everyone.
    I have trouble in using background-size for IE.

    I have image which height is 500px, and I'm using background-size to enlarge the height to 700px.
    It's working perfect in all browsers, but not in IE.
    I don't know how may I fix this. Maybe I need to include some .js libraries to fix this? but which one, I have tried something, but it didn't help.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Firstly, don't upscale images with CSS, they'll be blurry.

    You'll need to use something like Modernizr which will add a class of 'backgroundsize' to the html element. You can use this to fork your code to support ie.

    Code css:
    .element {
      background-size: 700px auto;
    }
    .no-backgroundsize .element {
      /* other rules */
    }

  3. #3
    SitePoint Enthusiast edgarzakaryan's Avatar
    Join Date
    Aug 2012
    Location
    Yerevan, Armenia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Hi,

    Firstly, don't upscale images with CSS, they'll be blurry.

    You'll need to use something like Modernizr which will add a class of 'backgroundsize' to the html element. You can use this to fork your code to support ie.

    Code css:
    .element {
      background-size: 700px auto;
    }
    .no-backgroundsize .element {
      /* other rules */
    }

    My script is like this now.


    Code:
    <style>
    .background{
                background-image:url('background.jpg'),
                width: 900px;
                height: 700px;
    	    background-size: auto 700px
    }
    </style>
    
    <div class="background"></div>
    but because of real image height is 500px, IE don't enlarge it to 700px

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Why not just make the image 700px?
    Without background-size there's no way to scale a background image.

  5. #5
    SitePoint Enthusiast edgarzakaryan's Avatar
    Join Date
    Aug 2012
    Location
    Yerevan, Armenia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The thing is that the height of images can be different, so it can be 500px; 600px, etc. and I need to change the size.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    The background-size property has some other options, like "contain" and "cover" that may be of some use: http://www.css3.info/preview/background-size/

    But this doesn't work on older browsers unless you use some JavaScript, though.


Tags for this Thread

Bookmarks

Posting Permissions

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