How to Create Web Page Headings


Site Heading Example #2 TRY This SiteBuilder FREE! - No Credit Card

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-color line and add 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.

Note: Because we used transparent for the background color on the h1 and p tags, we didn't have to make a change to those background-color settings.

Create beautiful,professional websites
WITHOUT Learning to Code!!

Use this NEXT GENERATION builder
to make blogs, portfolios or
full blown websites in minutes.
No Experience Needed!

Check out these Example websites
created by people just like you,
with no knowledge of HTML coding.

SquareSpaceSquareSpace

Start Your Website Now!SquareSpace



Site Heading Text

This would be slogan text.


The actual HTML code and CSS for creating this heading is shown here:

HTML CodeCSS
<div id="ex2">
<h1>Site Heading Text</h1>
<p>This would be slogan text.</p>
</div>
 
#ex2 {
width: 700px;
height: 100px;
margin-left: auto;
margin: right: auto;
background-image : URL(images/grroop-33.jpg);
background-repeat : no-repeat;
}

#ex2 h1 {
font-family: arial, verdana, serif;
font-size: 16pt;
float: left;
color: #000000;
background-color:transparent;
padding: 25px 0 0 20px
}
#ex2 p {
font-family: arial, verdana, serif;
font-size: 12pt;
float: right;
color: #ffffff;
background-color:transparent;
padding: 30px 20px 0 0
}

Tips

When using large images as backgrounds, try to make them close to the size of the division that you will be placing them in. If anything, you want them to be slightly larger. If your heading area is 1000 pixels wide and 200 pixels high, your image should be that size or slightly larger.

We pulled this background image from the collection on our main website. Visit: Free Grroop Headers

We'll demonstrate adding a texture background in the next example.


Next Example