Jump to content
Sign in to follow this  
Guest Kensei

CSS Backgrounds

Recommended Posts

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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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 :) .

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...