View Full Version : image resizes with different browsers?

May 29th, 2009, 07:34 AM
i'm working on my site right now and i've run into a problem. the image i'm using on looks good on my screen. i need the image to resize for different browsers/screens. i've read online about this for seriously days and just can't seem to figure it out. note: i'm very new to programming. i don't know much and have just been using adobe flash and dreamweaver. i used the flash programs to design them and dreamweaver to edit the html. i know a little bit about html and css but i reallllyy need this site so i have to figure it out. so i'm sorry for being such a noob.

basically: i need this site's background image to resize to fit different browsers and windows.
please explain?

May 29th, 2009, 10:38 AM
There is no way to resize a background image in CSS(as of now). Though you could fake this by some z-index tricks, see http://www.cssplay.co.uk/layouts/background.html

May 29th, 2009, 11:25 AM
thank you for being direct, abduraooft. saved me a lot of time trying any longer :p

May 29th, 2009, 11:57 AM
Well, I just have to intervene here so that you donít get off on the wrong foot and thing itís OK to do what abduraooft showed you with that link. Itís certainly possible to do this but just because itís possible doesnít mean that itís good or right to do this.

Iíd like to ask you to use Firefox to visit that page and then switch off the styles (View > Page style > no style). What do you see? Iíll tell you: You see a huge image of a rabbit and nothing else unless you scoll down ten miles. This is not the right approach! This isnít semantic (http://boagworld.com/technology/semantic_code_what_why_how/) at all and forces the visitor to see an image thatís totally irrelevant to them or the understanding of the site. And even worse: you force visitors viewing your site with anything other than a regular computer to download a huge image and then spend forever to scroll down just to see the actual content they came for.

I can tell you what the correct approach could be. The first thing you need to know is: the background image isnít important to understand the subject of the site (or shouldnít be!). People should still get what you want to tell them without seeing any background image. This is why a background image must not be an HTML image (<img>) but actually a background image applied through CSS.

So in future create/use background images where it either doesnít matter if it fills the entire screen or use images that can tile, and thus, repeat very well.

As to your crrent image this is relatively simple, actually: Slice your image where you have the graphic in the top left and the graphic in the bottom right in two separate images. You then apply these images as CSS backgrounds to two elements (e. g. <html> and <body>) in the respective corners and whenever one resizses the viewport the images would stay in the corners and kinda ďscaleĒ with the viewport size. The text in the bottom left and top right shouldnít be a background image anyway, or at least the top right should be a separate image as well.

May 29th, 2009, 10:59 PM
thanks for your advice, stephan, you're absolutely right. i'm gonna work on modifying it so that i just don't use that image. i like it, but you're right. that's not the important thing on the site.