put a background image after text - css

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

Answer 3

Simply at a span for that background image as a child of <h1>, like this:
<h1>Here is my dynamic text <span class="chevron"></span></h1>
CSS:
h1 {
position: relative;
}
.chevron {
background: url(images/chevron.jpg) no-repeat 0 0;
width: xxpx; /* width and height of image */
height: xxpx;
position: absolute;
right: 0;
top: xxpx; /* adjust the position of the image to the heading text from the top */
}

Answer 4

You can use :after in your css like
h1:after
{
background:url(image path)no-repeat;/* apply your image here */
content:" ";
position:absolute;
width:999em;
height:25px;
margin:10px 0 0 5px;
}
look for example http://jsbin.com/uzorew/1

Answer 5

You could try adding div with background img
<h1>Here is my dynamic text <div id="dynamicimage"></div></h1>
#dynamicimage{
background-image: url("images/myimg.png");
}

Answer 6

may i sure tyr this css :
h1 {
height:25px;
overflow:hidden;
position:relative;
}
h1:after {
background:red;/* apply your image here */
content:" ";
position:absolute;
width:999em;
height:25px;
margin:0 0 0 5px;
}
your html :
<h1>Here is my dynamic text </h1>

Answer 7

Pseudo element background image
Although several answers have already suggested the use of CSS's :after, none (at the time of my posting) have shown how to handle the sizing of the image.
Below you'll see that the standard syntax for setting a background image can be applied to an empty content when (as shown in a few other answers) the position is set to absolute.
The width and height properties will set the dimensions of the after pseudo element, but the image size needs to be set via the background shorthand or background-size properties.
i.e. to set the image size to match the size of the after element, use:
background: url( path to image ) no-repeat center/contain;
where center/contain will center and contain the image ;-)
Note that in the snippet below, where the image size hasn't been set correctly, the results are obviously incorrect:
h1:after {
position: absolute;
/* no size or position settings */
background: url(https://lorempixel.com/200/200/) no-repeat;
width: 1em;
height: 1em;
margin-left: .5em;
content: "";
}
<h1>Here is my dynamic text</h1>
But in the following snippet, where the image size has been correctly set, the results are full of awesome:
h1:after {
position: absolute;
/* size and position set properly */
background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
width: 1em;
height: 1em;
margin-left: .5em;
content: "";
}
<h1>Here is my dynamic text</h1>
To adjust the size of the after pseudo element itself, change the width and height properties like so:
h1:after {
position: absolute;
/* size and position set properly */
background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
/* width and height of container reduced */
width: .5em;
height: .5em;
margin-left: .5em;
content: "";
}
<h1>Here is my dynamic text</h1>
And as pointed out by Tepken in his answer, use the top property to adjust the vertical alignment. However, make sure the after's parent also has its position property set, or the image will consider the top to be relative to one of its grandparents:
h1 {
/* the parent must have its position set also */
position: relative;
}
h1:after {
position: absolute;
/* size and position set properly */
background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
/* width and height of container reduced */
width: .5em;
height: .5em;
margin-left: .5em;
content: "";
/* vertically align the image */
top: .35em;
}
<h1>Here is my dynamic text</h1>

Answer 8

Very simple
<div class="content"><h1>Header<img src="one.jpg"></h1></div>
include the image within the header