Add Background Image to a Heading

By Stephen Bucaro

One way to highlight your webpage heading is to add a background image. This is very simple to do using the background-image style property, but since a heading element, <h1>, is a block element, the background image will extend beyond the length of your heading.

• Remember a block element is a box that takes up a horizontal section of its containing element, in other words it acts like its preceded by and followed by carriage-return line-feed control characters.

This can easily be fixed by placing a <span> element within the heading tags and applying the background-image style property to the <span>. The code for this is shown below.

<h1><span style="padding:4px; background-image:url(imagename.jpg);">Add Background Color to a Heading</span></h1>

Note that I added the padding property so the heading text doesn't touch the sides of the background image box.

In the above code, the background-image property value is set to the url of the image. This would be the file path to, and file name of the image file.

More Easy Cascading Style Sheets:
• Easy Visual Effects to Spice Up Your Webpage
• Easy Rollover Menu Code
• Easy Scrollable Area Code
• Easy CSS 3D Text Effect
• Style Your Imagemap Tooltips
• Add Background Color to a Heading
• Easy CSS Popup Windows
• Code for Horizontal Drop-down Menu Bar
• Understanding CSS Positioning
• How to Use a Starburst on Your Web Page

RSS Feed

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues