Masthead Images within Page Wrapper

[R_Schreiber]

I don’t specify a width for my masthead image. I was hoping that it wouldspan the width of the page wrapper.

[code]

[/code]

[PaulOB]

If your image doesn’t have a width or height attribute then it will use the intrinsic height and width of the image which it will know once its downloaded. That means it will be the same size as it would have been had you put the height and width attributes in there in the first place (except that the browsers will have to work out how much space to allocate once its downloaded rather than at the start).

If you want the image to span 100% then use css like this.

#masthead img{width:100%;height:auto}

The height auto is important because without it your image will just be stretched horizontally and won’t retain its intrinsic aspect ratio. The auto will ensure that the image height ratio is consistent with the width. Of course this means on large screens the height will be taller than on small screens.

Lastly remember to add the original height and width attributes to the image so that the browser can work out all the scaling required more easily otherwise it has to download the image first and the page may jump about as content is re-organsied (CSS always over-rides html attributes automatically).

[R_Schreiber]

With this hash tag is this no longer div?

To show you how lamness I am I put this in the html page but it didn’t work

masthead {width:100%;height:auto}>

This is showing up at the top of my screen in green. . . #masthead {width:100%;height:auto}>

It does not span the width of the page wrapper.

[RyanReese]

Because you are targeting the parent, not the image.

[PaulOB]

As Ryan said you are not using the code I gave as you need to target the img element not the parent and don’t forget the id (hash).

This is the code I gave you.

#masthead img {width:100%;height:auto}