Step 3 - Header with an Image


If your header contains a full-width image, you need to make one more change. It's very probable that your header image is set to a specific size. You'll want to change that to be "adjustable".



Find your header image.

<img src="bethel-head.jpg" alt="Bethel Cemetery"
        width="900" height="121" align="center">

Change the width and height to 98% and auto.

<img src="bethel-head.jpg" alt="Bethel Cemetery"
        width="98%" height="auto" align="center">



***IMPORTANT NOTE: This sets the image to take up 98% of the WIDTH of the HEADER container. The HEADER container is set to take up 98% of the SCREEN WIDTH. You will more than likely need to change the 98% in the <img> tag to something smaller to mimic the original proportions contained in your <img> tag. Just be sure to make it a percentage instead of a fixed number.