Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    background image size

    Using HTML, how can I specify a background image to fit any size monitor/screen, without it tiling? I can use an image editor, photoshop, to resize it. If so, how big should I make it? Or, can I make it stretch somehow using HTML code to fit anybodies screen?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello petalmax,
    Have a look at this demo - http://nopeople.com/CSS/background_i...ize/index.html

    As long as you're aware that the end user can size his browser so your background image is very skewed out of proportion... if your ok with that, it works.

    View the source to see how it works.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello petalmax,
    Have a look at this demo - http://nopeople.com/CSS/background_i...ize/index.html

    As long as you're aware that the end user can size his browser so your background image is very skewed out of proportion... if your ok with that, it works.

    View the source to see how it works.
    Hi Excavator, I enjoyed the code for the very large sized background image and will reference it perhaps in other circumstances however for this, the image cannot be skewed.
    Looking at it I realize the height can remain and eventually be accessed with a scroll bar when more information is added to the web page. It is the width that I'd like to fit any size monitor screen. After more time with this, unfortunately, I'm still stumped. I've noticed with a body background color set at 100% for width and height, this is not an issue. Thank you and please pass along anymore thoughts here.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    You cannot currently size a background image at a percentage, say 100% so that it would fit any browser width.
    However I believe this is implemented in CSS3, but forget about that for now because it's ages away, plus it would cause problems with image re-sizing.

    Your options are to have the background image, as a simple image e.g <img src="blah.jpg" /> and set that to 100% width and position it in a way to act as a background, but this implements extra markup and is not very good design.

    Another option is to create the image so that it fades out towards the left and right into a common colour, and make it the size for the biggest resolution. That way small monitors get a nice background and large monitors also. The fading isn't needed but may help.

    Check this site for example: http://www.webdesignerwall.com/
    Their background image is huge, but on a small 1024x768 monitor you still get a nice looking background that doesn't seem chopped, whilst even bigger monitors are getting even more.

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Scriptet View Post
    You cannot currently size a background image at a percentage, say 100% so that it would fit any browser width.
    However I believe this is implemented in CSS3, but forget about that for now because it's ages away, plus it would cause problems with image re-sizing.

    Your options are to have the background image, as a simple image e.g <img src="blah.jpg" /> and set that to 100% width and position it in a way to act as a background, but this implements extra markup and is not very good design.

    Another option is to create the image so that it fades out towards the left and right into a common colour, and make it the size for the biggest resolution. That way small monitors get a nice background and large monitors also. The fading isn't needed but may help.

    Check this site for example: http://www.webdesignerwall.com/
    Their background image is huge, but on a small 1024x768 monitor you still get a nice looking background that doesn't seem chopped, whilst even bigger monitors are getting even more.
    Hi Scriptet, I like your suggestions and I love the website from the link you provided. I looked all over it to isolate the background image, but with no luck so far. If you know the steps of how this was done could you direct me further? It looks like javascript and css. Perhaps it's this piece of code, http://www.webdesignerwall.com/wp-co...x/thickbox.css, but still can't isolate the background image. Thanks for all the input.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •