image width and CSS (external)

@CarolWDec 31.2004

I’m confused again <g>.

I noticed that people seem not to “take up the whole screen space” in absolute terms when putting images (or probably, anything else) on a web page.

I also noticed; I can’t remember where, a warning against using percentages (for some purposes? some browsers?), but I think I’ll try working with percentages for some things at least (text size? – width of images? maybe even heights of images?)

Also,I’m confused about how a declaration of (original) image width and height in the HTML code relates to how the image appears on a browser page. That is, say, I have a .jpg as a banner for many of my pages; it’s a scene, but it would be all right to stretch it a bit either way. However, I also have a logo I laid right into the image, which has a circle that should stay circular instead of becoming an ellipse. Uh, oh. It’s visible here:

~~[url]~~http://www.islandnet.com/~cwhitney/[/url]

The original scene image is 760px wide; 116px high.

I designed my site for 800×600 resolution, though I gather more people are now using 1024×768, but I use 800×600 because my vision is so poor, and I need larger stuff <g>. I did check my site with the higher resolution, and it looked okay to me.

If I were to re-make the scene image (easy to do), and make it 800px wide, would the image tend to wrap? What should I do about that sort of thing?

What’s bugging me is that in all my browsers, the image doesn’t quite cover the entire width of the screen. I guess I should try using width: 100% and see what happens! I’m afraid the embedded logo would squash top-to-bottom <g>. (I’ll try it anyway).

In preparation for stacking my headers in the photo galleries on top of the banner image I have in those, I was reading about the box model last night, and noticed something called z-index, which I guess I also need to play with.

Thanks to MstrBob, I got my background image working, and noticed I’ve planned that one badly, too, as it is wrapping; instead of a stripe down the left side, I have the left-side view as desired, and it wraps and produces a stripe down the right side as well! (That’s not visible on my site, because I haven’t put it up yet; I need to work on several things first, and get them into my external CSS file – such as, formatting paragraphs so the margins work as I intended, and centering images in the photo galleries.

And by the way, MstrBob, I had to change the repeat in my CSS file; I had repeat-x, but I had misunderstood, and I took the “-x” out. I just didn’t understand the relationship between what the image is (.gif with a stripe on the left side, and the rest of it is transparent) – and the repeat function. But my CSS validated, and though what I have is ugly, and I need to fix it, I have an approach to fixing that one. (Change the original image.)

And can I stack my logo, using z-index, on top of the banner, instead of embedding it in the banner? If I can do that, I wouldn’t have to worry about the stretch factor, so to speak.

Sorry for the confusion again!

Fri, 31 Dec 2004 09:39:39 (PST)

to post a comment

CSS

5 Comments(s) _↴

@MstrBobDec 31.2004 — #Yes, using positioning and z-index, you can place your logo over the banner. However, for the best affect, you'll want to make sure that the logo has a transparent background. Which means it will have to be a .gif but that shouldn't be hard.

Images should not be given dimensions in percentages, unless they are scalable. If you've got a banner, define it's width in pixels, never rely on browser resizing. We must accept the fact that images won't take up the entire screen.

Also, never set a layout to have a width of 800 pixels. A screen may be at 800 x 600, but take into account the scrollbar on the left, and that not everyone maximizes their window. Best to keep it around 770px max, though I find 750px to be comfortable, and a fair size even on larger resolutions.

If an image or block level element is wider than the screen, than a horizontal scrollbar will appear at the bottom. This is found to be annoying by most users, and you'd do best to avoid it.

You might want to rethink the repeat function. Say you wish to have a vetical strip down the left side of your page. One method is to create a huge background image and set it to be fixed. This would be a large file, though! Your best bet is to make an image only a few pixels large. Then, you use repeat-y and it will be stacked vertically, creating a column. Smaller file == faster load time. You can use repeat-x to achieve horizontal tiling as well. This is the best way to do backgrounds, IMO.

@zachzachDec 31.2004 — #Whoa. I got lost in the second paragraph. Try stating:

1. What your trying to do

2. What your problem is(if any)/how to do the above

3. What you have noticed

4. Anything else you want to stick in

I'd love to help, but when I read it I came out with: "Wtf?"

@CarolWauthorDec 31.2004 — #I'm logged in, according to what I see on the screen, so I hope I don't lose my login trying to reply, as I did earlier this morning. Maybe my reply was too long so I got kicked out <g>.

This reply is to MstrBob and poor zachzach, whom I've confused no end, haha! Sorry about that; zachzach! If you don't know wtf is going on, that's because I don't, either, so I can't write about it in a way that makes any sense <chortle!>

Anyway, thanks for the suggestions, MstrBob; I think I'll go cut my main banner back to 740 px wide. I made a new tendrils image (using a photo I like better than the one I used before). I made it only 5px wide, tiled it vertically (repeat-y) but not horizontally (repeat-x) - and still it wrapped to both sides of the screen. Maybe my banner is too wide (760px). This was in a photo gallery, not on one of my main screens, and that banner will make no difference, cut back, since it has nothing on it in the middle area, only the logo at the left and a small decorative image at the right, which can go anywhere.

Since my head really is spinning, I suppose I'll take a short break, but I know me; I'll be jumping back into it at the first sign of brain-recovery (or what I think is that) <hehe>

Thanks again! Good stuff you're giving me! Happy New Year to All.

Fri, 31 Dec 2004 15:56:57 (PST)

@ray326Jan 01.2005 — #To answer one part of your question, the height and width attributes in the img tag are not meant to be used to rescale the image. They should match the physical pixel dimensions of the image and are used by the browser to complete its page layout before the images are retrieved.

@amazing_andr3Jan 01.2005 — #what I suggest is making a long header (to cover the whole screen width at 1024x768), and setting it as page background.

what will happen is that at 800x600 the last 200 or so pixels will be cut out, and no horrizontal bar will appear.

I used it for http://andr3.s5.com/islam where at higher resolutions more of the header will be revealed, and in the end the background color will take over and make the header as long as it takes.

I was just wondering: is it OK to state the width as width="90" or should I say width="90px"? I think XHTML says you have to state all units, but the validator didn't count my leaving out the px as an error.

Also in #CSS _↴

[RESOLVED] Text issue within Tabs Heaps of CSS problems! Any help would be gr8!mouseover on button

Success!

Help @CarolW spread the word by sharing this article on Twitter...

Tweet This

image width and CSS (external)

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

image width and CSS (external)

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