[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Background Image for H2

Posted on 2006-04-29
2
Medium Priority
?
1,452 Views
Last Modified: 2012-06-27
I have a situation, in which I am using H2 for headers of a page.

this works:
h2 {
      font-size: 110%;
      background-image:url(/images/bluBar.gif);
      /*background:url(/images/corner.gif) no-repeat top right;*/
      border-bottom:1px solid #0099FF;
      padding:2px 0px 2px 5px;
      margin:0;
}

however, you can see the commented area is another image that makes it look like there is an angled corner.  However, I am obliviosly going about this the wrong way, because an element cannot have 2 background images.

How can I work around this?   I have tried making a div with the corner bg image, and tried wrapping the H2 in it, no dice.......
0
Comment
Question by:kevp75
2 Comments
 
LVL 25

Author Comment

by:kevp75
ID: 16569296
got it:

h2 {
      font-size: 110%;
      background-image:url(/images/bluBar.gif);
      /*background: #C6D5FD url(/images/corner.gif) no-repeat top right;*/
      border-bottom:1px solid #0099FF;
      padding:2px 0px 2px 5px;
      margin:0;
}
h2 div {
      background:url(/images/corner.gif) no-repeat top right;
      position:relative;
      top:-2px;
      padding-top:3px;
      }

then for the H2 I do this
<h2><div>Header Text</div></h2>
0
 

Accepted Solution

by:
GranMod earned 0 total points
ID: 16569495
Closed, 125 points refunded.
GranMod
The Experts Exchange
Community Support Moderator of all Ages
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month19 days, 7 hours left to enroll

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question