CODEWITHSUNDEEP
htmlcss
user1355300
user1355300

Reputation: 4987

CSS Set background image in heading

I want to set an image as a background of a heading, but only in the empty area. I do not want to display any background where the heading text is. So, I have following HTML for heading:

<h2><span>Some text</span></h2>

h2{
    background: url("image.png");
}

The problem is that, I do not want to display this heading background in the span, instead I want the span to adapt the background image of the page (parent element). I can not set a specific specific background for the span because it won't match with the page background. So how can I solve this?

Upvotes: 0

Views: 405

Answers (2)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

You can use psuedo element to achieve this,

   h1:before 
 {
 content:url(your_img.jpg);
 }

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

You need to coordinate the background position of the image with the text. I'm not sure what your exact layout is, so adjust your values accordingly.

CSS alone cannot detect where your text is, or how bit it is. You need to use JavaScript to do that.

h2 {
    background: url(image.png);
    background-repeat:no-repeat;
    background-position:5px 5px;
    padding-left:30px;
}

Upvotes: 1

Related Questions