Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
 Аватар для skelmen
10 / 10 / 3
Регистрация: 03.04.2015
Сообщений: 130

Высота блока по фоновому изображению

29.06.2015, 10:19. Показов 795. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте. Искал в и-нете, пробовал варианты, но никак не получается. Я не спец в верстке, поэтому обращаюсь к вам за помощью. Нужно выровнять размер блока по высоте фонового изображения. Вот как должно быть:
https://www.cyberforum.ru/atta... 1435566407
Но это если явно указываю высоту блока в пикселях:
CSS
1
2
3
4
5
6
7
8
9
.header  {
    position: relative;
    height: 630px;
    background: url(../images/header.jpg) no-repeat;
    background-size: 100%;
    -moz-background-size: 100%;
        -webkit-background-size: 100%;
        -o-background-size: 100%; 
}
А если убираю height: 630px; то получается такое:
https://www.cyberforum.ru/atta... 1435566407
Необходимо избавиться от явного задания размера высоты в пикселях и чтоб header принимал полную высоту изображения (как на первом фото), а не обрезался. background-size: cover пробовал также. Спасибо.

 Комментарий модератора 
изображения следует размещать на форуме
Миниатюры
Высота блока по фоновому изображению   Высота блока по фоновому изображению  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
29.06.2015, 10:19
Ответы с готовыми решениями:

Движение по фоновому изображению
Привет! Видел много раз вот такую вещь: на фон сайта ставится какой-то фон (обычно фотография) и на нем есть какие-то ссылки, при нажатии...

Вопрос по фоновому изображению в блоке
Здравствуйте, не могу понять, в чем дело. Есть простейшая страничка и стиль к ней. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

Высота блока равная размеру фоновой картинки блока
Здравствуйте. Дано: <nav> <a href="litolin.html" id="litolin-link" class="navi"> ...

2
Эксперт HTML/CSS
 Аватар для Shakalaka
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
29.06.2015, 11:37
Background в принципе не может влиять на размер контейнера. Если хотите получить блок по размеру БГ задайте ему размеры БГ.
П.С. если БГ будет меняться динамически и его размеры заранее неизвестны, используйте JS
1
 Аватар для skelmen
10 / 10 / 3
Регистрация: 03.04.2015
Сообщений: 130
29.06.2015, 12:53  [ТС]
Цитата Сообщение от Shakalaka Посмотреть сообщение
Background в принципе не может влиять на размер контейнера. Если хотите получить блок по размеру БГ задайте ему размеры БГ.
П.С. если БГ будет меняться динамически и его размеры заранее неизвестны, используйте JS
Да, спасибо, я так и думал что надо брать курс на JS
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
29.06.2015, 12:53
Помогаю со студенческими работами здесь

Высота блока по высоте блока, следующего за ним
Здравствуйте, существует такая конструкция: <div class="transparency"> <!-- Это полу-прозрачный блок--> </div> <div...

Высота блока
день добрый. Подскажите как правильно прописать чтобы высота видимойчасти блока была автоматической? т.е. есть блок ...

Высота блока
Помогите разобраться.Приведу пример:высота шапки в макете - 50рх. Замеры в фотошопе padding:20px + font-size:14px+lineheigh:20px=60px...

Высота блока
Доброго времени суток! Есть html-разметка такой структуры: <body> <div class="page-wrapper"> <header...

Высота блока по содержимому
Есть div. в нём p и img. img справа. как сделать так, чтобы float: right не убирал изображение из потока? <!DOCTYPE html> ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru