Ответ 1

Если вы хотите поместить его за текст, вы должны использовать псевдоэлементы:

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

Пример здесь.

Если вы хотите иметь реальное фоновое изображение, вы можете сделать это, только если вы измените h1 на display:inline, так как в противном случае элемент будет растягиваться до полной ширины его родителя, таким образом теряя всякую ссылку на размер содержащегося текста.

Все другие решения (в том числе и другие, упомянутые здесь) требуют изменения разметки HTML и являются такими не чистыми решениями CSS.

Ответ 2

Просто в промежутке для этого фонового изображения в качестве дочернего элемента <h1>, например:

<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 */
}

Ответ 3

Что-то вроде этого:

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>

Ответ 4

Вы можете использовать: после в вашем CSS, например

h1:after
{
   background:url(image path)no-repeat;/* apply your image here */
    content:" ";
    position:absolute;
    width:999em;
    height:25px;
    margin:10px 0 0 5px;
} 

ищите пример http://jsbin.com/uzorew/1

Ответ 5

Вы можете попробовать добавить div с фоном img

<h1>Here is my dynamic text <div id="dynamicimage"></div></h1>

#dynamicimage{
  background-image: url("images/myimg.png");
}

Ответ 6

Могу ли я уверен, что это 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;
}

ваш html:

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

Ответ 7

Псевдоэлемент фоновое изображение

Хотя в нескольких ответах уже было предложено использовать CSS :after, ни один (во время моей публикации) не показал, как обрабатывать размер изображения.

Ниже вы увидите, что стандартный синтаксис для установки фонового изображения можно применить к пустой content, когда (как показано в нескольких других ответах) position установлен на absolute.

В свойствах width и height будут заданы размеры псевдоэлемента after, но размер изображения должен быть задан с помощью стенографических указателей background или background-size.

то есть. чтобы установить размер изображения в соответствии с размером элемента after, используйте:

background: url( path to image ) no-repeat center/contain;

где center/contain будет центрировать и содержать изображение; -)

Обратите внимание, что в приведенном ниже фрагменте ниже, где размер изображения не был установлен, результаты явно неверны:

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>

Ответ 8

Очень просто   <div class="content"><h1>Header<img src="one.jpg"></h1></div>

включить изображение в заголовок