Css растянуть изображение на всю ширину. Как растянуть картинку на весь экран с помощью css и других проверенных способов. Где будет работать решение растянуть фон CSS
ЗадачаРастянуть фоновую картинку на всю ширину окна браузера с помощью CSS3.
РешениеДля масштабирования фона предназначено свойство background-size , в качестве его значения указывается 100%, тогда фон будет занимать всю ширину окна браузера. Для старых версий браузеров следует использовать специфические свойства с префиксами, как показано в примере 1.
Пример 1. Растягиваемый фон
HTML5 CSS 2.1 IE Cr Op Sa Fx
Растягиваемый фон body { background: url(images/sun2.png) no-repeat; -moz-background-size: 100%; /* Firefox 3.6+ */ -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */ -o-background-size: 100%; /* Opera 9.6+ */ background-size: 100%; /* Современные браузеры */ }
Результат данного примера показан на рис. 1.
Рис. 1. Вид фона при уменьшенном размере окна
При увеличении размера окна браузера фон также начнёт расширяться, это приведет к ухудшению вида картинки (рис. 2).
Рис. 2. Вид фона при увеличенном размере окна
2 голосаПриветствую вас у себя в блоге. Продолжаем постигать основы html. Этот урок будет настолько прост и интересен, что надеюсь, вам захочется узнать больше о языках программирования. Буквально за пару минут вы узнаете как сделать картинку фоном в html и добьетесь превосходного результата.
Я также расскажу о некоторых нюансах, которые позволят сделать фон наиболее ровным и красивым. Ну что ж, начнем?
Выбор картинкиНачать мне бы хотелось с выбора изображения. Чтобы на страничке вы выглядел более ровным и красивым, а вам не пришлось заморачиваться с размерами и выравниванием. Предлагаю сразу искать бесшовные текстуры. Что это такое?
К сожалению, растянуть изображение в html на весь экран невозможно. Фото используется в натуральную величину. Если картинка маленькая, то она замостит всю площадь, как на скриншоте внизу. Чтобы растянуть картинку придется создать дополнительный css документ, без этого не получится.
Хотя, у вас есть возможность обойти систему. Для этого используйте фотошоп и картинки до ширины экрана (1280х720). Хотя в этом случае при скроллинге вниз, она картинка будет сменять другую.
Намного лучшим вариантом, если вы не хотите использовать css, будет использование бесшовных текстур. У них никаких стыков не видно. Они, как обои или современная плитка в дизайне. Один сменяет другой и никаких стыков не видно.
Если вас интересуют и отсутствие юридических последствий за их использование, то я рекомендую поискать на сайте Pixabay.com .
HtmlТеперь давайте поработаем с кодом. Должен отметить сразу, что сейчас мы работаем с html, то есть меняем изображение не для всего сайта, а только одной конкретной страницы, для которой пишется код. Если вас интересуют изменения всего ресурса, то вам нужно создавать код с помощью css , но об этом чуть позже.
Итак, вы можете работать в блокноте, я предпочитаю NotePad++. В нем работать гораздо удобнее: код дописывают за тебя, теги подсвечиваются. Программа бесплатная, и весит около 3 Мб. Очень рекомендую, особенно если вы новичок.
Итак, в тег body вам необходимо добавить атрибут background и указать ссылку на изображение, откуда будет взята картинка. Вот как это выглядит в программе.
Можете просто открыть блокнот и скопировать вот этот код. В кавычках поставьте ссылку на ту картинку, которая вам нравится.
Background-image |
Background-image
Хотелось бы отметить для новичков, вот какой момент. Если вы берете изображение с pixabay, то ссылку вставлять нужно не на страницу с картинкой, а открыть рисунок в соседней вкладке.
Копируйте именно этот URL.
Сохраните документ. Не забывайте, что если вы используете блокнот, то нужно использовать расширение .html . Просто назовите документ, к примеру, back.html . В противном случае он сохраниться как текстовый документ и браузер просто не поймет, что ему нужно делать.
Готово, страница залита другим цветом.
Если вы хотите узнать больше о html, я советую вам скачать бесплатный курс Евгения Попова . Из него вы узнаете больше тегов, возможностей языка, попробуете кое-какие новые приемы и будете больше знать.
Не скажу, что курсы Евгения Попова пользуются бешеной популярностью. Многие специалисты ругают его и если вы натыкались на подобные высказывания, то вот вам мое мнение. Эти уроки предоставляются бесплатно и несмотря на это они замечательно справляются со своей основной задачей – показать новичку основы, ввести его в курс дела.
Как у каждого писателя свой взгляд на то, как нужно писать, так и программисты имеют свой почерк. Учиться создавать сайты можно всю жизнь, но начинать с чего-то нужно. С книг? Только не это. Да, в них больше достоверных сведений, актуальной информации, но их так сложно осилить.
Не согласны со мной? Могу предложить альтернативу. Книга Элизабет и Эрика Фримен «Изучаем HTML, XHTML и CSS ». Не очень скучный бестселлер и выпустился не так давно, в 2016 году. Информация устареть еще не успела.
Если вам нужно, чтобы фон повторялся на всех страницах вашего сайта, то без CSS не обойтись. Конечно, можно каждый раз прописывать путь, как в предыдущей главе. Но представьте, если со временем вам будет нужно его заменить: ссылка устареет или просто захочется поменять дизайн. Заходить на каждую страничку и менять код? Так не пойдет.
CSS помогает решить эту проблему. Вам нужно создать файл с расширением css и ввести следующий код:
body { background: url(путь к файлу); }
Давайте немного поговорим о самом коде. В скобках, после url вы можете вписать ссылку на картинку из стороннего источника, или просто название документа, если картинка лежит в одной папке с этим файлом.
Для тех, кто хочет знать лучшеПри помощи css вы можете растянуть background image , сделать так, чтобы оно не повторялось, добавить gif-анимацию и многое другое.
В одной статье всего не упишешь. Да и задачи такой я перед собой не ставил. Существует масса тонкостей и если вам обещают рассказать в одной статье обо всем, то это ни что иное как обман.
Хотите научиться правильно писать сайты? Я рекомендую вам изучать языки программирования . Могу посоветовать курс Андрея Бернацкого «HTML5 и CSS3 с Нуля до Профи ». Мне очень нравится этот автор. Я не проходил конкретно этот курс, несколько лет назад было уже что-то аналогичное, но менее современное.
Автор очень приятно рассказывает, все легко и понятно. Изюминка этого курса заключается в том, что вы не просто изучаете, вы создаете конкретный сайт вместе с преподавателем. В результате вы получите визитку, блог и даже интернет-магазин. Очень круто. Можете посмотреть первые три теоретических урока по HTML5 из этого курса прямо здесь и сейчас.
Кстати, вместе с этим курсом вы получаете 7 бонусов: основы html и css Андрея Бернацкого, верстка для начинающих, создание лендинг пейдж за вечер и многое другое. Перед тем как заниматься серьёзным обучением, пощупайте бесплатный курс «Практика HTML5 и CSS3 ».
Ну вот в принципе и все. Подписывайтесь на рассылку, чтобы узнавать больше. Совсем скоро я расскажу чуть больше о адаптивной верстке, увеличении заработка с любого блога и дам множество полезных советов о упрощении работы. До новых встреч и удачи в ваших начинаниях.
Веб технологии, как и различного рода тенденции в дизайне, не стоят на месте, поэтому каждый раз появляются какие-то оригинальные фишки и нюансы для сайтов. Одним из подобных «направлений» является использование фона (backgorund), который растягивается на весь экран по ширине и высоте. Что-то вроде около года назад или больше я рассказывал — изображение помещалось в шапку блога и плавно «переходило» в основной фоновый цвет веб-страницы. При желании можно даже добавить .
Размещение в качестве бекграунда большой масштабируемой картинки — это что-то новое и более сложное занятие, решение которого нашел в этой статье .
Цель данного урока разместить на сайте фоновую картинку, которая бы постоянно закрывала весь фон окна браузера. Что же конкретно нужно сделать:
- заполнить всю страницу одним изображением без пробелов;
- изменение размеров картинки при необходимости (уменьшении окна браузера);
- сохранение пропорций изображения;
- расположение изображения в центре страницы;
- отсутствие полос прокрутки на странице;
- кросс-браузерное решение, подходящее для разных браузеров;
- реализация без всяких сторонних технологий типа flash.
Итак, имеется сразу несколько подходящих решений для фона сайта на весь экран.
Замечательное, простое и прогрессивное решение с помощью CSS3Для реализации задачи мы можем использовать свойство background-size в CSS3. Будем использовать элемент html который получше body. Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.
html { background : url (images/bg.jpg ) no-repeat center center fixed ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size : cover; } |
html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Решение поддерживают почти все популярные в сети:
- Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
- Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
- Chrome Whatever+
- IE 9+
- Safari 3+
Некий Goltzman нашел решение, которое позволяет работать хаку в IE
filter : progid: DXImageTransform.Microsoft .AlphaImageLoader(src= ".myBackground.jpg" , sizingMethod= "scale" ) ; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")" ; |
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")";
Но внимание!!! при этом могут возникнуть некоторые проблемы с работой ссылок на странице. Кстати, чуть позже Matt Litherland добавил что код, в принципе, можно использовать но для этого нельзя применять элементы html или body а нужно реализовать все через div с 100% высотой и шириной.
CSS -хак номер 1Альтернативную версию представляет Doug Neiner. В этом случае используется встроенный в страницу элемент , который может изменять размер в любом браузере. Устанавливаем значение min-height, которое способствует заполнению окна браузера вертикально и ставим 100% для width, что заполняет страницу горизонтально. Также ставим min-width чтобы изображение никогда не было меньшим, чем оно есть на самом деле.
img.bg { /* Set rules to fill background */ min-height : 100% ; min-width : 1024px ; /* Set up proportionate scaling */ width : 100% ; height : auto ; /* Set up positioning */ position : fixed ; top : 0 ; left : 0 ; } @media screen and (max-width : 1024px ) { /* Specific to this particular image */ img.bg { left : 50% ; margin-left : -512px ; /* 50% */ } } |
img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }
Работает в любых версиях качественных браузеров — Safari / Opera / Firefox и Chrome. Для IE как всегда есть свои нюансы:
- IE 9 — работает;
- IE 7/8 — чаще всего функционирует правильно, но не центрирует изображения меньше окна браузера;
- IE 6 — можно настроить, но кому вообще нужен этот браузер.
Еще один вариант решения задачи с помощью CSS стилей это разместить встроенное изображение на странице с фиксированной позицией в левом верхнем углу, после чего задать для min-width и min-height значение 100% сохраняя пропорции.
#bg { position : fixed ; top : -50% ; left : -50% ; width : 200% ; height : 200% ; } #bg img { position : absolute ; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; margin : auto ; min-width : 50% ; min-height : 50% ; } |
#bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }
Хак работает в:
- Safari / Chrome / Firefox (слишком ранние версии не тестировались, но в последних работает хорошо)
- IE 8+
- Opera (любая версия) и вместе с IE both оба глючат одинаково с ошибкой позиционирования.
Данный вариант намного легче (с точки зрения CSS) если мы знаем что соотношение сторон картинки (img используется в качестве фона) больше или меньше текущего соотношения окна браузера. Если меньше, то мы можем использовать только width = 100% и при этом по ширине и высоте окно будет одинаково заполнено. Если больше — можно указать только height = 100% для заполнения всего окна.
Доступ ко всем данным идет через JavaScript, коды используются следующие:
#bg { position : fixed ; top : 0 ; left : 0 ; } .bgwidth { width : 100% ; } .bgheight { height : 100% ; } |
#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }
< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); }); |
$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ((theWindow.width() / theWindow.height()) < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });
По моему, центрирование в этом случае не производится (насколько я понял), но его можно сделать. Поддерживается большинство десктопных браузеров, в том числе IE7+. Напоследок автор статьи про хаки подготовил набор файлов примеров, в которых это все реализована — скачать можно . В комментариях к статье-оригиналу также содержится некоторая информация и обсуждение, хотя большинство важных деталей автор добавлял в виде апрейтов к посту и у меня он также переведены и указаны. Конечно, разобраться во всем этом помогут и примеры. В целом, если бы не постоянные «приколы» от IE7 все упомянутые хаки были бы идеальными.
P.S. Хотите купить книгу? — не обязательно ходить в магазине ведь сейчас онлайн книжный интернет магазин позволяет сделать все через сеть — выбрать, оплатить и оформить доставку на дом.
Помню перерыл много информации и испробовал не мало способов, пока не нашел именного того решения, что нужно было именно в тот момент.
Ниже я покажу 3 способа, которые растягивают фон на всю ширину экрана.
Способ №1Первый способ использует чистый CSS3 . Все получается благодаря свойству background-size . В моем случаи я буду растягивать картинку на всю ширину экрана, то есть присвою свойства к тегу body . Вы можете применить по надобности к блоку например.
Растягивать на весь экран будем вот эту картинку с милой девушкой 🙂
В общим определяемся с блоком которому присваиваем стили и дописываем в файле стилей данному блоку, следующий код:
Body{ background: url(images/bg.jpg) no-repeat center top fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Как видите, в параметре background добавляем путь к изображению и устанавливаем положение картинки относительно экрана. В нашем случаи это center и top. Это означает что картинка будет в центре экрана, и прижата своим верхом к верху экрана. Это для того, чтобы всегда было видно лицо девушки. Если у Вас например абстрактный фон или природа, где видно небо, поле, горизонт, то можно поставить значения center и center. В общим если вы знакомы с CSS, то думаю разберетесь. Также установлено значение fixed , которое фиксирует изображение.
Способ очень простой, я его использую всегда и он меня устраивает на все 100%. Есть лишь одно но. Старые браузеры, не знакомы с CSS3, поэтому те кто используют древние версии не увидят должного результата.
Способ №2Данный способ использует обычный CSS. По сути тоже простой. Выводим в теле сайта изображение присвоив id - bg :
И прописываем стили:
#bg { position:fixed; z-index: -1; top:0; left:0; min-width:100%; min-height:100%; }
Позиционирование фиксированное и проходит растяжение на весь экран.Вот так просто:).
Способ №3Тут применяется jQuery . Поэтому сначала нужно подключить библиотеку, если она не подключена ранее.
После библиотеки подключаем скрипт, который и будет масштабировать наш фон
$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ((theWindow.width() / theWindow.height()) < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });
И в конце добавляем стилей, чтобы все работало. Открываете файл стилей и добавляете в него следующий код:
#bg { position: fixed; top: 0; left: 0;z-index: -1; } .bgwidth { width: 100%; } .bgheight { height: 100%; }
По стилям видно, что мы добавили позиционирование. В данном случаи это fixed . Изображение при прокрутке будет оставаться фиксированным фоном, если же изменить позиционирование на absolute , то фон можно прокрутить. Кстати, так же можно сделать и с первыми двумя способами.
Также указан параметр - z-index: -1 , для того чтобы картинка была за текстом. Если у Вас нет текста, который должен быть спереди, можете убрать этот параметр.
Какой способ использовать, решать Вам. Как и писал Выше, мне более близок первый способ. Он самый простой и не хуже других.
На этом все, спасибо за внимание. 🙂
Привет. Сегодня рассмотрим, как можно растянуть фон css средствами (без вмешательства других средств, таких как javascript и иже с ними).
Растянуть фон CSS средствами стало возможно с появлением CSS3, конкретно при помощи свойства background-size. Надо сказать, что это свойство работает намного лучше, чем аналогичные решения на Javascript (которые использовались до появления background-size), так как быстрее и адекватнее реагирует на изменение размера браузера, быстрее сглаживает растянутую картинку, и, как любили говорить в начале 2000-х, - «Будет работать даже с отключенным Javascript».
Решение: как растянуть фон CSS средствамиУ свойства background-size может быть несколько значений.
1) это может быть одна из дирректив: cover или contain.
Background-size: contain; /* Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. */ background-size: cover; /* Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. */
2) это могут быть проценты (100% или 94% от ширины контейнера). При этом можно использовать как 1 значение в процентах, так и 2. Если значений будет 2, то масштабироваться будут одновременно и высота и ширина картинки, при этом каждая из величин подгоняется пропорционально процентами указанными в параметрах).
Background-size: 100%; /*Равносильное директиве cover*/ background-size: 100% 50%; /*Ширина будет на 100% ширины блока, а вот высота - только на 50%, картинка скорее всего будет деформирована*/
3) прямо численное значение (в пискелях, сантиметрах, em и т.д.). Параметров также может быть 2 (или 1), как и в предыдущем случае.
4) значение auto. Обозначает, что картинка не будет растягиваться, а будет использован исходный размер. При этом, параметров также может быть 2 или 1. То есть можно указать следующее:
Background-size: 60% auto; /*ширина картинки будет 60%, а высота пропорциональна размерам исходной картинки*/
Где будет работать решение растянуть фон CSS?Судя по данным сайта Can I Use, работать будет во всех современных браузерах, включа IE версии не ниже 9. Так, что переживать в принципе повода нет. Смотрите таблицу совместимости: