У меня возникают проблемы с позиционированием фонового изображения с тегом h1Позиционирование фонового изображения
Мой код: js fiddle
Когда я ставлю font-size: 18px Я возжелал выход, но я хочу, чтобы иметь более крупный шрифт.
Независимо от того, что я набираю в css, я не могу позиционировать его так, как хотелось бы.
Может ли кто-нибудь мне помочь?
спасибо.
Я дал ширину в
<h1>
тег и дал фон-размер: 100%; http://jsfiddle.net/tw3jrbhc/1/
.role h1 {
width:1400px;
background: url("http://i57.tinypic.com/2167bt.png") no-repeat scroll center center transparent;
background-position:center;
background-size:100%;
color: #000;
font-size: 25px;
font-weight: normal;
margin: 15px 0 15px;
text-align: center;
text-transform: none;
}
Это почти то, что я хочу, кроме того, что мне нужна ширина 1030 пикселей. – Morpheus
@Morpheus http://jsfiddle.net/tw3jrbhc/2/ я изменил размер фона до 120% – Akshay
Хорошо, я немного изменил его, чтобы иметь место между точками и заголовком. У меня есть еще один вопрос: будет ли это отзывчивым или я должен что-то добавить? Спасибо – Morpheus
Если вы хотите что-то гибкое/управляема, который будет работать с любым размером шрифта, вы должны рассмотреть возможность использования :: до того псевдо-элемента:
.role h1::before {
content:'';
background: url("http://i57.tinypic.com/2167bt.png") no-repeat right center;
display: inline-block;
width: 224px;
height: 24px;
vertical-align: middle;
}
http://jsfiddle.net/tw3jrbhc/3/
.role {
width: 1030px;
margin: 0 auto;
}
.role h1 {
color: #000;
font-size: 25px;
font-weight: normal;
margin: 15px 0 15px;
text-align: center;
text-transform: none;
}
.role h1::before {
content:'';
background: url("http://i57.tinypic.com/2167bt.png") no-repeat right center;
display: inline-block;
width: 224px;
height: 24px;
vertical-align: middle;
}<div class="role">
<h1>Loremloremaa Lorembb Loremlorema Loremlor aa Lorema Loremlor</h1>
</div>
Где вы хотите, чтобы изображение было? В центре названия? Или вы хотите, чтобы заголовок находился посередине изображения независимо от размера шрифта? –
Говорить нам, что бы вы хотели, было бы хорошим началом. – Shomz
Всегда указывайте свой код в своем вопросе. Вы можете * дополнить * этим скрипкой. – j08691