put a background image after text

Question

I have a header element into which I want to put a background image but I want to put it on end. So whatever the width of text is it will remain always after the text ending. Possible? How?

<h1>Here is my dynamic text</h1>

Answer 1

If you want to put it really behind the text you should use pseudoelements:

h1:after { content:url(myimage.png); }

Sample here.

If you want to have a real background image you can only do this if you change the h1 to display:inline, since otherwise the element will stretch to the full width of its parent, thus losing all reference to the size of the contained text.

All other solutions (including the other ones mentioned here) require changing the HTML markup, and are as such not pure CSS solutions.

Answer 2

Something like this:

h1
{
background-image:url(https://s.gravatar.com/avatar/c6a0ac3e18f1cd8d0f1be4c2e3a4cfbd?s=32&d=identicon&r=PG);
background-repeat:no-repeat;
background-position:right;
padding-right:40px;
display:inline-block;
}

<h1>Here is my dynamic text</h1>

So backgorund image to the right with padding so it's always outside your text. The display:inline-block is important because it stops your test filling the whole line