How to Create Web Page Headings
Site Heading Example #4
This example uses a picture background. Some slight changes are made to the CSS from the last example.
Site Heading Text
This would be slogan text.
We changed the image name and repeat to no-repeat in the style sheet.
background-image : URL(images/grroop-top-pumpkins.jpg); background-repeat : no-repeat;
We also changed size of site name text and adjusted the top padding on the h1 tag. We did increase the height of the header by increasing the bottom padding on the H1 element to 20%.
No changes were made to the HTML code.
The actual HTML code and CSS for creating this heading is shown here:
<header class="ex4">
<h1>Site Heading Text</h1>
<p>This would be slogan text.</p>
</header>
header.ex4 {
max-width: 1000px;
margin: 0 auto;
background-image : URL(images/pumpkins.jpg);
background-repeat : no-repeat;
border: none;
border-radius: 0 0;
box-shadow: 5px 5px 10px #010101
}
header.ex4 h1 {
font-family: arial, verdana, serif;
font-size: 36px;
float: left;
color: #fefefe;
padding: 1% 1.5% 20% 1.5%
}
header.ex4 p {
font-family: arial, verdana, serif;
font-size: 24px;
float: right;
color: #ffff00;
padding: 1% 1.5%;
text-shadow: 1px 1px 1px #010101
}
Backgrounds and Liquidity
If you use pictures in your header as background images, they won't be liquid. (They won't display properly in smaller devices.)
Grab the right side of your browser window and squeeze the page until it's about the size of a tablet or cell phone.
Watch what happens to our header.
We'll solve the problem of liquidity in the next example.