How to make my background fit to all screen resolutions?

Question

This is my background image: http://static.tumblr.com/nknimh6/L5el9cc5e/trying.jpg
My current screen resolution is 1366x768
and here is my current background code:
body { background: {color:Background} url('{image:Background}') center center fixed repeat; color: {color:Text}; font-family: {font:Body}; font-size: 11px; padding-top:5px;background-position:center center;text-transform:none;}

I have read answers like putting width="100%" height="100%" but I don't know where to put it in the code above. Where do I put it? Because if I put it like this:

body { background: {color:Background} url('{image:Background}') width: 100% height: 100% center center fixed repeat; color: {color:Text}; font-family: {font:Body}; font-size: 11px; padding-top:5px;background-position:center center;text-transform:none;}

my background becomes blank :| please help, thanks!

Answer 1

CSS 3 is the only way currently to resize background images and only Opera supports all of CSS 3. Other browsers only support parts of CSS 3 to date. But, not all is lost. There are techniques to get your background to fill out in CSS 2.1:



http://www.cssplay.co.uk/layouts/background.html

http://paynelessdesigns.pastebin.com/f3fbc9dfd



Ignore what MFWebServices said.



Ron

Answer 2

Hi.



Your own screen resolution doesn't matter. It's what your visitors' screen resolution is, that matters. You do not need to apply height, but you could apply width to 100%;



Your css definitions are incorrect. Try the code below.



BODY {

width: 100%;

background-image: url('/nknimh6/L5el9cc5e/trying.jpg');

background-attachment: fixed;

background-repeat: no-repeat;

background-position: 50% 50%;

background-color: white;

font-family: arial,tahoma,sans-serif;

font-size: 11px;

padding: 5px 0px 0px;

}



Edit:



Obviously, the "Ron", top contributor that it is, didn't bother to look at your background image. If it did, it would realize resizing it wouldn't do you any good because from what I can tell, you are probably going to place text inside the white area, right ?



Automatically resizing your image would probably end up displacing the text inside that white area, overwriting the graphics on one side, or both.



There is nothing wrong with the code I gave you, for your circumstance, but unlike the "Ron", I would recommend you seek as much help and advice as you can...

Answer 3

For YouTube, it's kind of hard to get it absolutely right for every monitor. Monitor sizes could have a huge impact on the way it's displayed.