Другой способ сделать что-либо - поместить ваш текст в div и установить изображение в качестве фонового изображения div, используя css, например:
<div class="alert">
<p>
<strong>Alert!</strong>
This is an alert message.
</p>
</div>
А для CSS:
.alert {
width: 20em; (Width of entire div, which includes text and bg image)
background-image: url('../alert.png');
background-color: orange;
margin: auto;
padding: 2em;
}
Вы можете увидеть живой пример JSFiddle здесь: http://jsfiddle.net/Cwca22/TdDJY/
Кроме того, в приведенном выше коде фоновое изображение будет располагаться (повторяться) как по горизонтали, так и по вертикали, чтобы заполнить пространство div. Чтобы предотвратить это, вы можете сделать div такой же высоты и ширины, что и фоновое изображение, или поместить background-repeat: no-repeat
в свой CSS под классом .alert
.
Надеюсь, это поможет и удачи!