How To Stretch The Background Image To Fill A Div - Stack Overflow

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 to stretch the background image to fill a div Ask Question Asked 12 years, 5 months ago Modified 5 years, 5 months ago Viewed 454k times 140

I want to set a background image to different divs, but my problems are:

1. The size of image is fixed(60px).
2. Varying div's size

How can I stretch the background-image to fill the whole background of the div?

#div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png); height:180px; width:200px; border: 1px solid red; }

Check the code here.

• css
• html
• background
• background-image

Share Improve this question Follow edited Oct 29, 2017 at 21:30 Nisse Engström 4,7522323 gold badges2828 silver badges4343 bronze badges asked Jun 27, 2012 at 9:56 Muhammad UsmanMuhammad Usman 10.9k2222 gold badges7474 silver badges109109 bronze badges Add a comment |

10 Answers 10

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

Add

background-size:100% 100%;

to your css underneath background-image.

You can also specify exact dimensions, i.e.:

background-size: 30px 40px;

Here: JSFiddle

Share Improve this answer Follow edited Dec 7, 2018 at 19:04 Devin Rhode 25.1k88 gold badges6565 silver badges8383 bronze badges answered Jun 27, 2012 at 10:00 hendos43hendos43 2,17011 gold badge1414 silver badges1414 bronze badges 8

• 5 IE not support this. Wt to do? – KarSho Commented Mar 21, 2013 at 5:12
• 9 it doesn't work, see bellow for a better answer: background-size:100% 100%; – chriscatfr Commented Jun 23, 2014 at 19:23
• Why is it multiplying instead of stretching the image to fit the container: jsfiddle.net/qdzaw/424 – SearchForKnowledge Commented Oct 24, 2014 at 19:01
• 1 You need to add background-repeat: no-repeat; – Rorrik Commented Jan 29, 2015 at 3:37
• 1 hendo, your JSFiddle is no longer working (dead links to hootsuite), can you please update it? – TylerH Commented Aug 4, 2015 at 16:35

| Show 3 more comments 89

You can use:

background-size: cover;

Or just use a big background image with:

background: url('../images/teaser.jpg') no-repeat center #eee; Share Improve this answer Follow edited Jan 14, 2014 at 11:29 answered Jan 14, 2014 at 11:07 OuadieOuadie 13.2k44 gold badges5353 silver badges6363 bronze badges 3

• 6 cover doesnt strech, it can cut picture – drdrej Commented Jul 2, 2016 at 19:24
• 2 I don't know what you're trying to do with your background img but background-size: cover; background-position: center will fill the background of the div without stretching the image – Ouadie Commented Nov 24, 2016 at 16:32
• 1 Works great for pictures where stretching would disform the image! – Stijn Van Bael Commented Apr 5, 2017 at 9:18

Add a comment | 53 Modern CSS3 (recommended for the future & probably the best solution) .selector{ background-size: cover; /* stretches background WITHOUT deformation so it would fill the background space, it may crop the image if the image's dimensions are in different ratio, than the element dimensions. */ }

Max. stretch without crop nor deformation (may not fill the background): background-size: contain; Force absolute stretch (may cause deformation, but no crop): background-size: 100% 100%;

"Old" CSS "always working" way

Absolute positioning image as a first child of the (relative positioned) parent and stretching it to the parent size.

HTML

<div class="selector"> <img src="path.extension" alt="alt text"> <!-- some other content --> </div>

Equivalent of CSS3 background-size: cover; :

To achieve this dynamically, you would have to use the opposite of contain method alternative (see below) and if you need to center the cropped image, you would need a JavaScript to do that dynamically - e.g. using jQuery:

$('.selector img').each(function(){ $(this).css({ "left": "50%", "margin-left": "-"+( $(this).width()/2 )+"px", "top": "50%", "margin-top": "-"+( $(this).height()/2 )+"px" }); });

Practical example:

Equivalent of CSS3 background-size: contain; :

This one can be a bit tricky - the dimension of your background that would overflow the parent will have CSS set to 100% the other one to auto. Practical example:

.selector img{ position: absolute; top:0; left: 0; width: 100%; height: auto; /* -- OR -- */ /* width: auto; height: 100%; */ }

Equivalent of CSS3 background-size: 100% 100%; :

.selector img{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }

PS: To do the equivalents of cover/contain in the "old" way completely dynamically (so you will not have to care about overflows/ratios) you would have to use javascript to detect the ratios for you and set the dimensions as described...

Share Improve this answer Follow edited Jun 19, 2019 at 23:15 user1585455 answered Jun 25, 2015 at 4:32 jave.webjave.web 14.9k1414 gold badges105105 silver badges132132 bronze badges 0 Add a comment | 24

For this you can use CSS3 background-size property. Write like this:

#div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png); -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; height:180px; width:200px; border: 1px solid red; }

Check this: http://jsfiddle.net/qdzaw/1/

Share Improve this answer Follow edited Oct 29, 2017 at 21:23 Nisse Engström 4,7522323 gold badges2828 silver badges4343 bronze badges answered Jun 27, 2012 at 9:57 sandeepsandeep 92.7k2424 gold badges139139 silver badges156156 bronze badges 2

