Image Stretching in Standard HTML

Question

Current Scenario: I'm building an application which takes an image and we set the background. I want to serve this application on mobile, desktop, and tablet devices.

Question:

I want to know the best way to stretch and show the image (without involving page lag). How do I incorporate fluid design?

Code:

I am currently trying something like this. Any improvements would help!

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Include code of what you have tried. Most people are unwilling to help if you have not even tried something yourself. Thanks! — Simply Craig, Nov 26 '14 at 18:03
[This post on GraphicDesign.SE](http://graphicdesign.stackexchange.com/questions/41834/best-practices-for-full-width-browser-images/41894#41894) may be helpful — Zach Saucier, Nov 26 '14 at 18:08
Done. I have added some code. I don't see why people downvote my question when it's a design related question. Not every question does NOT necessarily have code. That's absurd. Sometimes design has much more impact than just few LOC. Having said that, I have added my code. — Dark Knight, Nov 26 '14 at 18:08
The way its phrased comes off as sounding like an opinionated question (eg. "what is the best way to...?"). "I want to do X and I tried Y, but it has problem Z" type questions are better suited for SO. — cimmanon, Nov 26 '14 at 18:10
By far the easiest cross-browser solution is to use an `` tag with 100% width and height. It works everywhere, has no lag, and is simple. — adeneo, Nov 26 '14 at 18:10
Thank you for everyone who answered my question(s). I like the positivity of few people here! ;-) .. @cimmanon I agree, but if i don't ask how do i or someone else who's reading my post know what are the best practices? Sometimes experiences are the better teachers! ;-) — Dark Knight, Nov 26 '14 at 18:18
What is a "best practice" today might not be a best practice tomorrow. No one is going to give you an answer they believe is a poor solution to the problem. If you can't decide which solution is best for your case, then let the community votes guide your decision. — cimmanon, Nov 26 '14 at 18:26
adeneo - adding 100% on BOTH width and height will not preserve 'aspect ratio' - the image will be stretched. Only use 100% on EITHER width or height — jan199674, Nov 26 '14 at 19:34

Dryden Long · Answer 1 · 2014-11-26T18:09:47.830

1

With modern browsers, the easiest way would be to use the following CSS:

#background-selector {
    background-image: url('image.jpg');
    background-size: cover;
}

EDIT OP has since added code to their post, so this may not be the most appropriate answer.

edited Nov 26 '14 at 18:09

answered Nov 26 '14 at 18:03

Dryden Long

10,072
2
35
47

jan199674 · Answer 2 · 2014-11-27T01:32:49.607

It depends on the image:

If the image contains objects that can not easily be stretched like text, portraits, photos of animals or bicycles etc, you will need to preserve the original proportions ('aspect ratio').

Using only CSS there are 3 ways to scale and keep aspect ratio - none of them will work perfectly on all kinds of devices:

'contain' leaves a gap in either the sides OR in bottom and top depending on the size of the device:

body  {
    background: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-position: center; 
    background-size: contain; 
}

'cover' keeps background filled, but zooms into the image depending on the size of the device - you will not not be able to see a part of the top and bottom of the image:

body  {
    background: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover; 
}

NOTE Background-size is CSS3 and will not work with older versions of IE

CSS2 - the third solution works in all browsers and behaves similar to 'background-size: contain;' - when the viewport of the device doesnt fit the image, you will experience a gap:

.img_width {
    width: 100%; 
    height: auto; 
}

Image Stretching in Standard HTML

2 Answers2