Full Screen Background Image Is Stretched - Stack Overflow

Sorry, we no longer support your browser Please upgrade to Microsoft Edge, Google Chrome, or Firefox. Learn more about our browser support. Just browsing Stack Overflow? Help us improve your experience. Sign up for research

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Full Screen Background Image Is Stretched Ask Question Asked 11 years ago Modified 4 years, 4 months ago Viewed 52k times 4

I had made a full screen background image for one of my clients, but the problem is that when I make the image to fit all the screen using the following css codes:

#bg-image img{ position:fixed; left:0; top:0; width:100%; max-height: 100%; } #bg-image{ height: 100%; width: 100%; float: left; overflow: hidden; position: relative; }

Everything works perfect, as the image is filling all the background of my home page, but the problem is that now the background image seems to be stretched, and I would like to know how to make my image is size or ratio to be correct in order to fit the whole screen size without getting stretched (with full quality), so that the background image is quality to be perfect.

So, how to make my image to fit perfectly on the background of my home page.

Any Help Would Be Very much Appreciated!

• html
• image
• css
• photoshop

Share Improve this question Follow asked Nov 27, 2013 at 22:44 Hamza Abd ElwahabHamza Abd Elwahab 15311 gold badge88 silver badges1616 bronze badges 1

• Here are a few good options, even some that work in IE8. While background-size is great and pretty simple, IE8 doesn't support it. If that is not a factor, then don't worry about it. css-tricks.com/perfect-full-page-background-image – Dryden Long Commented Nov 27, 2013 at 22:49

Add a comment |

6 Answers 6

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 13

You should really look into the background size property instead of using fixed images. Using 'cover' for background-size, means that the image should grow or shrink just enough to cover the whole background.

If you know the dimensions of the image. You can use a media query to change the background-size to 'auto' when it would otherwise grow beyond it's original size.

