Thu, 2008-10-23 08:24
Hi I am designing a page in which I want to include a background image that is anchored to the bottom right of the screen. I have managed to do this, the only problem I am having is that due to the image being a big one (dimensions) when the user's screen is of a lower resolution such as 800 x 600, the image takes over most of the page's background which is distracting from the main content. My idea is to have the image resize based on the user's screen resolution. Is this a feasible solution and if yes, how can it be achieved? Thanks
Thu, 2008-10-23 09:35
#1
You would have to wade into
You would have to wade into the shady world of Javascript (which not all users have or allow) to possibly send a different, smaller image to those with a smaller browser window (not just smaller screen rez-- those "power users" with 100 windows open often don't have their browsers 100% open anyway) or change the dimensions of the image.
Another thing which might be a better idea is to have some sort of semi-opaque background for the main body of your page, so that the image can't interfere with the reading of text. Not sure if this is something that would solve your problem but I've used it before. I once had a page where there was an image to the left, and if the screen size was small, the image would move over into the sidebar. Then the text in the sidebar wasn't readable so that sidebar text got a semi-transparent white png and IE6 got a gif with every other pixel being transparent (poor man's semi-transparency lawlz). Later, I rewrote the page so this problem didn't exist in the first place, but that was my solution at the time.
Sat, 2008-10-25 12:52
#2
Thanks
Thanks :thumbsup:
Mon, 2008-10-27 08:01
#3
Just a thought - wouldn't
Just a thought - wouldn't another solution be to make the image scalable? (It couldn't be called up as a background image then.) e.g.<a href="http://www.w3.org/Style/Examples/007/figures" rel="nofollow">http://www.w3.org/Style/Examples/007/figures</a>
Mon, 2008-10-27 08:20
#4
It's a background because
It's a background because content sits on top of it. So, now you have to try to use relative or absolute positioning to get the content to slide over the div or img tag.
Mon, 2008-10-27 14:48
#5
Thanks i will try it
Thanks i will try it :thumbsup: