www.webdeveloper.com
Results 1 to 9 of 9

Thread: Responsive background image

  1. #1
    Join Date
    Apr 2014
    Posts
    3

    Post Responsive background image

    hi,
    i need help in making a background image responsive to all available resolutions.i tried backgroung-size:cover; but it doesn't showing all part of image.

    thank you.

  2. #2
    Join Date
    Apr 2014
    Posts
    8
    background-size: cover; will stretch your image proportionally, but keep in mind that if your resolution is a different proportion than your image, some of your background will be cut off.

    If it is imperative to show the entire background, but you want to keep aspect ratio, background-size: contain; can be an answer, but this often leaves you with blank space due to differences in aspect ratios once again.

    background-size: 100% 100%; will stretch your background to completely fill the parent element, but this may distort your image depending on the screen resolution.

    It is simply a matter of picking your poison, or adjusting your image to fit a particular solution you are happiest with.

  3. #3
    Join Date
    Mar 2012
    Posts
    1,207
    One problem with resizing one image to fit the whole range of display sizes is that, to achieve an acceptable quality at the highest size, the image is likely to be slow to load on low-spec mobile devices. One solution is to have two or three sizes of image, with the appropriate one used according to the device width and height. However, there is a problem: If you use client-side techniques to select the appropriate image, the device will download ALL the images even if only the smallest one is needed! Which somewhat defeats the purpose of having different sizes of images. There is a solution, but it involves using server-side code (PHP) to send only the appropriate image according to the larger of the device display dimensions.

  4. #4
    Join Date
    Dec 2012
    Posts
    5
    background-size: 100% 100% this will work good, but on any phone in portrait mode, it will be stretched a lot, i think you have to remove the background entirely on phones

  5. #5
    Join Date
    Apr 2014
    Posts
    3
    thank you guys for your replies...

    i keep background -size: 100% 100% for all devices except phone. for phone i used cover so that it will show nicely.

  6. #6
    Join Date
    Apr 2014
    Location
    Bhuabneswar, India
    Posts
    10
    If you want responsive background image then purchase images from stockphoto company. They are providing HD quality photos with more responsive.

  7. #7
    Join Date
    Sep 2006
    Location
    new york
    Posts
    265
    Interesting. Trying to add something to http://www.josephdenaro.com, I used
    Code:
    html { background: #afeeee url(miscImages/jdMilkyWayCut.gif) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;  }
    But page was too slow in downloading, even when I cropped image I was using. Is it better NOT to crop the image?

    Following this discussion, I'm going to try background-size: 100% 100%;

    Any advice about improving download would be appreciated. Image is just for abstract color pattern so it does not have to be sharp/clear. Also have JavaScript to switch to mobile version.

    Code:
    if (screen.width <= 699) {
    document.location = "indexmobile.html";
    }
    Last edited by auntnini; 04-23-2014 at 05:47 PM. Reason: typo

  8. #8
    Join Date
    Mar 2012
    Posts
    1,207
    It is always important to optimize images, but particularly with large ones. This can be done with any good picture editor. Basically you save the image as JPEG in a range of qualities (say 80%, 70%, 60%, 50%) then do A:B comparisons of the JPEGs to the original at 2x magnification. Choose the image that has the best compromise of loss of detail vs file size for the particular context. Note: For particularly important images, I'd save the rejected images as well. Just in case the client does not like the compromise you selected. You can then easily substitute a more appropriate one.

    However, re-reading your post, I'm not sure that is the only problem in this case. Using client-side code to suppress the image for mobiles may have little or no effect on the load time. This is because the image may be downloaded even if it is not used. I'd suggest you test a version of the page as-is against a version where the display code is commented out. If the latter is significantly quicker for mobiles, then it suggests that the image is being downloaded even when it is not used. If so, you may need to use server-side code (PHP) to only send the image when it is needed.
    Last edited by jedaisoul; 04-24-2014 at 04:38 AM.

  9. #9
    Join Date
    Sep 2006
    Location
    new york
    Posts
    265
    Thanks jedaisoul. I usually do not JPEG compress at lower %, but you reminded me that this is a case when I should. I thought that cropping the image might do the trick, but is it still too slow so I wonder if making the browser do the extra re-sizing might be as bad as using a larger version. We do not have access to server-side scripting such as PHP.

    I might have to come up with a different way add some background interest -- some kind of CSS3 animation? (See http://www.karensantry.com for example.) The repeated small images I've come up with so far are an annoying pattern.

    I personally liked a plain background (http://www.josephdenaro.com/indexTurquoise.html)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles