Как грамотно вписать фон в header?
Зависит от фона и шапки. Разный рисунок фона будет по смыслу по-разному подстраиваться. Приведите пример здесь.
– user347472
1 янв 2021 в 14:21
@PavelGrishaev фон(2000×1034) как раз таки размером с header, на psd макете. Но мой монитор только 1920×1080 и появляется скроллбар. imgur.com/a/XYQVA11
2 янв 2021 в 10:18
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Чтобы размер элемента подстраивался под экран следует указывать его ширину в % и высоту в vh (высота экрана, 100vh соответствует высоте равную высоте экрана пользователя). Например, для того, чтобы элемент занимал всю ширину и высоту экрана пользователя не зависимо от разрешения, следует прописать для такого элемента следующие значения: width:100%; height: 100vh; . Фон для элемента можно задать с помощью свойства background-image: url(здесь пишем адрес картинки которая нам нужна) для того, чтобы картинка занимала весь элемент следует прописать свойство background-size: contain .
Если у вас изображение не должно занимать полностью весь элемент, но вам нужно ее расположить, скажем по центру, для этого, следует сначала убрать свойство background-size: contain и отрегулировать положение изображения в свойстве bzckground-position: center , в данном случае изображение будет располагаться по центру элемента.
Также, если хотите лучше контролировать поведение элементов на странице при разном разрешении экрана можно это сделать при помощи:
@media (max-width:700px) and (min-width:481px) < body< background-color: #000; >/* ещё какие-то стили. */ > В этом случае будут применены стили, которые находятся внутри @media , только тогда, когда ширина экрана больше 481px и меньше 700px . Если надо задать только одну границу(например для любой ширины экрана от 480px и меньше, то это можно сделать так:
@media (max-width:480px) < body< background-color: #000; >/* ещё какие-то стили. */ > Как залить фон под контейнером на всю ширину экрана, если контейнер 80% от ширины?
- JavaScript
- +1 ещё
Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?
- 1 подписчик
- 3 часа назад
- 27 просмотров
- HTML
- +1 ещё
Как пофиксти проблему с амперсантом?
- 1 подписчик
- 12 часов назад
- 58 просмотров
- HTML
- +2 ещё
Подобное поведение норма?
- 1 подписчик
- 14 часов назад
- 109 просмотров
- HTML
- +3 ещё
Почему не работает переход на страницу?
- 1 подписчик
- 14 часов назад
- 112 просмотров
- HTML
Почему html2pdf выдает пустой лист?
- 3 подписчика
- вчера
- 618 просмотров
- CSS
Что за баг с ховером?
- 1 подписчик
- вчера
- 99 просмотров
- HTML
- +1 ещё
Как блок вывести поверх других?
- 1 подписчик
- вчера
- 56 просмотров
- CSS
- +1 ещё
Почему не подгружается картинка?
- 1 подписчик
- вчера
- 85 просмотров
- CSS
- +2 ещё
Как Python и Selenium заставить найти текст?
- 1 подписчик
- 18 нояб.
- 53 просмотра
- HTML
- +1 ещё
Как сделать данное задание?
- 1 подписчик
- 17 нояб.
- 128 просмотров
от 150 000 ₽
от 35 000 до 40 000 ₽
20 нояб. 2023, в 10:43
2500 руб./в час
20 нояб. 2023, в 10:41
7500 руб./за проект
20 нояб. 2023, в 10:40
5000 руб./за проект
Минуточку внимания
Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями
- Не видно конкретный узел в другой подсети. Почему?
- 2 подписчика
- 2 ответа
- 2 подписчика
- 0 ответов
- 3 подписчика
- 2 ответа
- 2 подписчика
- 1 ответ
- 2 подписчика
- 1 ответ
- 2 подписчика
- 2 ответа
- 2 подписчика
- 2 ответа
- 2 подписчика
- 4 ответа
- 2 подписчика
- 1 ответ
- 2 подписчика
- 2 ответа
Как залить фон в html
Команда Залить цветом фона заполняет выделение в изображении сплошным цветом из части фона области активного цвета панели инструментов. Этот цвет также показан слева от пункта меню. Если некоторые части изображения только частично выделены (например, при растушёвки выделения), то они заполняются в зависимости от степени выделения.
Заметьте, что если в изображении нет выделения, то заполняется весь активный слой.
3.15.1. Активация команды
- Эта команда находится в меню изображения Правка → Залить цветом фона ,
- у неё также есть клавиша быстрого доступа: Ctrl + . .
Выделение также можно заполнить, нажав и передвинув цвет фона из панели инструментов на выделение.
Как залить только фон под меню
Как залить фон меню цветом и сделать так, чтобы изображения отображались (вн)
Первое изображение — как должно быть, второе — что у меня. Фрагменты css, в которых что-то не.Убрать фон под выпадающим меню
В главном меню есть выпадающее меню, ниже его затемненный фон на странице. Если курсор опускать.Залить фон
Сморите картинку 🙂
2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928Повесить картинку не на боди, а на блок после меню, или спозиционировать бекграунд по оси Y на размер меню
98 / 98 / 46
Регистрация: 21.03.2012
Сообщений: 378
Сообщение было отмечено MyMac как решение
Решение
лучше избегать добавления стилей прям в теге (уберите стиль из боди в файл со стилями)
читайте комментарии к стилям1 2 3 4 5 6 7 8 9 10 11
body background="https://wallpaperstudio10.com/static/wpdb/wallpapers/1000x563/176215.jpg"> div class="nav-header"> ul> li>a href="C:\Users\no_pr\Desktop\New Page\html\main.html">Главная/a>/li> li>a href="C:\Users\no_pr\Desktop\New Page\html\media.html">Медиа/a>/li> li>a href="C:\Users\no_pr\Desktop\New Page\html\blog.html">Блог/a>/li> li>a href="C:\Users\no_pr\Desktop\New Page\html\game.html">Играть/a>/li> li>a href="C:\Users\no_pr\Desktop\New Page\html\chat.html">Чат/a>/li> /ul> /div> /body>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
body { margin: 0; /* какое = и "" */ padding: 0; /* какое = и "" */ } /* класс для шапки навигации, используйте отступы тут, а не в списке */ .nav-header { background-color: #000; padding: 20px 10px; } ul { list-style: none; margin: 0; padding-left: 0; /* margin-top: 25px; нетребуется*/ } a { display: block; /* для правильного отображения отступов */ text-decoration: none; background: #30A8E6; color: #fff; padding: 10px; font-family: arial; border-radius: 4px; -moz-transition: all 0.3s 0.01s ease; -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; } a:hover { background: #1C85BB; } li { display: inline-block; /* если позиционирование не требуется используйте inline-block, вместо float */ margin-right: 5px; }