Bootstrap + JS плагин: как разместить надпись поверх картинки?

Question

[Morozov_Evgeny]

Есть html-страничка.
Лежит здесь (СОРРИ, ИЗНАЧАЛЬНО ССЫЛКА БЫЛА БИТОЙ, теперь все ОК):
https://dl.dropboxusercontent.com/u/28959587/pract...

К ней подключены:
*Bootstrap (нужен для адаптивной верстки)
getbootstrap.com
*Flowtype (js плагин, для адаптивного шрифта)
simplefocus.com/flowtype
*Fit.js (js плагин, для центрирования элементов)
soulwire.github.io/fit.js

Проблема:
Не работает плагин Fit.js (скорее всего я его неверно подключил).
Мне нужно, чтобы надпись «Practicana» располагалась по центру первой картинки, как вертикально, так и горизонтально. Только текст, без желтого фона.

Так же, как сделано на этой картинке:
https://dl.dropboxusercontent.com/u/28959587/shot.png

Для этого я пытаюсь разместить блок div class="container" (который с надписью Practicana) внутри блока div class="row" (который заполнен картинкой).

Использую вот такой код:

<div id="welcomeimage" class="row" style="background:#FFCC66;">
    <img class="img-responsive" src="http://practicana.com/img/background-02.jpg">
    <div id="practicanatitle" class="container" style="text-align: center; margin: 20px auto;">
         <h6 style="line-height: 1; font-family: 'Oleo Script Swash Caps', cursive; color:white;">Practicana</h6>
    </div>
</div>

В данном случае, надпись располагается после картинки.
Чувствую себя идиотом - что-то банальное не учел.

Почему не использую свойство background:
Оно не вписывает картинку в ширину окна, а просто отображает ее в масштабе 1:1 в области div.
Это мне не подходит.

Почему не сделаю картинку с надписью в фотошопе:
Эта надпись должна легко меняться, к тому же под надписью впоследствии будет размещен другой контент (поэтому мне важно наложить друг на друга именно блоки div).

Подскажите, как добиться эффекта наложения текста на картинку с помощью плагина Fit.js?

UPD
Подсказали этот вариант:
jsbin.com/fudusimi/1

Но там одно маленькое НО:
Высота картинки фиксированная. А мне нужно, чтобы была плавающей. При сужении окна браузера ширина картинки все также заполняет его на 100%, а высота уменьшается пропорционально.

Есть еще какие-либо соображения?

Answer 1

[Alexey Svirschevskiy]

Попробуете background-size:cover;, а вообще, вариантов очень много, вот например jsfiddle.net/26Qtx или так

Comments

[Morozov_Evgeny]

rezzzet, спасибо за ответ, но background-size:cover; не подходит.
Экспериментировал с ним, все равно, не то, что нужно.
Дело в том, что картинка у меня заполняет всю ширину окна. Когда окно меньше становится - картинка все равно заполняет блок на 100%, не обрезается ни с какой стороны.

С яваскриптами таже проблема, они все рассчитаны на то, что я знаю размеры картинки, но она то responsive!

Answer 2

[Сергей Мекетюк]

<div id="welcomeimage" class="row">
    <img class="img-responsive" src="http://practicana.com/img/background-02.jpg">
    <div id="my_text_id" class="container">
        Practicana
    </div>
</div>

img {
    width: 300px;
    height: 300px;
}
#welcomeimage {
    position: relative;
    width: 300px;
    height: 300px;
}
#my_text_id {
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;    
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

Размеры зададите свои. И пишите плиз стили в css файле :)
jsfiddle.net/Y92bb

Comments

[Morozov_Evgeny]

SergeiMeketyuk, спасибо!

Та же проблема. Алгоритм рассчитан на фиксированные размеры картинки.
Может глянете, как же все-таки с помощью Fit.js сделать?

[Сергей Мекетюк]

$(function() {
    fit(practicanatitle, welcomeimage, {
        hAlign: fit.CENTER,
        vAlign: fit.CENTER,
        watch: true
    });
});

[Сергей Мекетюк]

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

[Сергей Мекетюк]

Вот пример

[Morozov_Evgeny]

Спасибо!
Помучаю вас еще, можно?
В этом примере почему-то осталась желтая полоса под картинкой... Ее быть не должно.
Это несовершенство плагина Fit.js или я что-то не учел?

[Сергей Мекетюк]

Да это дело плагина, он не задает абсолютную позицию для текста, и блок как бы думает что текст все еще ниже картинки и оставляет там место. Не нужен вам этот Fit.js, сделайте все на css. В примере который я написал все работает на css, просто уберите ширину и высоту.

[Сергей Мекетюк]

Вот пример без плагина

[Сергей Мекетюк]

И я вас очень прошу, пишите стили в css файле, ваш html файл ну просто нереально читать )

Answer 3

[Morozov_Evgeny]

Всем спасибо!
Бьюсь пока с z-index и background-size...
Я перфекционист, поэтому фон все же ведет не совсем так как мне надо. Он все не хочет заполнить всю ширину окна, уменьшившись/увеличившись с сохранением пропорций....