Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Add Background Image to a Heading

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:
• Pro CSS Techniques
• CSS to Use an Image as a Mask
• CSS Transition Code For a Pulsating Button
• Make a Fixed-width Variable-height Round Cornered Box
• Easy Visual Effects to Spice Up Your Webpage
• Create CSS Button Rollovers
• Create Custom Horizontal Rules
• Basic Introduction to Simple Responsive Design With Code
• Easy Rollover Menu Code
• Use @font-face Rule to Load External Fonts For Your Webpage

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268