Topic: 100% and strech. (Page 1 of 1)

Ok. I'veen using DW since version 3. I've graduated to and love MX. I have a problem that I can't figure out. After all this time you'd think I'd know how to do this, but I don't. I'm missing something. I'm trying to make a single graphic, whether it be a graphic or photo, stretch the lenght of the page without having scroll bars show up on the bottom of the page. I think it has something to do with X,Y values or something. Anyone have any idea what I'm on about? LOL. Do I need to write some extra code to accompish this? Let me know please. Thanks.

quote:

---

Anyone have any idea what I'm on about?

---

Uhmmmmm...


OK, so is this image embedded in the page through the <img> tag? And you want this img to stretch the height of the page?

If that's this case, this is gonna require some CSS (yay).

So give the <img> a class name, like so:

<img class="stretch" src="blah.jpg" height="[i]height of the actual image, not stretched[/i]" width="[i]width[/i]" border="0" alt="" />

Then this CSS:

html, body {

          height: 100%;

          }



img.stretch {

          height: 99%;      /* not 100%, or you'll get scrollbars */

          }

At least, that's how I *think* it should work. Haven't tried it really...

I know how to do that one, but thank you for posting. I have a link here, it's http://www.11oh1.net/, I'm trying to get the same effect on the top of the site as "krets", has done. Duhh. LOL. Maybe I should just ask krets right? LOL. Anyway, if anyone knows how this is done I would greatly appreciate it. Thanks.

Ok...I'm not sure if I understand right, but if I do....

element {
background-image:url(path-to-image)]
background-repeat:repeat-y;
}


of course, that isn't stretching the image....it is tiling it.

hmmm. I'll give it a shot. I don't really want to tile. I want to use one single image [photo] across the top of a page. I'm still working on figuing it otu. Thanks.

You can use a single photo if you choose a long one (say 1280 pixels wide, at least) and at most resolutions, parts of it will be cut off.

That's whats on krets site.

I'm not sure you want to stretch an image. Resizing an image larger than it's original size will make it ugly, and letting the browser handle it will make it pixelated. Or is that what you want...?

ozphactor, thanks. I want to use just the picture as is, no stretching becuase of the distortion. But here's the next question. If I use an image that is 1280 pixels wide, wont scroll bars appear at the bottom of the page for users viewing in a small screen size/resolution?

Yeha, stretching is bad.

Krets image is not stretched. I have not looked to see how it is set up, but it will either be a single large image, or a repeated large image.

If you add the image in as an <img> then yes, you'll get scrollbars. If you set it as the background-image, however, you will not.

Generally, the CSS background-image property is the way to go.

There aren't a lot of cases where you'd want to use the <img> tag... but just for the record, there is a way to get to get the same effect with an <img> tag:

Simply wrap the image in a div, size the div to your needs, and use "overflow: hidden" on it.

Thanks guys. YOu know I didn't even think of setting the background image to gain the same effect. I need the stupid award today. LOL. Thanks again. Now I know what to do.

Hey, ya'll stop talkin 'bout me now ya hear?

:::11oh1:::