• 1 IE not support this. Wt to do? – KarSho Commented Mar 21, 2013 at 5:16
• 4 For IE use IMG tag give position absolute with height & width 100%. – sandeep Commented Mar 21, 2013 at 5:34

Add a comment | 22

You can add:

#div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png); background-size: 100% 100%; height:180px; width:200px; border: 1px solid red; }

You can read more about it here: css3 background-size

Share Improve this answer Follow edited Oct 29, 2017 at 21:24 Nisse Engström 4,7522323 gold badges2828 silver badges4343 bronze badges answered Jun 27, 2012 at 10:05 XellaXella 1,2681010 silver badges1010 bronze badges 1

• background-size is a css3 and not supported in all browsers – Mahdi Jazini Commented Nov 24, 2016 at 16:22

Add a comment | 3

by using property css:

background-size: cover; Share Improve this answer Follow answered Aug 26, 2015 at 9:38 Đọc truyện hayĐọc truyện hay 2,0132222 silver badges1818 bronze badges 1

• background-size is a css3 and not supported in all browsers – Mahdi Jazini Commented Nov 24, 2016 at 16:23

Add a comment | 2 body{ margin:0; background:url('image.png') no-repeat 50% 50% fixed; background-size: cover; } Share Improve this answer Follow edited Jan 22, 2016 at 4:01 trapper 12k77 gold badges3939 silver badges8383 bronze badges answered Jan 21, 2016 at 21:58 Zen Of KursatZen Of Kursat 2,77811 gold badge3333 silver badges4848 bronze badges Add a comment | 2

Use: background-size: 100% 100%; To make background image to fit the div size.

Share Improve this answer Follow edited Jul 20, 2018 at 4:30 answered Jul 20, 2018 at 2:56 jagan reddyjagan reddy 7155 bronze badges 0 Add a comment | 0

To keep the aspect ratio, use background-size: 100% auto;

div { background-image: url('image.jpg'); background-size: 100% auto; width: 150px; height: 300px; } Share Improve this answer Follow answered Oct 29, 2017 at 19:13 atulmyatulmy 1,3831515 silver badges2424 bronze badges Add a comment | 0

Try something like this:

div { background-image: url(../img/picture1.jpg); height: 30em; background-repeat: no-repeat; width: 100%; background-position: center; } Share Improve this answer Follow edited Oct 29, 2017 at 21:32 Adil B 16.6k1212 gold badges6868 silver badges8888 bronze badges answered Oct 29, 2017 at 19:51 DeejayDeejay 1,05711 gold badge77 silver badges1111 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

• css
• html
• background
• background-image

or ask your own question.

• Featured on Meta
• We’re (finally!) going to the cloud!
• More network sites to see advertising test [updated with phase 2]

Visit chat

Linked

4 How to make background image cover entire screen and ignore aspect ratio in CSS 2 How to stretch a background image to a fill a div 0 Make background image fill screen, currently height 0px 0 How to make bg image width:100% of screen in head module?

Related

103 How do I stretch a background image to cover the entire HTML element? 2 Stretch image as background 0 Stretch an image in a div background 192 Stretch background image css? 2 stretching background image 4 Have background-image "stretch to fit" the background of my page 0 Stretch background image to page 5 CSS stretch or fit background image 0 Set background image inside div stretch 0 Stretch CSS Background Image

Hot Network Questions

• Is there definitive confirmation that the Pope sacked Cardinal Tremblay in "Conclave"?
• In AES GCM, would using different nonces that are close reveal data?
• Do additionally installed drivers survive Windows 11 "Reset this PC"?
• What are Christian responses to Carlo Alvaro's argument against Christian theism?
• Is this basic string encryption in PHP secure?
• Could rocket exhaust eventually lead to detrimental effects from interplanetary space pollution?
• relative pronouns and their order in instruction manuals
• How a person become a rabbi around 1 CE?
• How should the word, before, in Exodus 20:3 be interpreted?
• Use of “12 m.” for noon and “12 p.m.” for midnight
• How to demystify why my degree took so long on my CV
• A fantasy movie with two races, "Big Ones" (=us) and smaller ones, about saving a newborn baby from a cruel queen
• A Title "That in Aleppo Was"
• Looking for short story about detectives investigating a murder in the future
• Does Russel's Paradox apply to predicate logic also?
• Are prenups legally binding in England?
• Why is the term "card" used in "expansion card"?
• Constructing WKT POINT from GeoJSON data fields in OGR
• Time Travel Short Story: Someone travels back in time to the start of the 18th or 19th Century. The naming of the Genre
• How to Prove This Elegant Integral Identity Involving Trigonometric and Square Root Terms
• ISO 8601 intervals in date arithmetic with date command
• point a domain name to a vm with internal IP
• How to make an arrow leap over another to prevent their intersections in Tikz?
• Is 'I screamed that she get out of there' the correct way to report 'Get out of there, I screamed'

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