How Do I Stretch A Background Image To Cover The Entire HTML ...

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 How do I stretch a background image to cover the entire HTML element? Ask Question Asked 16 years, 1 month ago Modified 1 year, 1 month ago Viewed 413k times 103

I'm trying to get a background image of a HTML element (body, div, etc.) to stretch its entire width and height.

Not having much luck. Is it even possible or do I have to do it some other way besides it being a background image?

My current css is:

body { background-position: left top; background-image: url(_images/home.jpg); background-repeat: no-repeat; }

Edit: I'm not keen on maintaining the CSS in Gabriel's suggestion so I'm changing the layout of the page instead. But that seems like the best answer so I'm marking it as such.

• html
• css
• background-image

Share Improve this question Follow edited Dec 18, 2022 at 23:04 starball 47.4k2828 gold badges175175 silver badges830830 bronze badges asked Oct 25, 2008 at 3:41 FungFung 7,73088 gold badges5555 silver badges6969 bronze badges 2

• Of course, you could use JavaScript to do this dynamically, but that would be probably worse than the CSS hacks suggested by gabriel1836's link. – Jason Bunting Commented Oct 25, 2008 at 4:42
• To preserve the aspect ratio of the image you should use "background-size: cover;" or "background-size: contain;". I've built a polyfill that implements those values in IE8: github.com/louisremi/background-size-polyfill – Louis-Rémi Commented Dec 6, 2012 at 14:32

Add a comment |

14 Answers 14

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 217 <style> { margin: 0; padding: 0; } html { background: url('images/yourimage.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style> Share Improve this answer Follow edited Mar 17, 2017 at 9:55 Hakan Fıstık 19.3k1616 gold badges119119 silver badges144144 bronze badges answered Mar 16, 2011 at 20:21 NathanNathan 2,19411 gold badge1313 silver badges22 bronze badges 12

• This also works as style tags within html elements or in css files. – Nathan Commented Mar 16, 2011 at 20:29
• 3 this is the best solution, ever. – Andrei Drynov Commented Apr 20, 2012 at 10:13
• 1 What's the difference between cover vs 100% 100% ? – Pacerier Commented May 22, 2012 at 14:13
• 5 100% 100% does not keep the aspect ratio of the original image. ‘cover’ scales the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area. You can also use ‘contain’ to scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area. – Mike737 Commented Jun 22, 2012 at 4:11
• "-webkit-background-size: cover;" is not a valid CSS3 property. – VoidKing Commented Apr 23, 2013 at 15:55

| Show 7 more comments 16

Use the background-size property: http://www.w3.org/TR/css3-background/#the-background-size

Share Improve this answer Follow edited Jan 31, 2012 at 11:32 answered Jul 9, 2009 at 12:52 KornelKornel 99.9k3838 gold badges232232 silver badges318318 bronze badges 1

• 1 Awesome, this is the correct answer. It probably doesn't work on IE, but I'm only targeting webkit for my project, so this is perfect :) – aehlke Commented Mar 24, 2011 at 2:37

Add a comment | 9

In short you can try this....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

Where I have used few css and js...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" /> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/jquery.mobile-1.0.1.min.js"></script>

And it is working fine for me.

Share Improve this answer Follow answered May 7, 2013 at 10:44 Tamal SamuiTamal Samui 73811 gold badge1010 silver badges1414 bronze badges 1

• For those who do NOT want to keep the aspect ratio! – BillyNair Commented Feb 23, 2016 at 15:52

Add a comment | 6

Not sure that stretching a background image is possible. If you find that it's not possible, or not reliable in all of your target browsers, you could try using a stretched img tag with z-index set lower, and position set to absolute so that other content appears on top of it.

Let us know what you end up doing.

Edit: What I suggested is basically what's in gabriel's link. So try that :)

Share Improve this answer Follow answered Oct 25, 2008 at 3:50 Travis CollinsTravis Collins 4,02244 gold badges3333 silver badges4545 bronze badges 1

• 1 I saw this technique in action at least a decade ago. I can't imagine it wouldn't still work now. – eyelidlessness Commented Oct 25, 2008 at 3:51

Add a comment | 6

To expand on @PhiLho answer, you can center a very large image (or any size image) on a page with:

{ background-image: url(_images/home.jpg); background-repeat:no-repeat; background-position:center; }

Or you could use a smaller image with a background color that matches the background of the image (if it is a solid color). This may or may not suit your purposes.

{ background-color: green; background-image: url(_images/home.jpg); background-repeat:no-repeat; background-position:center; } Share Improve this answer Follow answered Oct 27, 2008 at 19:09 TraingamerTraingamer 1,42388 silver badges99 bronze badges Add a comment | 5

If you need to stretch your background image while resizing the screen and you don't need compatibility with older browser versions this will do the work:

body { background-image: url('../images/image.jpg'); background-repeat: no-repeat; background-size: cover; } Share Improve this answer Follow answered Dec 22, 2016 at 16:48 leocborgesleocborges 4,83755 gold badges3535 silver badges3939 bronze badges Add a comment | 3

If you have a large landscape image, this example here resizes the background in portrait mode, so that it displays on top, leaving blank on the bottom:

