CSS Backgrounds

[Guest Kensei]

I've noticed on different screen resolutions that my background image won't fully show up. Is there any way I could set it to auto-resize to fit the screens of different resolutions?

[logz]

sorry i cant help much with this one, but generally, websites are designed to display a small screen resolution. I think its 800x600 but im not sure. Try creating your site around this resolution, but if you cant, maybe try creating different versions of your website for different resolutions?Maybe this will help?http://www.w3schools.com/css/css_dimension.asp

[alzable]

Yea, if there was a way to stretch the image, it would be possible but otherwise, you may need to do what logz said.alzable

[boen_robot]

If you have had read the Web Building Tutorial you would have know there is a way. In fact, it's written in the link above that logz gave. Look at the "%". What do you think it means? YES! You've guessed it! It's a sign for a percentage value. The percentage however is relative to the screen resolution. So if you want to scale-to-fit different elements, you need to use theese relative values .

[alzable]

Yes, but this is stectching an image not a table or somtin!

[actionsketch]

I havn't tested this theory, but I imagine you could do it with javascript...something like

<img onload="resizeImage(this);" src="myimage.jpg">***function resizeImage(img){    img.style.width=screen.width;    img.style.height=screen.height;}

Although you would have to play a little bit of a guessing game on how much of the screen the person is actually using to view the webpage. for that reason, I found this... dont know if it works, I just grabbed it off of a website:

function alertSize() {  var myWidth = 0, myHeight = 0;  if( typeof( window.innerWidth ) == 'number' ) {    //Non-IE    myWidth = window.innerWidth;    myHeight = window.innerHeight;  } else if( document.documentElement &&      ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {    //IE 6+ in 'standards compliant mode'    myWidth = document.documentElement.clientWidth;    myHeight = document.documentElement.clientHeight;  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {    //IE 4 compatible    myWidth = document.body.clientWidth;    myHeight = document.body.clientHeight;  }  window.alert( 'Width = ' + myWidth );  window.alert( 'Height = ' + myHeight );}

that should give you the width/height of the viewable area. Then you might want to have a function that calls it self every second to change the width/height of the image if it changes.