Css картинка на весь экран: Как растянуть картинку на весь экран css

html — Как растянуть img на весь экран монитора?

Вопрос задан 5 лет 1 месяц назад

Изменён 5 лет 1 месяц назад

Просмотрен 5k раза

<div>
 <img src="img.jpg">
</div>

чтобы при масштабировании до любых размеров она всегда занимала 100% монитора, а не при достижении ширины монитора свыше 1920px снизу начинало бы появляться пустое место. Уточняю — картинка находится на html-странице и не нужно ее запускать через css — backgroun-image

• html
• css

1

как обычно : пользуемся не инлайновыми стилями а в отдельном файле

html,body{
height:100%;
}

img{
display:block;
width:100%;
height:100%;
}

<img src="">

но так же надо помнить что изображение должно быть в альбомном виде

8

Хорошо, если изображение абстрактное и деформация при непропорциональном масштабировании не заметна. .. Можно, с помощью jQuery скрыть изображение, забрать его src и подложить его в ненавистный вам background-image, и добавить background-size: cover…

Можно попробовать использовать object-fit (https://caniuse.com/#feat=object-fit)

body, html {
  margin: 0;
  width: 100vw;
  height: 100vh;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

<img src="http://lorempixel.com/1500/1000/sports/Dummy-Text/" />

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Windows 7 как растянуть картинку на весь рабочий стол

Содержание

1. Исправляем растянутый экран на Windows 7
2. Почему экран растянут на Windows 7
3. Способ 1: Установка драйверов для видеокарты
4. Способ 2: Установка корректного разрешения
5. Способ 3: Настройка монитора (только ПК)
6. Решение некоторых проблем
7. Заключение
8. Сузился экран монитора, появились черные полосы. Что делать, как расширить экран?
9. Что делать, если изображение на экране сузилось и стало не четким
10. Как расширить экран монитора на компьютере с ос Windows
11. Причины, по которым экран монитора становится узким
12. Неправильная настройка разрешения экрана
13. Не установлен драйвер видеокарты
14. Подключение к компьютеру телевизора, ноутбука, или дополнительного монитора
15. Настройка монитора
16. Как сделать обои на весь экран
17. Делаем обои на рабочий стол во весь экран
18. Подгоняем обычные обои на широкий экран
19. 1 способ, если фотографию можно обрезать по высоте
20. 2-й способ увеличения картинки, если рисунок не обрезать
21. Исправляем растянутый экран на Windows 7
22. Почему экран растянут на Windows 7
23. Способ 1: Установка драйверов для видеокарты
24. Способ 2: Установка корректного разрешения
25. Способ 3: Настройка монитора (только ПК)
26. Решение некоторых проблем
27. Заключение
28. Видео

Исправляем растянутый экран на Windows 7

Почему экран растянут на Windows 7

С подобным сбоем чаще всего сталкиваются пользователи, которые только-только переустановили «семёрку». Его основная причина — отсутствие подходящих драйверов для видеокарты, из-за чего система работает в служебном режиме, обеспечивающем минимальную работоспособность.

Кроме того, подобное проявляется после неудачного выхода из некоторых программ или игр, в которых было установлено нестандартное разрешение. В этом случае будет достаточно просто установить правильное соотношение высоты и ширины дисплея.

Способ 1: Установка драйверов для видеокарты

Первое и самое эффективное решение проблемы некорректного соотношения сторон – установка ПО для видеокарты ПК или ноутбука. Проделать это можно множеством методов – наиболее простые и оптимальные из них представлены в следующем руководстве.

На будущее, во избежание повторения проблемы, рекомендуем вам установить программу для автоматического обновления драйверов – можете ознакомиться с примером использования такого софта, DriverMax, в материале по ссылке ниже.

У владельцев видеокарт NVIDIA GeForce растянутый экран нередко сопровождается сообщением о падении драйвера. Причины и решения такого сбоя детально рассмотрены одним из наших авторов.

Способ 2: Установка корректного разрешения

Растяжение экрана, не связанное со сбоями или отсутствием драйверов, чаще всего возникает по причине использования нестандартных разрешений компьютерной игрой. Подобная неполадка также очень часто проявляется в играх, которые отображаются в режиме «окна без рамки» (borderless window).

Устранение проблемы, возникшей по упомянутым причинам, очень простое – достаточно самостоятельно установить верное разрешение через системные утилиты Windows 7 или с помощью сторонних приложений. Инструкции по обоим вариантам вы найдёте по ссылке далее.

Способ 3: Настройка монитора (только ПК)

У пользователей настольных компьютеров растянутый экран может проявляться из-за некорректных настроек монитора – например, программное разрешение, установленное в системе, не совпадает по масштабу с физической площадью дисплея, отчего изображение растягивается. Способ исправления такого сбоя очевиден – нужно настроить и откалибровать монитор. Один из наших авторов написал детальную инструкцию по этой операции, рекомендуем с ней ознакомиться.

Решение некоторых проблем

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

Не устанавливается драйвер на видеокарту

Достаточно распространённая ситуация, которая возникает по разнообразным причинам, как софтовым, так и аппаратным. Её мы уже рассматривали, поэтому для вариантов избавления от неё ознакомьтесь со следующей статьёй.

Драйвера установились корректно, но проблема остаётся

В случае если установка драйверов не принесла результата, можем предположить, что вы установили либо неподходящий программный пакет, либо слишком старую версию, несовместимую с Windows 7. Служебное ПО понадобится переустановить – тому, как это правильно делается, посвящён отдельный материал на нашем сайте.

Заключение

Мы разобрались, почему экран на Windows 7 бывает растянутый, и как это исправить. Подводя итоги, отметим, что во избежание дальнейших проблем рекомендуется регулярно обновлять драйвера GPU.

Источник

Сузился экран монитора, появились черные полосы. Что делать, как расширить экран?

У меня компьютер стал как-то странно работать: сузился экран и изображение стало меньше, по бокам появились черные полосы. Также шрифт и значки стали меньшей четкости, как будто затуманены (или окутаны «легкой» дымкой).

Виню во всем одну игру, в которую накануне поиграли дети. Ее уже удалили, а изображение все равно такое же.

Думала сначала, что сломался монитор, но подключив его к другому ПК — изображение на нем показывается отличное. Что можно сделать.

Больше всего похоже на сбившиеся настройки разрешения и масштабирования в Windows (обычно, это удается устранить за 1-2 мин.).

Впрочем, не исключены и др. причины. Ниже рассмотрю по порядку, что нужно проверить и исправить при подобной проблеме.

Что делать, если изображение на экране сузилось и стало не четким

Проверить разрешение/масштабирование в Windows

Чтобы автоматически открыть в любой версии Windows настройки задания разрешения — нажмите сочетание кнопок Win+R, и используйте команду desk.cpl.

desk.cpl — открыть свойства экрана

Далее обратите внимание на строки:

Дисплей (параметры Windows 10)

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

Проверить установлены ли драйвера на видеокарту

Обычно, эта проблема возникает сразу после переустановки ОС Windows (в некоторых случаях при восстановлении ОС, чистке после вирусного заражения, при смене некоторых «железок»).

Драйвер на видеокарту установлен (слева), драйвера нет (справа)

2 способа открыть настройки AMD Radeon видеокарты / кликабельно

Кстати, в панели управления видеодрайвером также есть настройки масштабирования. Изменяя оные — можно подстроить размер изображения на экране монитора так, чтобы «картинка» была на всю плоскость (без черных полос). См. пример на скриншоте ниже.

AMD графика — настройки дисплея (масштабирование)

Не сбились ли настройки монитора.

Обратите внимание на аппаратные настройки самого монитора. В большинстве моделей есть опция по смещению изображения по вертикали/горизонтали (для центровки и калибровки картинки).

Кстати, чаще всего, если сбросить настройки в дефолтные или задействовать «Auto» режим (см. стрелка 3 на фото ниже) — изображение станет корректным, наиболее оптимальным для данной модели устройства.

Настройка монитора — положение по вертикали и горизонтали

Примечание : обычно, кнопки настройки монитора находятся на правой нижней панельке.

Провести диагностику монитора

Если всё вышеперечисленное не дало результатов — рекомендую проверить сам монитор, подключив его к другому ПК/ноутбуку. Возможно, имеет место быть тех. неисправность устройства (кстати, об этом также может свидетельствовать появление различных полос, ряби, постоянное изменение ширины/высоты изображения и т.д.).

Красные полосы (артефакты)

Кстати, обратите также внимание на то, когда появляются различные помехи и искажения: при неисправности монитора — как правило, они будут и при входе в BIOS, и при загрузке ОС, и на рабочем столе, и в играх.

Что делать, если появились рябь и полосы на экране компьютера/ноутбука (артефакты) — https://ocomp.info/ryab-i-polosyi-na-ekrane.html

Сегодня на этом все.

Дополнения, как и всегда, приветствуются 👇

Источник

Как расширить экран монитора на компьютере с ос Windows

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

Причины, по которым экран монитора становится узким

Чаще всего такое происходит по нескольким причинам:

Теперь рассмотрим все эти причины более подробно.

Неправильная настройка разрешения экрана

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

В этом случае исправить ситуацию довольно-таки просто. Достаточно кликнуть правой кнопкой мыши по свободному пространству рабочего стола :

В Windows 7

И в выпадающем контекстном меню выбрать пункт «Разрешение экрана»

В следующем окне найти «Разрешение» и открыть список, кликнув левой кнопкой мыши по маленькой черной стрелочке справа.

У вас должен открыться список возможных параметров разрешения экрана.

Не стоит экспериментировать со всеми разрешениями подряд, т.к. если вы выберите разрешение, которое не поддерживает ваш монитор, то экран может потухнуть, и вы не сможете настроить его без помощи мастера. Монитор не перегорит, но будет необходимо сбросить ваши настройки. Обычно это делается через «Безопасный режим», или на другом компьютере, который поддерживает то разрешение, которое вы установили сами.

Поэтому прежде чем менять разрешение экрана почитайте в инструкции к вашему монитору, какие параметры он поддерживает, или кликните мышкой по голубой ссылке «Какие параметры монитора следует выбрать?» (в этом же окне, где выбираете разрешение), и внимательно почитайте то, что там написано.

В Windows 10

Кликнуть правой кнопкой мыши по пустому пространству рабочего стола и выбрать в выпадающем контекстном меню пункт «Параметры экрана»

Переходим слева на вкладку «Дисплей», находим в окне справа «Разрешение», кликаем по стрелочке и выбираем необходимые параметры.

Обычно рядом с необходимым параметром написано «(Рекомендуется)»

Не установлен драйвер видеокарты

Обычно после переустановки операционной системы, или после замены видеоадаптера автоматически загружается временный драйвер видеокарты. И если потом не загрузить специализированные драйвера для видеокарты, то в пункте «Разрешение» в настройках экрана списка разрешений не будет (в лучшем случае два параметра). А в диспетчере устройств будет запись «Стандартный VGA графический адаптер».

В этом случае необходимо загрузить драйвер видеокарты (видеоадаптера) с диска, который поставляется с видеокартой или с официального сайта производителя видеокарты.

Если у вас на компьютере установлена операционная система Windows 10, то драйвер будет установлен автоматически.

Подключение к компьютеру телевизора, ноутбука, или дополнительного монитора

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

И в настройках «Экран» выбрать необходимый монитор.

Настройка монитора

Практически у любого монитора имеются кнопки для его настройки. Обычно они располагаются внизу спереди (снизу) или сбоку.

Найдите параметры автонастройки и установите их.

Можете попробовать настроить монитор самостоятельно при помощи других кнопок. Но это будет дольше.

Вот таким образом можно расширить экран монитора компьютера.

На этом пока всё. Если у вас возникли какие-то вопросы, то задавайте их в комментариях.

Источник

Как сделать обои на весь экран

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

Делаем обои на рабочий стол во весь экран

Сначала надо выяснить какого точно размера обои вам нужны.

Для этого жмем кнопку ПУСК, находим строчку «Панель управления» — жмем. Появится большой список. Не зависимо от того, какая версия виндоус у вас установлена, находим значок «Экран» и нажимаем на него. Появится примерно такое окно, как на картинке. У меня сейчас установлен windows-7, для других версий окно немного другое, но суть остается та же. Вам надо найти функцию «Настройки разрешения экрана».

После того как вы нажмете «Настройки разрешения экрана», появится другое окно, где вам нужна строчка «Разрешение». Напротив нее вы видите цифры, выражающие размер вашего монитора в пикселях. Это и есть размер картинки, который вам нужен для того, чтобы сделать обои во весь экран. Как видно на рисунке, у меня размер экрана 1366 пикселей в ширину и 768 пикселей в высоту. У вас может быть другое.

Теперь сохраняем на свой комп картинку, которую вы хотите применить в качестве обоев для рабочего стола. Самый простой способ подогнать размеры обоев, это воспользоваться программой Фотошоп. Но будем исходить из того, что она не установлена на ваш ПК, и используем другую программу, которая есть на любом компьютере с операционной системой Виндоус.

Находим картинку в папке и жмем на нее правой кнопкой мыши. Выбираем «Открыть с помощью». Вылезет список, в котором вам надо нажать на строчку «Microsoft Office Picture Manager» и картинка откроется в этой программе.

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

Подгоняем обычные обои на широкий экран

1 способ, если фотографию можно обрезать по высоте

Вам надо нажать на кнопку «Рисунок», а в выпавшем списке на «Изменить размер».

Отмечаем «Процент от исходных ширины и высоты» и выставляем нужный процент опытным путем. Ширина картинки у нас 1024, а надо 1366 пикселя, то есть она должна быть больше примерно на 33%. Прибавляем 33 к исходным ста процентам и вписываем в поле 133%. Картинка увеличивается.

Мы можем посмотреть новый размер картинки тут же — «Итоговый размер». Видим, что новый размер наших обоев стал 1362х1021. Не забываем нажать на кнопку ОК.

Если у вас стандартные пропорции экрана, то этого обычно достаточно, чтобы увеличить размер обоев на рабочий стол. Но если экран широкий, как у меня, то вы можете заметить, что высота картинки стала больше, чем нужно. Поэтому мы отрежем лишнее, для чего снова нажмем на «Рисунок» и выберем строчку «Обрезать».

Эти обои обрезать будем снизу. Высота у нас 1024, а нужно 768, то есть отрезаем 256 пикселей. Жмем кнопку ОК и сохраняем рисунок — «Файл» — «Сохранить». В зависимости от того, что изображено на картинке, можно отрезать низ или верх, либо немного сверху и немного снизу.

2-й способ увеличения картинки, если рисунок не обрезать

Тут все намного проще, с той лишь разницей, что если фотографию не обрезать, то сбоку картинки на мониторе останутся пустые поля.

Увеличиваем рисунок до нужного размера как описано в первом способе, но так, чтобы ни одна из сторон не была больше, чем нужно. Если у вас широкий экран, а картинка стандартных размеров, то высоту мы увеличиваем, а ширина получится меньше размера экрана. Сохраняем.

Ставим обои на рабочий стол и подбираем цвет экрана (незаполненных рисунком полосок по сторонам) под цвет картинки. Для этого снова заходим в ПУСК — Панель управления — Экран.

Жмем на строчку «Изменение фонового рисунка рабочего стола». Через «обзор» находим сохраненный рисунок, «Положение изображения» выбираем «По центру», ниже нажимаем на строчку «Изменить цвет фона».

рис. цвет фона

Появляется окошко с палитрой. Подбираем наиболее подходящий для вашей картинки цвет, нажимаем ОК. Окно с палитрой исчезает, жмем на кнопку «Сохранить изменения».

И, что еще следует упомянуть, если картинка совсем маленькая, а вы пытаетесь увеличить ее во весь экран, то может пострадать качество изображения.

Если статья помогла вам сделать обои на весь экран, пожалуйста, лайкните ниже, или напишите комментарий.

Источник

Исправляем растянутый экран на Windows 7

Почему экран растянут на Windows 7

С подобным сбоем чаще всего сталкиваются пользователи, которые только-только переустановили «семёрку». Его основная причина — отсутствие подходящих драйверов для видеокарты, из-за чего система работает в служебном режиме, обеспечивающем минимальную работоспособность.

Кроме того, подобное проявляется после неудачного выхода из некоторых программ или игр, в которых было установлено нестандартное разрешение. В этом случае будет достаточно просто установить правильное соотношение высоты и ширины дисплея.

Способ 1: Установка драйверов для видеокарты

Первое и самое эффективное решение проблемы некорректного соотношения сторон – установка ПО для видеокарты ПК или ноутбука. Проделать это можно множеством методов – наиболее простые и оптимальные из них представлены в следующем руководстве.

На будущее, во избежание повторения проблемы, рекомендуем вам установить программу для автоматического обновления драйверов – можете ознакомиться с примером использования такого софта, DriverMax, в материале по ссылке ниже.

У владельцев видеокарт NVIDIA GeForce растянутый экран нередко сопровождается сообщением о падении драйвера. Причины и решения такого сбоя детально рассмотрены одним из наших авторов.

Способ 2: Установка корректного разрешения

Растяжение экрана, не связанное со сбоями или отсутствием драйверов, чаще всего возникает по причине использования нестандартных разрешений компьютерной игрой. Подобная неполадка также очень часто проявляется в играх, которые отображаются в режиме «окна без рамки» (borderless window).

Устранение проблемы, возникшей по упомянутым причинам, очень простое – достаточно самостоятельно установить верное разрешение через системные утилиты Windows 7 или с помощью сторонних приложений. Инструкции по обоим вариантам вы найдёте по ссылке далее.

Способ 3: Настройка монитора (только ПК)

У пользователей настольных компьютеров растянутый экран может проявляться из-за некорректных настроек монитора – например, программное разрешение, установленное в системе, не совпадает по масштабу с физической площадью дисплея, отчего изображение растягивается. Способ исправления такого сбоя очевиден – нужно настроить и откалибровать монитор. Один из наших авторов написал детальную инструкцию по этой операции, рекомендуем с ней ознакомиться.

Решение некоторых проблем

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

Не устанавливается драйвер на видеокарту

Достаточно распространённая ситуация, которая возникает по разнообразным причинам, как софтовым, так и аппаратным. Её мы уже рассматривали, поэтому для вариантов избавления от неё ознакомьтесь со следующей статьёй.

Драйвера установились корректно, но проблема остаётся

В случае если установка драйверов не принесла результата, можем предположить, что вы установили либо неподходящий программный пакет, либо слишком старую версию, несовместимую с Windows 7. Служебное ПО понадобится переустановить – тому, как это правильно делается, посвящён отдельный материал на нашем сайте.

Заключение

Мы разобрались, почему экран на Windows 7 бывает растянутый, и как это исправить. Подводя итоги, отметим, что во избежание дальнейших проблем рекомендуется регулярно обновлять драйвера GPU.

Источник

Видео

Как растянуть фон рабочего стола

Как сделать экран 1920 на 1080!? Чтобы НЕ БЫЛО ЧЕРНЫХ ПОЛОС ПО БОКАМ ЭКРАНА МОНИТОРА

Как изменить разрешение экрана в Windows 7

Рабочий стол не на весь экран

Как сделать обои рабочего стола во весь экран

уменьшенное изображение на экране монитора. Как исправить.

Как установить обои на рабочий стол на весь экран | Как растянуть обои в Windows

Как расширить экран монитора. Рабочий стол не на весь экран Windows 11.Черные полосы по краям экрана

Как расширить экран на ноутбуке

Настройка экрана Windows 7. Подробная инструкция

Как сделать изображения на 100% полноэкранными только с помощью CSS — Techstacker

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

Следующий CSS-код представляет собой «трюк», позволяющий изображениям расширяться на всю ширину экрана (от края до края) независимо от ширины остальной части макета страницы.

Во-первых, вот класс CSS с необходимыми свойствами стиля:

 .full-screen-width {
  положение: родственник;
  слева: 50%;
  справа: 50%;
  поле слева: -50vw;
  поле справа: -50vw;
  максимальная ширина: 100vw;
  ширина: 100vw;
} 

Краткий пример видео

Как приведенный выше код полноэкранного изображения работает на практике:

Вы можете сразу же использовать приведенный выше класс CSS в своих проектах. Это зависит от того, как ваш конкретный проект уже структурирован и оформлен.

Читайте дальше, чтобы узнать, как воссоздать приведенный выше пример видео, и это даст вам больше информации о том, как его использовать на практике.

---

На видеоиллюстрации выше у нас есть простой макет статьи для страницы с одним изображением и несколькими абзацами. Давайте вместе!

HTML

 <статья>
  <р>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Коррумпированные, официальные лица.
    Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
    pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
  
  <изображение
   
    src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
    alt="Счастливая собака смотрит в окно"
  />
  <р>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit.  Камке дуцимус
    incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
    explicabo consectetur beatae eum commodi quibusdam ad soluta Labore Tenetur!
  

  <р>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
    blanditiis tempore ab nam dolores ratione accusantium Labore pariatur Quasi!
    Numquam quod corporis, necessitatibus ipsum sequi vel. Сусипит, аликвам
    долорем?
  

 

Чтобы заставить код ширины полноэкранного изображения работать на практике, помимо стилизации элемента изображения необходимо сделать еще две вещи:

Управление шириной макета в элементе

Вот весь код CSS для рабочего примера:

 body {
  переполнение-x: скрыто;
}
статья {
  максимальная ширина: 700 пикселей;
  запас: 3рем авто;
  заполнение: 0 2rem;
}
.полная ширина экрана {
  положение: родственник;
  слева: 50%;
  справа: 50%;
  поле слева: -50vw;
  поле справа: -50vw;
  максимальная ширина: 100vw;
  ширина: 100vw;
} 

Теперь вы можете применить класс . full-screen-width к любому элементу изображения в вашем проекте (внутри ограниченной ширины макета), и его ширина будет охватывать от края до края экрана.

Демонстрационный код.

Фото: Эндрю Понс

Полноэкранное фоновое изображение CSS и CSS3 — Dreamweaver CS6 — tutvid.com

1. Выбор фонового изображения

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

2. Техника CSS: размещение изображения

С помощью простой техники CSS нам нужно сначала разместить наше изображение, которое будет фоновым изображением. Чтобы поместить это в нужное место, давайте перейдем в представление «Код» и перетащим наше фоновое изображение с панели «Файлы» в первую строку под открывающим тегом «body».

3. Присвоить идентификатор изображению

Перейдите в представление «Дизайн» и выберите это большое изображение, которое, вероятно, будет покрывать все (вы можете прокрутить вниз, чтобы увидеть свой веб-сайт под этим изображением, если вы беспокоитесь), и после того, как вы выбрали изображение, посмотрите на панель «Свойства» и присвойте этому изображению идентификатор «fsbg», который будет нашей маленькой аббревиатурой от «полноэкранный фон».

4. Начните добавлять CSS

Мы воспользуемся инструментами Dreamweaver для добавления CSS и добавим CSS прямо в этот документ. Если вы достаточно продвинуты, чтобы писать CSS и/или использовать внешний файл CSS, это замечательно и настоятельно рекомендуется, но здесь мы не будем усложнять. Перейдите в «Окно»> «Стили CSS», чтобы открыть панель CSS, и нажмите маленькую кнопку «Добавить новое правило CSS» в правом нижнем углу панели.

5. Целевой идентификатор с помощью CSS

В диалоговом окне «Новое правило CSS» мы хотим установить тип селектора «ID», затем установить идентификатор «#fsbg» и определение правила «(Только для этого документа)». Это поместит код CSS на нашу страницу здесь и нацелит любой элемент HTML с идентификатором «fsbg».

6. Масштабирование фона с пропорциями

Выберите опцию «Коробка», установите ширину на «100%» и установите высоту на «Авто». Нажмите кнопку «Применить» и перейдите к следующему шагу.

7. Зафиксируйте фон на месте с помощью позиционирования

Затем выберите параметр «Положение» и установите для параметров «Сверху» и «Слева» значение «0» — это всегда прижимает изображение к верхнему левому углу. Также установите для параметра Position значение «fixed» — это позволит нашему контенту прокручиваться по фоновому изображению. Наконец, установите Z-индекс на «-100» — это подтолкнет фон «под» всем остальным контентом, чтобы наш веб-сайт располагался «поверх» нашего фона. Нажмите «ОК», чтобы зафиксировать изменения.

8. Добавление свойств CSS вручную

Нам все еще нужно добавить два небольших фрагмента CSS. Вернитесь в нашу панель CSS, нажмите кнопку ссылки «Добавить свойство» и добавьте следующие свойства: «min-height» установите на «100%», это гарантирует, что наше изображение заполнит область экрана сверху вниз.

Также добавьте свойство «min-width», установленное на «1040px», это ширина оболочки на моем сайте, поэтому я всегда хочу, чтобы фоновое изображение было как минимум такой же ширины. Обратитесь к моему скриншоту, если у вас есть вопросы о том, что и где вы печатаете.

9. Предварительный просмотр в браузере

Нажмите «F12», чтобы просмотреть в браузере и проверить. Измените размер окна браузера и посмотрите, как изменится фон.

10. Этот метод работает в этих браузерах

Эта версия отлично подходит для Google Chrome, Mozilla Firefox, Opera и Safari. Он также работает в IE7, 8 и 9.

11. Техника CSS3

Теперь мы собираемся использовать более современную и быструю технику, использующую CSS3, и мы также напишем наш CSS во внешнем файле CSS вручную. Давайте повеселимся с этим. Мы используем технику, которую можно найти на CSS-Tricks.com, спасибо Крису и его замечательному сайту!

12. Прикрепите фоновое изображение

Начните с нацеливания тега «тело» с помощью CSS и прикрепите фоновое изображение, и мы установили фон, чтобы он не повторялся, чтобы он был центрирован по горизонтали и вертикали, а также установлен в фиксированное положение.

[code type=»css» title=»Code»]body {
background: url(../images/fullscreen-bg.jpg) фиксированный центр без повторов;
}
[/код]

13. Установить размер фона CSS3

Теперь мы собираемся использовать «размер фона», чтобы указать, что это изображение должно занимать всю область экрана. Мы дублируем «размер фона» с префиксом для Safari и Chrome (-webkit-), затем снова с префиксом для Firefox (-moz-), а затем снова с префиксом для Opera (-o-). Первоначальный «фоновый размер» подходит почти для всех современных браузеров, но мы все же хотим быть конкретными для более старых версий этих браузеров.
[code type=»css» title=»Code»]-webkit-background-size: обложка; /*Используется Safari и Chrome*/

-moz-background-size: cover; /* Используется Firefox */
-o-background-size: cover; /* Используется Opera */
background-size: cover; /* Все современные браузеры */
[/code]

14. Этот метод работает в этих браузерах

Эта версия отлично подходит для Google Chrome, Mozilla Firefox 3.