html, body { margin: 0; padding: 0; min-height: 100%; } body { background-image: url('myimage.jpg'); background-position-x: center; background-position-y: bottom; background-repeat: no-repeat; background-attachment: scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media screen and (orientation:portrait) { body { background-position-y: top; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; } } Share Improve this answer Follow answered Jun 12, 2015 at 19:50 live-lovelive-love 52.1k2626 gold badges251251 silver badges214214 bronze badges Add a comment | 3

The following code I use mostly for achieving the asked effect:

body { background-image: url('../images/bg.jpg'); background-repeat: no-repeat; background-size: 100%; } Share Improve this answer Follow edited Jul 15, 2015 at 22:27 Enamul Hassan 5,4452323 gold badges4343 silver badges5858 bronze badges answered Jul 9, 2015 at 14:33 BadarBadar 1,46011 gold badge1515 silver badges2020 bronze badges 2

• 4 You need background-size: 100% 100%; – Sablefoste Commented Aug 10, 2015 at 20:09
• I don't know what browser you use, But what I have told works for me in Firefox and Chrome. – Badar Commented Sep 2, 2015 at 18:23

Add a comment | 2 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; Share Improve this answer Follow answered Mar 4, 2014 at 8:46 BehnamBehnam 6,43911 gold badge4343 silver badges3636 bronze badges Add a comment | 2

It works for me

.page-bg { background: url("res://background"); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; } Share Improve this answer Follow answered May 28, 2020 at 16:21 msk_sureshkumarmsk_sureshkumar 44355 silver badges1010 bronze badges Add a comment | 1

Here is an example from my code:

.content{ background-image: url("SOMEURL"); background-position:center; background-size: cover; text-align: center; /* Center-aligns text horizontally */ justify-content: center; /* Center content horizontally */ }

Share Improve this answer Follow answered Oct 14, 2023 at 22:17 Metehan AkçaMetehan Akça 1111 bronze badge 1

• 1 Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Community Bot Commented Oct 17, 2023 at 11:12

Add a comment | 0

You cannot in pure CSS. Having an image covering the whole page behind all other components is probably your best bet (looks like that's the solution given above). Anyway, chances are it will look awful anyway. I would try either an image big enough to cover most screen resolutions (say up to 1600x1200, above it is scarcer), to limit the width of the page, or just to use an image that tile.

Share Improve this answer Follow answered Oct 25, 2008 at 14:15 PhiLhoPhiLho 41.1k66 gold badges9999 silver badges136136 bronze badges Add a comment | 0

image{

background-size: cover; background-repeat: no-repeat; background-position: center; padding: 0 3em 0 3em; margin: -1.5em -0.5em -0.5em -1em; width: absolute; max-width: 100%; Share Improve this answer Follow answered Feb 21, 2020 at 23:19 Ebele NwaeleneEbele Nwaelene 1 1

• 2 Welcome to SO! To write a better answer, add some reasoning as to why it works and show the code in action. You can also read about writing a good answer. – displacedtexan Commented Feb 21, 2020 at 23:25

Add a comment | 0

Simply make a div to be the direct child of body (with the class name bg for example), encompassing all other elements in the body, and add this to the CSS file:

.bg { background-image: url('_images/home.jpg');//Put your appropriate image URL here background-size: 100% 100%; //You need to put 100% twice here to stretch width and height }

Refer to this link: https://www.w3schools.com/css/css_rwd_images.asp Scroll down to the part that says:

2. If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area

There it shows the 'img_flowers.jpg' stretching to the size of the screen or browser regardless of how you resize it.

Share Improve this answer Follow answered Apr 28, 2020 at 22:16 Salah AymanSalah Ayman 322 bronze badges 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
• css
• background-image

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

3 Background image at 100% of window (and resizes with it) 2 Jasper to html background image stretch 0 CSS3 - Multiple backgrounds that covering the whole site 0 HTML: background-image not displaying 0 How to extend CSS style in a HTML so it appears throughout the whole page when viewed in broswer? -2 How to have a backround image on HTML

Related

192 Stretch background image css? 2 stretching background image 4 Have background-image "stretch to fit" the background of my page 140 How to stretch the background image to fill a div 0 Stretch background image to page 3 css - how to stretch a background image across the entire window 5 CSS stretch or fit background image 1 Stretch a part of background image 1 How To Make a Background Image not Stretch in HTML and show as a whole? 2 How to stretch a background-image to 100% width

Hot Network Questions

• What mechanism could cause a person not to cast a reflection?
• Can this strong directional blur at wide apertures still be explained by the usual arguments?
• Do we have an idiom saying a person talking too loudly or often screaming?
• Why is Ukraine's conscription age (still) so high (25)?
• 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?
• Schrödinger's cat ++
• Is there a symbol for the Hyper key?
• From exponent of sum to product of exponents
• Reducing wattage of a portable car heater
• Why sites like Mapgenie don't infringe intellectual property?
• Importing gzipped CSV files in QGIS
• Should I ask for physical recommendation letters now to avoid future issues with professors' availability?
• Are PA and Counting Theory synonymous\bi-interpretable?
• If scent means a pleasant smell, why do we say "lovely scent" or "sweet scent"?
• How does Trump plan to counteract the predicted negative effects of tariffs?
• 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
• How to design for API use cases that need different data from the same table?
• Why is the chi-square test giving unintuitive results?
• How much do ebikes actually benefit from ebike specific wheels, tires, and forks?
• Is Trinitarian Christian theism a simple hypothesis?
• Is Holy Terra Earth?
• Where can I find an up-to-date map of Stockholm Central Station that shows the platform layout?
• Polynomial.java - a Java class for dealing with polynomials with BigDecimal coefficients
• How is one supposed to play these notes?

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