Stretching Images When Using As Background Image - Stack Overflow

Trang chủ » Html Background Image Stretch To Fit Without Css » Stretching Images When Using As Background Image - Stack Overflow

Có thể bạn quan tâm

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. 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 Stretching images when using as background image Ask Question Asked 13 years, 7 months ago Modified 11 years, 11 months ago Viewed 11k times 0

I was trying to set an image as background image for my django application. But when i set it, it is getting displayed as tiled image. ie without actually stretching the image, same image is tiled and shown 4 times. Can somebody tell me how to stretch the image and set it as a background image. I will paste my code here. I am sure some attribute must be there setting this, which i couldnt find on googling.

<body bgcolor=" #408080" background="/static/paper.jpg" background-size: 100%; >
  • html
  • css
  • xhtml
Share Improve this question Follow edited Apr 12, 2011 at 8:29 Daniel Roseman's user avatar Daniel Roseman 599k68 gold badges901 silver badges918 bronze badges asked Apr 12, 2011 at 7:18 rv_k's user avatar rv_krv_k 2,4037 gold badges40 silver badges52 bronze badges 3
  • It's not working properly because you're using deprecated markup and trying to use a CSS3 property as an element attribute. – jrn.ak Commented Apr 12, 2011 at 7:26
  • This is neither Django nor Python related. – Daniel Roseman Commented Apr 12, 2011 at 8:29
  • Why don't you resize the image to the right proportions before using it as a background? Wouldn't that help improve the quality also? – Niklas Commented Apr 12, 2011 at 9:28
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) 4

Instead of using a background image on the body tag you should add a image tag right below body, set the position to absolute and a low z-index and then have width=100% and height=100%.

Share Improve this answer Follow answered Apr 12, 2011 at 7:24 femseks's user avatar femseksfemseks 2,9643 gold badges24 silver badges20 bronze badges 1
  • Won't that distort the picture by breaking the aspect ratio? – jrn.ak Commented Apr 12, 2011 at 7:27
Add a comment | 3

You need to apply this as a style, not as an attribute. That will work if your browser supports CSS 3:

style="background: url(/static/paper.jpg); background-size: 100%;"

Some background info:

http://css-tricks.com/perfect-full-page-background-image/

http://css-tricks.com/how-to-resizeable-background-image/

Share Improve this answer Follow answered Apr 12, 2011 at 7:26 Aaron Digulla's user avatar Aaron DigullaAaron Digulla 328k110 gold badges621 silver badges833 bronze badges Add a comment | 2

In short: no, you can't stretch the background image with html/css1/css2, you're only options is to either use css3 ( witch is not fully suported by all browsers ) or to use background-attachment and background-repeat css porperties to achieve an alternative result …

Another option would be to use an img tag as a background using z-index css proprety however you'll find it dificult to get it working proprely in all major browsers .

Share Improve this answer Follow answered Apr 12, 2011 at 7:25 Poelinca Dorin's user avatar Poelinca DorinPoelinca Dorin 9,6932 gold badges40 silver badges43 bronze badges Add a comment | 1

You can stretch your background to 100% width and height by putting your image in an <img> tag and give it a z-index of -1 so it acts like a background and is behind everything else. This works in all browsers.

<img src="..." /> img{ position:absolute; z-index:-1; width:100%; height:100%; }

If you do not want to break the aspect ratio, just set either width or height and not both.

Check working example at http://jsfiddle.net/UXBRM/1/

Share Improve this answer Follow answered Apr 12, 2011 at 8:30 Hussein's user avatar HusseinHussein 42.8k25 gold badges114 silver badges143 bronze badges Add a comment | 0

Edit your image with paint. Click image and save your image according to your need.

This will work in any html , surely.

Share Improve this answer Follow answered Jan 4, 2013 at 9:26 piyush's user avatar piyushpiyush 1 Add a comment | 0

As others mention, you should always try to define as much of the attributes in your css and not directly where you have the path to the image itself. This is how it was done way back and is deprecated and probably why it is not working.

use the img src="poefwpf.png" and maybe a to easy edit in your css:

#imgex img { width: 100%; height: 100%; (maybe also z-index:-1;) } Share Improve this answer Follow answered Jan 4, 2013 at 11:54 Emanuel Olsson's user avatar Emanuel OlssonEmanuel Olsson 1933 silver badges16 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
  • xhtml
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!
2 Stretch image as background 0 Background image is stretching 192 Stretch background image css? 2 stretching background image 1 background image stretch and crop 1 Fixed stretching background image 0 Stretch background image to page 1 Setting background image without stretch the image using CSS 1 How To Make a Background Image not Stretch in HTML and show as a whole? 0 Background image stretches when space is available

Hot Network Questions

  • What was the female equivalent of πάππας in Ancient Greek?
  • turn wire frame of ico sphere into a cage
  • Does length contraction "break the speed limit"?
  • Isekai mahwa with silver haired male lead who is an illegitimate prince
  • Does the Truth not exists or does it seems to not exists due to our abstraction?
  • Importing gzipped CSV files in QGIS
  • Find the Smallest Data Type for a Number
  • What is the proper way to say "voice direction" in German?
  • What exactly is the cornerstone that Mark 12:10 speaks of?
  • Deutsche Bahn Berlin: can I use a different departure station?
  • Is it possible to use NAS hard drives in a desktop?
  • Why does Jesus tell the Jews to follow the Pharisees teaching while elsewhere He speaks of them creating unnecessary rules?
  • What are the pros & cons of downdraft ventilation?
  • BIOS drive order is inverse of Windows'
  • What is the wave icon with a dot on the call screen?
  • Meaning of "I love my love with an S—" in Richard Burton's "Arabian Nights"
  • Curly bracket on the side of a proof tree (ebproof package)
  • When did Storm Troopers stop being clones?
  • Does the 90 day window for VWP reset for extended stay in Mexico?
  • A fantasy story with an imp in a box that paints pictures
  • How does Trump plan to counteract the predicted negative effects of tariffs?
  • Is there a symbol for the Hyper key?
  • What style/Form is the Stranger's Poem in, from The Magnus Archives?
  • What powers do police have to force people onto trains?
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

Từ khóa » Html Background Image Stretch To Fit Without Css