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:
• Spice Up Your Web Forms with Color and Graphics
• How to Make Images Responsive
• Easy CSS Buttons
• How to Center a DIV Within a DIV
• Style Your Imagemap Tooltips
• How to Use a Pull Quote
• How to Style a Table
• Using the HSL Color Specification
• Understanding CSS Positioning
• How to Center a DIV
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
