How to Create Web Page Headings
Site Heading Example #3
This example uses a textured background.
Because it is a small image and needs to be repeated some slight changes are made to the CSS settings from the last example.
background-image : URL(images/bk18d.gif);
background-repeat : repeat;
The only change we made to replace the background image was changing the image name and no-repeat to repeat
We also changed size of text, color of slogan text.
No changes were made to the HTML code.
Site Heading Text
This would be slogan text.
The actual HTML code and CSS for creating this heading is shown here:
<header class="ex3">
<h1>Site Heading Text</h1>
<p>This would be slogan text.</p>
</header>
header.ex3 {
max-width: 1000px;
margin: 0 auto;
background-image : URL(images/bk18d.gif);
background-repeat : repeat;
border-radius: 40px 40px;
box-shadow: 5px 5px 10px #010101
}
header.ex3 h1 {
font-family: arial, verdana, serif;
font-size: 36px;
float: left;
color: #000000;
padding: 5% 1.5%
}
header.ex3 p {
font-family: arial, verdana, serif;
font-size: 24px;
float: right;
color: #ffff00;
padding: 5% 1.5%;
text-shadow: 1px 1px 1px #010101
}
We'll demonstrate adding a real picture background in the next example.