MetaChat - I Need Some HTML Help And I Didnt Know It Until I Got A Better Monitor

MetaChat is an informal place for MeFites to touch base and post, discuss and chatter about topics that may not belong on MetaFilter. Questions? Check the FAQ. Please note: This is important.

15 June 2009

I Need Some HTML Help And I Didnt Know It Until I Got A Better Monitor I recently got a new high-res widescreen monitor which required resetting my computer resolution to 1680 X 1050 pixels . →[More:]i love the monitor, but have noticed that the pics on the home page of my website (above link)and on the photo galleries page repeat themselves when viewed with higher resolution . its been this way for years, but i never noticed it because my old monitor's resolution was wimpy and both pics showed up as full screen , which is ideally what i would like to have happen for all resolutions .

does anyone know a simple fix for this ? i havent been able to find one and would appreciate any suggestions.

thanks

post by: rollick at: 10:40 | 5 comments

CSS styles let you specify that you don't want the background to repeat. You can put these styles inline with your HTML, so the quickest fix would be to replace

background="fogbomberweb.jpg"

in your body tag with

style = "background-image: url(fogbomberweb.jpg); background-repeat: no-repeat;"

posted by chrismear 15 June | 11:03

You can also write that as:
background: url(fogbomberweb.jpg), no-repeat;

posted by kirkaracha 15 June | 12:38

thanks for your help , but unfortunately neither of these helped . they did make the image appear once, but it was a small image and didn't stretch the pic out to be the background or wallpaper that i am really going after .

thanks for your suggestions. they are appreciated

posted by rollick 17 June | 09:04

stretch the pic out to be the background or wallpaper that i am really going after

There's no simple solution for this. One solution would be to use some javascript to determine the size of the browser window and then to write out an absolutely positioned img tag with a low z-index property. Getting that to work across different browsers may be a bigger pain in the ass than it's worth to you (not knowing how important it is to you to have it exactly right). I'd think a js framework like script.aculo.us would have an effect like that available, but I don't really know such frameworks very well and didn't see anything like that after a quick glance at the API.

Also, this might help. Again, not simple, unless you can hold out with that (long deprecated) body background attribute until CSS3 is better supported.

posted by danostuporstar 17 June | 13:24

ok thank you .

i would never have thought this change would be complicated lol

posted by rollick 19 June | 21:55

← Monday therapy: OMFG STFU - people I'd love to say this to... || Interesting article about Portugal's drug decriminalization →

HOME || REGISTER || LOGIN