html, body { min-height: 100%; } body { background-image: url(http://leydenlewis.com/images/LANDING_PAGE.jpg); background-repeat: no-repeat; background-position: 0 0; background-size: cover; } @media (min-width: 1120px), (min-height: 630px) { body { background-size: auto; } } Share Improve this answer Follow edited Nov 28, 2013 at 14:39 answered Nov 27, 2013 at 22:47 Arnold DanielsArnold Daniels 16.5k55 gold badges5454 silver badges8484 bronze badges 7

• The background is appearing correctly but the problem is that the image looks so stretched, I want it to appear with high quality and to fit the whole screen (like no scrolling) some how, it is very important to me.I don't know whether I can make this to happen using css 3 or by resizing my image to appear in full quality. – Hamza Abd Elwahab Commented Nov 27, 2013 at 22:50
• This is definitely the way to go, just don't forget that IE8 doesn't support background-size so you may be leaving a small portion of users out in the cold. – Dryden Long Commented Nov 27, 2013 at 22:51
• The problem is that the image is still stretched on my site, I would like it to look 100% in quality.You can see here leydenlewis.com – Hamza Abd Elwahab Commented Nov 27, 2013 at 23:02
• @HamzaAbdElwahab Do you mean that you don't want the image to grow. With other words it should be max 1120px x 630px? – Arnold Daniels Commented Nov 27, 2013 at 23:15
• 1 You need to add body {background-size: auto;} inside the media-query in place of what you have there. – brouxhaha Commented Nov 28, 2013 at 0:29

| Show 2 more comments 0

Try doing something like this:

#bg-image { position:fixed; left:-50%; top:-50%; width:200%; height: 200%; } #bg-image img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; }

This should get you the results you want and work in most browsers as well.

Share Improve this answer Follow answered Nov 27, 2013 at 22:53 Dryden LongDryden Long 10.2k22 gold badges3737 silver badges4747 bronze badges 5

• Unfortunately, this had cropped my image is top and bottom so not all the image is appearing right now.I would like my image to appear 100% in my home page, but with full quality, I dont want it to look stretched.This is a link to my site leydenlewis.com – Hamza Abd Elwahab Commented Nov 27, 2013 at 23:00
• Try one of the methods in this link and see if any of them work for you: css-tricks.com/perfect-full-page-background-image – Dryden Long Commented Nov 27, 2013 at 23:03
• @HamzaAbdElwahab Also, if you want your background image to maintain it's aspect ratio and fill the entire screen regardless of screen size, you will have to crop the image at some point. – Dryden Long Commented Nov 27, 2013 at 23:10
• And How should I crop the image, I mean in width or height ? or what should the size be ? I would love to make the background image to is aspect ratio be perfect on all screen sizes if it's possible, it would be great! – Hamza Abd Elwahab Commented Nov 27, 2013 at 23:19
• That's what my answer above does for you. It automatically crops the image so that it maintains it's aspect ratio and fills the entire screen at the same time. – Dryden Long Commented Nov 27, 2013 at 23:20

Add a comment | 0

This should keep the image the correct ratio:

#bg-image{ height: auto; width: auto; float: left; overflow: hidden; position: relative; } Share Improve this answer Follow answered Nov 28, 2013 at 14:57 guymidguymid 1,20699 silver badges1111 bronze badges Add a comment | 0 <style> body { background: url(http://37.media.tumblr.com/tumblr_lusitdffhf1qj5tnlo1_r1_500.gif); background-size: 320px 600px; background-repeat: no-repeat; padding-top: 40px; } </style> Share Improve this answer Follow answered Jun 12, 2014 at 13:23 Adam RifaiAdam Rifai 1111 bronze badge 1

• 4 While this code might help solve the problem, a code only answer is not high quality. A better answer tells what the code does, explains why the approach was taken, shows where the code gets inserted, and links to relevant documentation. – Stephen Ostermiller ♦ Commented Jun 12, 2014 at 13:47

Add a comment | 0

Since the questions doesn't specifically state CSS only (or NOT Javascript), here is a jQuery solution that I've worked out and have been using. I've noticed there might be an issue with mobile browsers.

//resize the background image function resizeImage($selection){ //get the ratio of the image var imageRatio = $selection.width() / $selection.height(); //get the screen ratio var screenRatio = $(window).width() / $(window).height(); //if the image is wider than the screen if(imageRatio > screenRatio){ $selection.height($(window).height()); //set image height to screen height $selection.width($(window).height()*imageRatio); //set the correct width based on image ratio } //if the screen is wider than the image else{ $selection.width($(window).width()); //set the image width to the screen width $selection.height($(window).width()/imageRatio); //set the correct image height based on the image ratio } }

Run this whenever you want to resize the image, typically on "onresize" and "onload"

<body onresize="resizeImage($('#bgImage'))">

Share Improve this answer Follow answered Jun 20, 2014 at 6:40 AdamAdam 19111 gold badge22 silver badges1414 bronze badges Add a comment | -2 #bg-image{background: url(https://unsplash.com/photos/P3IJy9JMsiU/download?force=true) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} Share Improve this answer Follow answered Jul 28, 2020 at 17:47 otaku animxotaku animx 1 2

• 4 please provide an explanation on how you solved the issue – Freedom Chuks Commented Jul 28, 2020 at 17:53
• Welcome to Stack Overflow. When adding an answer to a six year old question with an accepted answer and five existing answers it is very important to point out what new aspect of the question your answer addresses. Code only answers can generally be improved by adding an explanation of how and why they work. Why in this case did you include so many browser specific version of the rule given the current coverage for this CSS rule among browsers. I just checked caniuse.com/… and it looks like there is strong support. – Jason Aller Commented Jul 29, 2020 at 0:30

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• image
• css
• photoshop

or ask your own question.

• The Overflow Blog
• Your docs are your infrastructure
• Featured on Meta
• More network sites to see advertising test [updated with phase 2]
• We’re (finally!) going to the cloud!

Linked

0 Perfectly place an image bigger than screens 0 How to get images to not stretch during page resize

Related

7 background image doesn't stretch full page width 0 Background image is stretching 0 Image is not stretched on another monitor 0 How to have a non-fixed fullscreen background image? 0 background image is not fit into full screen. The height is cutting down 0 Background image not covering full screen 1 How to set background image to full screen 0 background image filling full screen not just body 2 background image not taking up full width 0 Background image stretches when space is available

Hot Network Questions

• Is there a limit below a panel's rating for bonding neutrals and grounds?
• Arrange 3 red balls and 33 white balls randomly in a circle. What is the probability that there are no more than 13 consecutive white balls?
• What happens when a ranger uses Favored Foe with Hunter's Mark?
• Why is Ukraine's conscription age (still) so high (25)?
• Why is Anarchism not considered fundamentally against the "democratic order" in Germany?
• Is there a way to forecast by subgroup without forecasting each subgroup separately?
• What are the pros & cons of downdraft ventilation?
• Is it possible to use NAS hard drives in a desktop?
• How does Trump plan to counteract the predicted negative effects of tariffs?
• Can this strong directional blur at wide apertures still be explained by the usual arguments?
• Nonnegative functions with minimum constantly equal to 0
• What is the length scale of correlated errors observed on the 72-qubit google chip used in the quantum memory experiment
• BIOS drive order is inverse of Windows'
• How do I go about rebranding a fully deleted project that used to have a GNU General Public License v3.0 but is now fully inaccessible
• From exponent of sum to product of exponents
• A fantasy story with an imp in a box that paints pictures
• A roulette wheel? An AC Milan kit? Darth Maul's face?
• If scent means a pleasant smell, why do we say "lovely scent" or "sweet scent"?
• Are there any examples of exponential algorithms that use a polynomial-time algorithm for a special case as a subroutine (exponentially many times)?
• Reality check: energy source for power armour
• Sequence with diagonal lines and circles
• Why does Japanese not have a native "tu" sound?
• Walks in Nice (Nizza)
• Is ATL-98 Carvair still alive in the US?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html