Заполнение CSS-части для размещения текста по фоновому изображению

Question

Заполнение CSS-части для размещения текста по фоновому изображению

0

У меня есть обратный образ, и я использую отступы для текста.

JsBin:

HTML:

<div id="wrapper">
     text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
</div>

CSS:

#wrapper {
  padding: 10px 10px 10px 120px;
  background: url('image.jpg') no-repeat 10px 10px;
}

Вопрос:

Как использовать прописку только для раздела div?

Вывод:

Моя попытка:

Поместите пустой div (100x100), где должно быть background-image, и добавьте float:left to div blank div. Но я ищу решение для CSS. Обратите внимание, что у меня есть причины иметь изображение в фоновом режиме, а не в div.

Ищите свои предложения.

Ing. Michal Hudak 18 сен. 2013, в 11:30

Источник

Теги:

html

css

css-float

padding

3 ответа

0

Вы не можете сделать это, поскольку фоновое изображение не может быть размещено.

Bhojendra Nepal 18 сен. 2013, в 07:42

0

Используйте этот CSS DEMO ЗДЕСЬ

#wrapper {
  padding: 10px 10px 10px 15px;
  background: url('http://dummyimage.com/100x100/000000/fff') no-repeat 10px 10px;
}
#wrapper:before {
  content:'';
  float:left;
  width:100px;
  height:100px;
}

Love Trivedi 18 сен. 2013, в 07:03

Ещё вопросы

robooneus · Accepted Answer · 2013-09-18T06-26-00.000Z

Используйте псевдоэлемент, чтобы заменить место заполнителя div, и поместите его так же, как и встроенное изображение.

http://jsbin.com/egeqAMi/4

#wrapper:before {
  content:'';
  float:left;
  width:100px;
  height:100px;
}