Hi,

How do people set an image as background and that image covers whole background whatever the browser and OS platform is?

Thanks in advance

almostbob commented: shallow end of the gene pool? -3

Thank you very much for Googling it for me!!! However, I Googled it before you ran for help and neither of the solutions were cross-browser and cross-platform compatible. Probably I missed the perfect solution mister that's why I opened this thread.

I’ll try being nicer if you’ll try being smarter. Watch your comments!!!

smarter? top members by rank lists,
you have 17 reputation points, congratulats, exceptional, impressive, way up there
I have 400, guess I'm not very good at this, retired at 38, not very smart either
the obscenity trap would excise my opinion, synonymic of donkey perferation

nowhere in the op, does it state that any attempt has been made, or what has been tried, or is there code supplied for comment
just another 'help me with my homework' question
you want good answers, ask good questions,

one of many possible solutions is not a background property at all,
a full size image with z-index<0 to put it behind all other content, giving the appearance of a fullscreen background even in IE<8

Poor poor boy, you cannot even be a little bit smarter to understand the metaphor sayings. I’m not surprised and have no to time to rub your egos. Anyway, just go and entertain yourself with different ways. I have no time to waste with you so no need for you to answer anymore cos I’ll ignore you.

BRIGITTE has very special quote for you. I know where you stand here, do you!!!
“Knowledge makes big man humble, confuses normal man and makes small man arrogant.” It was something like this, you probably can Google it to learn something else.

This thread made me LOL sort of. You two guys sound like me and my younger brother arguing when we were growing up.

I have done this before using jQuery. This of course won't work if the browser does not have javascript enabled.

http://growmedia.ca/blog/2009/10/14/resizable-full-browser-background-image-with-jquery-preserving-aspect-ratio

I have a quote that I made up:
While a random insult may make someone look like a jerk, the one who responds to the jerk may end up looking like a random jackass.

Not trying to be offensive, but sometimes it is better to not respond to someone that is apparently having a bad day :)

hmm nice link..are you sure we can only do with JS .??please conform it .. anyways nice post !thanks a ton

There are ways to do it with css only but they are not as reliable to work in all browsers. Using jQuery (as long as javascript is enabled on the browser) has a better success rate in showing up the way you intended it to.

Here is a even more informative blog post on the different methods from css-tricks.com
http://css-tricks.com/perfect-full-page-background-image/

thanks you very much...!

I've tried some examples with css only and as you said it is not reliable since some browsers stretches the image more than the other and some other issues..... I prefer your example cos at least it works same in all browsers so thank you very much for sharing your knowledge.

Also I am 17 and still growing up to be 38!!!!!!!!!!!!

It can't be done reliably on all browsers, because webpages do not care about the size of the viewport, and browsers can't agree on a way to provide the size of the viewport.

The Internet was not designed or intended to display pages that match the size of the current viewport. And there are too many variables to ever make this work:

- Differe3nt screen resolutions
- Different aspect ratios of monitors
- Restored down pages can have any aspect ratio
- Different browsers
- Number of toolbars installed on the browser
- Browser settings

Suggestions:

- Make a large square image with the vital content in the top fourth, make its width 100%, and let the excess disappear off the bottom edge of the viewport.

- Make an image that is not harmed by multiple copies appearing, and make it repeat.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.