Using Images in Webpages

Right-click and choose View Source to see the source code for this page.

You can use this to copy sample code or even as a template for your page. But be sure to add your content and your styles and images.

At the top is a "Responsive" Masthead in a <header> element with a background-image that is 1000px by 250px. Test it by resizing the window on your desktop PC or by flipping from portrait to landscape on your tablet or mobile device. The ViewPort meta tag allows your images and content to be "Responsive" on different devices as the display width is changed. The <header> will not display unless a height is set, or in this case, a padding-top is set.

Notice there is a blue water background-image set for the <body> tag.

Notice there is background-image: linear-gradient set for the <main> tag.

Below is a blue "horizontal rule" using the <hr> tag.

Below is a basic image with a alt tag.

Photo of two sailboats

Below is an image set as a link to the top of the page. The ID #Top is built into html.