Заголовок background-image не охватывает весь заголовок

Question

Заголовок background-image не охватывает весь заголовок

0

На веб-сайте, который я создаю для друга, я создаю заголовок (div, помеченный как таковой) двумя изображениями (также завернутыми в div), а также названием компании и слоганом (больше divs).

Основная цель div заголовка - обернуть весь контент заголовка для легкого позиционирования и включить фоновое изображение для заголовка.

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

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

Может ли кто-нибудь просветить меня, что мне не хватает? Как я могу получить изображение в качестве фона для всего заголовка? Я разместил соответствующий (общий) код здесь: http://codepen.io/deadwanderer/pen/LnGKC/

Как вы можете видеть, границы заголовка заголовка существенно действуют как строка в верхней части содержимого, когда они должны быть полем, который его окружает.

Спасибо за любую помощь и/или совет!

Anthony Fisher 18 апр. 2014, в 23:09

Источник

Теги:

html

css

1 ответ

Ещё вопросы

JCBiggar · Accepted Answer · 2014-04-18T17-55-00.000Z

Вам нужно очистить div, поскольку у вас есть плавающие divs:

ясно: то и другое;

попробуй это:

<div class="header">
  <div class="leftpic">
     <img src="" alt="Left Image" class="pic"/>
  </div>
  <div class="rightpic">
    <img src="" alt="Right Image" class="pic"/>
  </div>
  <div class="hdrtext">
    <div class="companyName">Company Name</div>
    <div class="companySlogan">Company Slogan</div>
  </div>
  <div style="clear:both;"></div> <!-- Notice this added line -->
</div>

СМОТРИТЕ ДЕМО: http://codepen.io/anon/pen/cKByp

Читайте о Clearfixs здесь: http://css-tricks.com/the-how-and-why-of-clearing-floats/

Это именно то, что мне было нужно; Спасибо! Ps, первая строка этой статьи: «Вы слышали о« очистке поплавков », но действительно ли вы это понимаете?» Мой ответ: очевидно нет!