5 replies [Last post]
ziffa27
ziffa27's picture
Offline
Regular
Malta
Last seen: 47 weeks 6 days ago
Malta
Timezone: GMT+2
Joined: 2008-09-10
Posts: 20
Points: 2

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

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 46 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

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.

I'm no expert, but I fake one on teh Internets

ziffa27
ziffa27's picture
Offline
Regular
Malta
Last seen: 47 weeks 6 days ago
Malta
Timezone: GMT+2
Joined: 2008-09-10
Posts: 20
Points: 2

Thanks

Thanks :thumbsup:

amber
amber's picture
Offline
newbie
UK
Last seen: 4 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2008-05-10
Posts: 8
Points: 0

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>

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 46 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

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.

I'm no expert, but I fake one on teh Internets

ziffa27
ziffa27's picture
Offline
Regular
Malta
Last seen: 47 weeks 6 days ago
Malta
Timezone: GMT+2
Joined: 2008-09-10
Posts: 20
Points: 2

Thanks i will try it

Thanks i will try it :thumbsup: