Jump to content

CSS Backgrounds


Guest Kensei
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :) .

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...