Моя страница резиновая и состоит из 3х столбцов 15%, 70% и 15%. СSS третьего столбца:
width: 15%;
padding: 5px;
background-color: #F1F1F1;
// здесь сама суть
background-image: url('/css/images/logo.png');
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% auto;
// а здесь она заканчивается
float: right;
border-left: black solid 1px;
display: block;
height: 100%;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
word-wrap: break-word;
margin: 0;
Как видите на фоне стоит изображение, которое расположено снизу и растягивается по ширине столбца, а высота устанавливается автоматом.
Но когда я добавляю в тот блок текст (а он здесь необходим), он перекрывает изображение Скрин (сюда залить не смог)
Мне нужно решить эту проблему. Сложность как раз в том, что страница и столбец резиновые.
Внутри этого блока с фоном есть еще один блок в котором и находится текст. Этот блок и должен быть с высотой раной пустому пространству.
Желательно реализовать это с помощью только CSS, но если это не возможно (хотя я так не думаю), то можно воспользоваться JS и jQuery
Размер самого изображения 500*438
PS Уже второй день ломаю голову, и буду очень благодарен, если поможете