SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to rescale a background image in a div?

    What would be the best way to rescale a background image in a div when the viewport is made smaller?

    Thank you in advange.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It depends on the image and also what you want to achieve.

    Using background-size you can now scale background images for modern browsers (ie9+) in a variety of ways. Scaled images are never as good as the original of course but results can be satisfactory depending in the image used.

    However sometimes by shrinking an image you lose the important part of the image as it goes smaller and you mat be better off just centering the normal size image in the background. You could also use media queries and when the viewport reaches a certain point swap the image for a smaller more pertinent one. The downside of course is loading two images instead of one.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. Thank you for the advise. Please have a look at this site. The people would like me to make the site responsive, what is going reasonably well, as you can see here. But I am struggling to get the wine glass ok. I was thinking, of centering it under the text and make it more transparant and then make it scale when the vieport is made smaller, but I have no idea how to do that.

    Thank you in advance

    Quote Originally Posted by Paul O'B View Post
    Hi,

    It depends on the image and also what you want to achieve.

    Using background-size you can now scale background images for modern browsers (ie9+) in a variety of ways. Scaled images are never as good as the original of course but results can be satisfactory depending in the image used.

    However sometimes by shrinking an image you lose the important part of the image as it goes smaller and you mat be better off just centering the normal size image in the background. You could also use media queries and when the viewport reaches a certain point swap the image for a smaller more pertinent one. The downside of course is loading two images instead of one.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Why can't you just float it to the right as before and let it scale with the layout as you are doing for the other images in the header?

    e.g. roughly:
    Code:
    <div id="content">
    <p class="imgfloat"> <img width="100%" src="http://www.grandcafesloterplas.nl/photoshop/main%20home.png" alt=""> </p>
    <p>Gelegen aan de grootste plas, op de mooiste lokatie van Amsterdam, heeft Grand Café Sloterplas zijn deuren in maart 2006 geopend en is uitgegroeid tot een hip en trendy horecagelegenheid.</p>
    Code:
    .imgfloat {
    	float:right;
    	margin:10px;
    	width:30%
    }

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. Thank you for that.

    Why can't you just float it to the right as before and let it scale with the layout as you are doing for the other images in the header?
    Do you mean with the max-width property?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by donboe View Post
    Hi Paul. Thank you for that.



    Do you mean with the max-width property?
    Yes you can use a percentage width in combination with min and max width to stop the image getting too big or too small.

  7. #7
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes you can use a percentage width in combination with min and max width to stop the image getting too big or too small.
    Thank you Paul, it works great.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


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
  •