How to Create Web Page Headings
Maybe you like the first example, but you want to add a very basic background image instead of the color defined background.
The only change we'll make to add the background image is to remove the background line.
Added these 2 lines of CSS:
background-image : URL(images/grroop-33.jpg);
background-repeat : no-repeat;
The CSS tells the browser to find an image named grroop-33.jpg in the images folder and display it only once.
Site Heading Text
This would be slogan text.
The actual HTML code and CSS for creating this heading is shown here:
<header class="ex2">
<h1>Site Heading Text</h1>
<p>This would be slogan text.</p>
</header>
header.ex2 {
max-width: 1000px;
margin: 0 auto;
background-image : URL(images/grroop-33.jpg);
background-repeat : no-repeat;
border-radius: 20px 20px 0 0;
box-shadow: 5px 5px 10px #010101
}
header.ex2 h1 {
font-family: arial, verdana, serif;
font-size: 30px;
float: left;
color: #000000;
padding: 5% 1.5%
}
header.ex2 p {
font-family: arial, verdana, serif;
font-size: 22px;
float: right;
color: #ffffff;
padding: 5% 1.5%;
text-shadow: 1px 1px 1px #010101
}
Tips
When using large images as backgrounds, try to make them close to the size of the header that you will be placing them in.
If anything, you want them to be slightly larger. If your max-width setting is 1000 pixels, your image should be that wide or slightly larger.
We'll demonstrate adding a texture background in the next example.