Htmlcss — Не могу растянуть на всю страницу фон.


Содержание

Как просто и быстро сделать картинку фоном при помощи html

Приветствую вас у себя в блоге. Продолжаем постигать основы html. Этот урок будет настолько прост и интересен, что надеюсь, вам захочется узнать больше о языках программирования. Буквально за пару минут вы узнаете как сделать картинку фоном в html и добьетесь превосходного результата.

Я также расскажу о некоторых нюансах, которые позволят сделать фон наиболее ровным и красивым. Ну что ж, начнем?

Выбор картинки

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

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

Хотя, у вас есть возможность обойти систему. Для этого используйте фотошоп и измените размер картинки до ширины экрана (1280х720). Хотя в этом случае при скроллинге вниз, она картинка будет сменять другую.

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

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

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

Итак, вы можете работать в блокноте, я предпочитаю NotePad++. В нем работать гораздо удобнее: код дописывают за тебя, теги подсвечиваются. Программа бесплатная, и весит около 3 Мб. Очень рекомендую, особенно если вы новичок.

Итак, в тег body вам необходимо добавить атрибут background и указать ссылку на изображение, откуда будет взята картинка. Вот как это выглядит в программе.

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

Растягиваем фон на всю страницу с помощью CSS

Задача: используя CSS растянуть фоновую картинку на весь экран соблюдая некоторые требования:
1. фон должен быть неподвижен и занимать всю площадь экрана
2. у изображения должны сохраняться пропорции
3. из-за фона не должно появляться скролов
4. работать во всех современных браузерах

В демонстрации, чтобы оценить, что фоновая картинка ведет себя как мы и предполагали мы можем либо изменить масштаб браузера кнопками на клавиатуре Ctrl + «+» (зажмите контрл и нажмите кнопку плюс или минус) либо изменяя размер окна браузера. Фоновое изображение будет автоматически центрироваться, сохранять пропорции и занимать всю площадь экрана.

Рассмотрим теперь стили CSS. Фоновую картинку я прилепил к тегу body

В общем-то это и все что надо сделать. Ключевой момент это свойство background-size : cover ; которое говорит браузеру, что изображение по высоте и ширине должно поместиться в окно браузера. С помощью атрибута fixed мы указываем, что изображение неподвижно. Атрибуты center обозначает, что фон будет центрироваться по оси X и Y (центрировать посередине необязательно).

Если вы хотите что-то добавить, напишите, пожалуйста, ниже комментарий

Как растянуть фон, изображение на всю ширину блока, экрана

Доброго времени суток. ��

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

Помню перерыл много информации и испробовал не мало способов, пока не нашел именного того решения, что нужно было именно в тот момент.

Ниже я покажу 3 способа, которые растягивают фон на всю ширину экрана.

Способ №1

Первый способ использует чистый CSS3. Все получается благодаря свойству background-size. В моем случаи я буду растягивать картинку на всю ширину экрана, то есть присвою свойства к тегу body. Вы можете применить по надобности к блоку например.

Растягивать на весь экран будем вот эту картинку с милой девушкой ��

В общим определяемся с блоком которому присваиваем стили и дописываем в файле стилей данному блоку, следующий код:

Как видите, в параметре background добавляем путь к изображению и устанавливаем положение картинки относительно экрана. В нашем случаи это center и top. Это означает что картинка будет в центре экрана, и прижата своим верхом к верху экрана. Это для того, чтобы всегда было видно лицо девушки. Если у Вас например абстрактный фон или природа, где видно небо, поле, горизонт, то можно поставить значения center и center. В общим если вы знакомы с CSS, то думаю разберетесь. Также установлено значение fixed, которое фиксирует изображение.

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

Способ №2

Данный способ использует обычный CSS. По сути тоже простой. Выводим в теле сайта изображение присвоив id — bg:

И прописываем стили:

Позиционирование фиксированное и проходит растяжение на весь экран.Вот так просто :).

Способ №3

Тут применяется jQuery. Поэтому сначала нужно подключить библиотеку, если она не подключена ранее.

После библиотеки подключаем скрипт, который и будет масштабировать наш фон

Далее уже как и во втором способе, в теле сайта выводим картинку и присваиваем ей id, например bg.

И в конце добавляем стилей, чтобы все работало. Открываете файл стилей и добавляете в него следующий код:

По стилям видно, что мы добавили позиционирование. В данном случаи это fixed. Изображение при прокрутке будет оставаться фиксированным фоном, если же изменить позиционирование на absolute, то фон можно прокрутить. Кстати, так же можно сделать и с первыми двумя способами.

Также указан параметр — z-index: -1, для того чтобы картинка была за текстом. Если у Вас нет текста, который должен быть спереди, можете убрать этот параметр.

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

На этом все, спасибо за внимание. ��

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Как растянуть фон в html?

Как сделать так чтобы фон подстраивался под любой размер экрана? На даный момент имеется вот такой код:

Попробуйте указать background-size: cover

background: url(mages/05WM.jpg) 100% 100% no-repeat; /* Добавляем фон */

background-size: cover; /* Масштабируем фон */

Нет, не получается, я просто не знаю куда его вставлять. Вот полный код:

Заголов­ ок

nd: url(images/05WM.jpg)­ ;
font-family: Monotype Corsiva; color:#fff;»­ >

6c055.jpg» border=»0″
style=»position­ : absolute; right: 20px; bottom: 20px;»

Как растянуть фон на все окно браузера? Четыре простых решения на CSS и JavaScript. Свойство background-size

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

* Изображение заполняет всю страницу, без пробелов
* Рисунок масштабируется если нужно
* Сохраняются пропорции изображения (соотношение сторон)
* Изображение центрируется в центре страницы
* Не появляются полосы прокрутки
* По-возможности максимально кроссбраузерное решение
* Без различных махинаций с флешэм

Отличный, простой и прогрессивный метод с использованием CSS

Мы можем решить нашу задачу с помощью чистого CSS, за что спасибо свойству background-size, которое появилось в CSS3. Нам понадобиться элемент html (лучше, чем использовать body, т.к. это не всегда полная высота окна браузера). Мы зададим фоновый рисунок элементу html, центрируем его, позицию выберем фиксированную (fixed) и скорректируем размер изображения с помощью свойства background-size, которое установим в значение cover:

Работать такой вариант будет в:

* Safari 3+
* Chrome любой версии
* IE 9+
* Opera 10+ (Opera 9.5 поддерживает background-size, но не поддерживает cover)
* Firefox 3.6+ (Firefox 4 поддерживает свойство background-size без приставки -moz)

Есть так же решение для IE, но будьте осторожно — есть мнение, что после его применения некоторые ссылки на странице не работают. Если такое случается — попробуйте применить этот код не к блокам html или body, а к блоку div, но с шириной и высотой 100%. Вот код:

Цукерберг рекомендует:  Стили CSS3 для упорядоченного списка

Только CSS. Вариант №1

В этом примере мы будем использовать элемент img, который легко изменяет размер в любом браузере. Мы воспользуемся свойством min-height чтобы заполнить окно браузера вертикально и зададим ширину в 100% чтобы сделать тоже самое по горизонтали. Мы так же зададим min-width для того, чтобы изображение не становилось меньше чем оно есть на самом деле.

200?’200px’:»+(this.scrollHeight+5)+’px’);»> 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;
>

Работает в следующих браузерах:

* В любой версии нормальных браузеров: Safari / Chrome / Opera / Firefox
* IE 6: Работает — но есть проблемы с фиксированием изображения
* IE 7/8: По большей части работает, но не центрирует на маленьких разрешениях, при этом заполняет экран полностью
* IE 9: Работает

Только CSS. Вариант №2

Есть еще один довольно простой способ решить нашу задачу: использовать изображение на нашей страницу, задать ему фиксированную позицию в верхний левый угол и зададим min-height и min-width 100%, сохраняя соотношение сторон.

200?’200px’:»+(this.scrollHeight+5)+’px’);»> #bg <
position:fixed;
top:0;
left:0;

/* Preserve aspet ratio */
min-width:100%;
min-height:100%;
>

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

Работает этот вариант в:

* Safari / Chrome / Firefox (предположительно не все старые версии)
* IE 8+
* Opera (все версии) и IE оба неправильно понимают этот код (неправильное позиционирование, не понятно почему)

Вариант с ипользованием jQuery

Идея смотрится проще, чем реализация на CSS, если учесть, что мы знаем что соотношение сторон изображения больше или меньше соотношения сторон окна браузера. Если изображение меньше, то нам достаточно установить ширину в 100% у изображения и мы будем знать, что оно заполнит экран полностью. Соответственно, если изображение больше, то нам достаточно будет установить высоту в 100% чтобы заполнить экран изображением. Мы будем использовать JavaScript, а точнее библиотеку jQuery.

Растянуть background на весь экран с помощью css, jquery, php

Давайте определим, что именно мы хотим получить:

Полная заливка окна картинкой, без пробелов.

Растягивание фоновой картинки, насколько это нужно.

Соответствие пропорций картинки.

Картинка должна находиться в центре.

Это должно быть максимально кроссбраузерно.

И без всяких махинаций с flash.

CSS3 метод

Мы можем растянуть background на чистом css, благодаря свойству background-size которое присутствует в CSS3. Мы будем использовать html элемент, это лучше чем body, так как он всегда будет равен высоте окна браузера. Мы сделаем background фиксированным и поставим его в центре окна, после этого мы его растянем на весь экран с помощью свойства background-size.

Кроссбраузерность:

Opera 10+ (Opera 9.5 поддерживает background-size но не поддерживает ключевых слов)

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

Растянуть background на чистом CSS

Сделать background на весь экран с помощью чистого CSS кода, можно двумя методами. Не исключение что существуют и другие.

1 – Метод

Здесь мы будем использовать элемент img, который будет растянут на все окно, и будет выглядеть одинаково во всех браузерах. Мы установим min-height, который будет заполнять окно браузера по вертикали. Также установим width на 100%, который будет заполнять окно по горизонтали. Мы также установим min-width картинки, таким образом, фон никогда не будет меньше, нежели мы установим.

Особо хитрая часть кода, это использование медиа запроса, для предотвращения бага, когда окно браузера будет меньше, нежели картинка фона. А также, комбинированное использование отступа с процентным left. Это позволяет держать background в центре, несмотря ни на что.

Кроссбраузерность:

Любые версии популярных браузеров: Safari / Chrome / Opera / Firefox

IE 6: По крайней мере background остается фиксированным

IE 7/8: Множество работ не центрируются на малых размерах, но заполняет экран лучшим образом

2 – Метод

Еще один простой способ реализовать это, вставить картинку на страницу. Она будет иметь фиксированную позицию и будет размещена в верхнем левом углу. Мы присвоим ей min- w >height 100%. Также нужно заранее подготовить картинку, в плане пропорциональности сторон.

Хотя, этот код не центрирует background image. Поэтому, сейчас мы это исправим… Мы можем фиксировать картинку с помощью взятия ее в div.

Кроссбраузерность:

Safari / Chrome / Firefox (не тестировалось на более древних версиях)

Opera (любые версии) и IE отображают одинаково (плохо позиционируют, не пойму почему)

Растянуть background с помощью jQuery

Эта идея появилась немного ранее (как альтернатива CSS методу). Если мы будем знать пропорции и размер картинки, мы сможем растянуть background на CSS. Если картинка меньше окна браузера, мы изменим width на 100% для картинки. Если больше, мы можем установить только height 100% и знать, что картинка заполнит все как по ширине, так и по высоте.

Мы можем получить доступ к нужным данным с помощью JavaScript. Как и все, я использую фреймверк jQuery.

Здесь не реализовано центрирование, но вы с легкостью можете сделать это.

Кроссбраузерность:

И все другие популярные браузеры

Растягиваем background с помощью PHP

Собственно, PHP мы можем использовать для одной цели: обработки изображения с помощью GD библиотеки. Ранее я рассказывал о том, как сделать скрипт превью картинок. В этом случае его можно использовать для изменения размера изображения на лету. Но возникает проблема, изображение будет генерироваться при каждом обращении к сайту. Для большого проекта это слишком ресурсоемко. Лучше будет сделать готовые заготовки изображений, соответственно самым популярным разрешениям экранов (1024 x 1280, 1280 x 800…), используя фотошоп это не сложно. В случае, если разрешение экрана будет другим, это единичные случаи, мы подключим скрипт автоматического изменения размера. Он подключается следующим образом:

Наслаждайтесь!

Это все известные мне способы, как растянуть background на весь экран. Если вы делаете это иначе, будьте добры опишите это в комментариях. Буду рад узнать о новых вариантах растягивания background с помощью css и других техник. Творческих вам успехов!

Растянуть изображение css – Как растянуть фон на всю ширину окна?

Поиск
Рубрики

Растянуть фон изображение на всю ширину CSS

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

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

Плюс в том, что все можно не сложно осуществить при помощи свойство background-size, которое будет изначально задавать размер фона. Здесь указываем только одно значение, которое идет в соответствие ширине графического файла. А вот высота будет уже автоматически подгоняться. Но это не все, так как можно выставить сразу два значения, что изначально будет определять ширину и высоту. В нашем методе растягиваем фон на всю ширину, и по этому нужно указать свойство ширины 100%.

Приступаем к установке:

body <
background: url(http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/PX-bVQlPQC2Aj8wJZVXYKg.jpg) no-repeat;
background-size:100%;
>

Как видим, все не так сложно, как изначально казалась, но все же есть некоторые нюансы, которые нужно знать.

Так будет смотреться в браузере:

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

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

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

Как растянуть фон CSS — HTMLer.ru

Привет. Сегодня рассмотрим, как можно растянуть фон css средствами (без вмешательства других средств, таких как javascript и иже с ними).

Растянуть фон CSS средствами стало возможно с появлением CSS3, конкретно при помощи свойства background-size. Надо сказать, что это свойство работает намного лучше, чем аналогичные решения на Javascript (которые использовались до появления background-size), так как быстрее и адекватнее реагирует на изменение размера браузера, быстрее сглаживает растянутую картинку, и, как любили говорить в начале 2000-х, — «Будет работать даже с отключенным Javascript».

Решение: как растянуть фон CSS средствами

У свойства background-size может быть несколько значений.
1) это может быть одна из дирректив: cover или contain.


2) это могут быть проценты (100% или 94% от ширины контейнера). При этом можно использовать как 1 значение в процентах, так и 2. Если значений будет 2, то масштабироваться будут одновременно и высота и ширина картинки, при этом каждая из величин подгоняется пропорционально процентами указанными в параметрах).

3) прямо численное значение (в пискелях, сантиметрах, em и т.д.). Параметров также может быть 2 (или 1), как и в предыдущем случае.
4) значение auto. Обозначает, что картинка не будет растягиваться, а будет использован исходный размер. При этом, параметров также может быть 2 или 1. То есть можно указать следующее:

Где будет работать решение растянуть фон CSS?

Судя по данным сайта Can I Use, работать будет во всех современных браузерах, включа IE версии не ниже 9. Так, что переживать в принципе повода нет. Смотрите таблицу совместимости:

Также рекомендуем:

Растянуть background на всю ширину с помощью CSS

Здесь как можно подробнее разберем. как можно реализовать фон (background) интернет ресурса, что должен покрывать все рабочее пространство. Основном все делается на CSS3, также можно подключить jQuery и даже PHP, но рассмотрим один вариант, который на чистом CSS. Для начало нужно понять или определить, что должно получится. Это безусловно, полноценная заливка окна фоном или изображением, чтоб не было не каких пробелов.

Цукерберг рекомендует:  Тестирование веб-приложений - Помогите с нагрузочным тестированием skype бота, на python.

Где будем растягивать картинку, так чтоб она смотрелось корректно, так как если идет фон под одним оттенком цвета, с ним легче работать. Не забываем про соответствие картинка на ее пропорций. И обязательно должно получится, что изображение установилось по центру. Что главное, все должно быть максимально кроссбраузерно и понятное дело, без различных махинаций с flash.

Метод CSS3 background

Это метод самый распространенный, что может растянуть background на чистом CSS, и все благодаря одному свойству, под названием background-size, что только будет присутствовать в CSS3.

Здесь изначально создадим background фиксированным и выставим его по центру, что останется его только растянуть, где подключаем свойства background-size, это все идет под ссылку на фон.

В общим ориентируемся с блоком которому присваиваем стили и дописываем в файле стилей этому блоку, следующий код:

body <
background: url(http://zornet.ru/Aben/ABGDA/artunsa.png) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
>

Как можно заметить, что параметр background, где изначально добавляем путь на картину, где происходит установка положение изображение в соответствие окна экрана. Если разбирать, то значение center и top отвечает за центр и прижатие по всем сторонам, чтоб не было пробелов. Чтоб понятно было, то значение fixed — отвечает за функцию фиксаций.

Метод совсем обычный, что применяю постоянно и он меня устраивает на все 100% процентов.

Еще один способ:

Еще один обычный метод воплотить наверное, вставить картину на страницу. Она станет обладать фиксированную позицию и будет размещена в верхнем левом углу. Мы присвоим ей min-width и min-height 100%. Еще необходимо заблаговременно приготовить картину, в намерении пропорциональности сторон.

#zornet_ru <
position:fixed;
top:0;
left:0;
min-width:100%;
min-height:100%;
>

Здесь как можно заметить, что этот код не центрирует background image, что можно быстро все сделать как нужно, а точнее фиксировать изображение с помощью взятия ее в div.

#zornet_ru <
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
>
#zornet_ru img <
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
>

На этом все, здесь представлены не все способы, а те, которые больше пременяют.

Также небольшое видео, где все понятно объясняют по как при помощи CSS растянуть фон на весь экран.

PS — если у вас есть свои наработки, хотя здесь должно все одинаково быть. то плиз в комментариях поделитесь с ними.

Как растянуть фоновое изображение, чтобы заполнить веб-страницу

Изображения – важная часть привлекательного дизайна сайта. Фоновые изображения могут прибавить визуального интереса странице. background image HTML поможет получить тот визуальный дизайн, который вы ищете.

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

Лучший способ растянуть изображение — это использовать свойство CSS3 «background-size». Вот пример, который использует фоновое изображение для body страницы, и устанавливает размер в «100%«. Поэтому рисунок всегда растянется и заполнит весь экран.

Это свойство работает в IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ и во всех популярных мобильных браузерах.

Маловероятно, что понадобится обеспечивать поддержку HTML body background image браузерам старше IE9. Но предположим, что вас беспокоит, будет ли сайт корректно отображаться в IE8. В этом случае нужно имитировать растянутый фон. Можно использовать префиксы браузеров для Firefox 3.6 (-moz-background-size) и Opera 10.0 (-o-background-size).

Самый легкий способ имитировать растянутое фоновое изображение — это растянуть его по всей странице. Тогда не останется лишнего пространства, и не нужно будет волноваться, что текст не поместится в растянутую область. Вот как можно HTML background image растянуть:

  1. Добавьте изображение для фона как первый элемент веб-страницы, и назначьте ему id равное «bg»:
  1. Расположите фоновое изображение так, чтобы оно было зафиксировано сверху и слева, было 100% в ширину и 100% в высоту.
    Добавьте приведенный ниже код в таблицу стилей:
  1. Поместите все содержимое страницы внутрь элемента DIV с id «content». Добавьте DIV под изображением:

Примечание: сейчас пришло время взглянуть на страницу. Изображение должно выглядеть растянутым, но содержимое пропало. Почему? Фоновое изображение 100% в высоту, а раздел содержимого располагается в потоке документа после изображения – большинство браузеров не отобразят его.

  1. Задайте содержимому относительное позиционирование и задайте z-index, равный 1. Это поднимет его над фоновым изображением в браузерах. Добавьте приведенный ниже код в таблицу стилей:
  1. Свойство HTML CSS background image в Internet Explorer 6 несовместимо с современными стандартами. Есть много способов спрятать CSS от любого браузера, кроме IE6, но самое это использовать условные комментарии.
  2. Обязательно проверьте это в IE 7 и IE 8. Возможно, понадобится откорректировать комментарии.

Немногим сайтам необходимо поддерживать IE 7 или 8, а IE6 – еще меньше! Как таковой, этот подход устарел. Я оставляю это как любопытный пример того, насколько было трудно до того, как все браузеры стали работать сообща!

Можно применить похожую технику, чтобы имитировать растянутое фоновое изображение на HTML div background image или другом элементе веб-страницы. Это сложнее, так как нужно либо использовать абсолютное позиционирование.

  1. Разместите на странице изображение, которое будет использовано как фон.
  2. В таблице стилей установите ширину и высоту изображения. Заметьте, что можно подставить проценты, но мне легче использовать значения длины.
  1. Поместите содержимое в div с id «content», как мы делали раньше.
  2. Задайте div с содержимым ширину и высоту, соответствующую размерам фонового изображения:
  1. После этого разместите содержимое на той же высоте, что и фоновое изображение. Не забудьте добавить для содержимого z-index, равный 1.

Свойства background-size и background image HTML широко поддерживаются браузерами, и этот подход, скорее всего, можно расценивать как продукт прошедшей эпохи. Если вы захотите использовать такой подход, обязательно проверьте его в как можно большем количестве браузеров. И если содержимое поменяет размер, нужно будет изменить размеры контейнера и фонового изображения.

Данная публикация представляет собой перевод статьи «How to Stretch a Background Image to Fit a Web Page» , подготовленной дружной командой проекта Интернет-технологии.ру

Изображение на всю ширину макета

Известно, что ширина окна браузера варьируется в довольно широких пределах,
поэтому подгадать под нее не представляется возможным. Установить рисунок на
всю ширину можно лишь в том случае, когда применяется фиксированный макет. Ширина
при этом четко задана, и сделать рисунок требуемого размера достаточно просто.
Следует уточнить, что речь здесь идет не о ширине веб-страницы как таковой,
а лишь о ширине макета, в который вписывается вся информация. Например, на сайте
boeing.com применяется именно такой подход (рис. 1) и суммарная ширина изображений
не превышает заданную величину.

Рис. 1. Главная страница сайта boeing.com

При «резиновом» макете, когда требуется установить изображение на всю ширину
окна браузера, независимо от его размера, применяют методы, которые подробно
описаны далее.

Растягивание рисунка до 100%

Первый метод состоит в том, что для тега
значение атрибута width устанавливается равным
100% (пример 1). Изображение в таком случае растягивается на всю ширину
контейнера, а его высота остается неизменной. Понятно, что в рисунке при этом
неизбежно появятся искажения, поэтому подобный метод применяется достаточно
редко и далеко не для всех картинок.

Пример 1. Ширина изображения

В данном примере ширина (width) рисунка задана
как 100%, а высота (height) — 100 пикселов.

Использование бесшовного фонового изображения

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

Рис. 2. Изображения для создания фона

Ширину рисунка достаточно сделать 20–30 пикселов.

Остерегайтесь делать слишком малую ширину подобной картинки, вроде
1–2 пикселов, поскольку это принесет только вред. Объем файла уменьшится незначительно,
а браузеру потребуется достаточно времени, чтобы полностью «замостить» нужную
площадь.

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

Рис. 3. Картинка для наложения на фон

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

Пример 2. Фоновая картинка

В данном примере высота блока задается с помощью свойства height,
она совпадает с высотой рисунка, а его ширина по умолчанию равна auto,
иными словами, занимает всю доступную ширину. Повторение фона происходит только
по горизонтали, это обеспечивает значение repeat-x свойства background.

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

Рис. 4. Изображение с градиентом для размещения на цветном фоне

Графические файлы в формате JPEG не всегда подходят для наложения на цветной
фон из-за того, что этот формат вносит искажения в рисунок. За счет этого, гладкого
перехода от изображения к фону может не получиться, поскольку будет виден заметный
стык. В этом случае лучше применять формат GIF или PNG.

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

Цукерберг рекомендует:  Блочное программирование для новичков

Пример 3. Цвет фона

В данном примере устанавливаем параметры блока — его высоту и цвет, а
также характеристики текста заголовка. Полученный результат продемонстрирован
на рис. 5.

Рис. 5. Совмещение цвета фона и рисунка

Фоновый рисунок большой ширины

Предыдущий способ, хотя и применяется достаточно часто и дает вполне подходящий
результат, все же не устанавливает один рисунок на всю ширину макета. Для достижения
этой цели применяют следующий алгоритм. Вначале подготавливается изображение
достаточно большой ширины (от 1000–1200 пикселов), после чего оно ставится как
фоновый рисунок для определенного слоя.

Большая ширина рисунка обеспечивает просмотр фактически при любом разрешении
монитора, кроме, разве что, самого фантастического и редко используемого. Если
такой рисунок просто добавить через тег ,
то однозначно получим горизонтальную полосу прокрутки и расползающийся по всем
швам макет страницы. Использование изображения как фона и обеспечивает отсутствие
ненужной полосы прокрутки. При этом картинка будет занимать всю ширину макета,
но ее часть будет скрыта от глаз пользователя, и появляться только при увеличении
окна браузера. На рис. 6 показан такой фоновый рисунок. Видно, что часть изображения
не помещается в окне, но оставшийся фрагмент занимает всю доступную ширину.

Рис. 6. Фоновый рисунок в окне браузера

Применяется опять же
свойство background, в качестве его значения задается путь к фоновой
картинке и ее параметры. Так, значение right top
говорит, что правый край изображения будет фиксироваться, а при изменении ширины
окна браузера станет появляться левая невидимая часть картинки. Если это значение убрать, то по умолчанию будет фиксироваться левый край (пример 4).

Пример 4. Рисунок на всю ширину страницы

При использовании фонового рисунка следует учитывать свойственные этому методу
ограничения. А именно:

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

Резюме

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

css — Растяните и масштабируйте изображение CSS в фоновом режиме — только с CSS

Я согласен с изображением в абсолютном div со 100% шириной и высотой. Убедитесь, что вы устанавливаете 100% ширину и высоту тела в CSS и устанавливаете поля и отступы на ноль. Другая проблема, которую вы найдете с помощью этого метода, заключается в том, что при выборе текста область выделения иногда может включать фоновое изображение, которое имеет неудачный эффект, когда полная страница имеет выбранное состояние. Вы можете обойти это, используя правило CSS user-select:none , например:

И снова Internet Explorer — плохой парень, потому что он не распознает параметр выбора пользователя — даже Internet Explorer 10 preview поддерживает его, поэтому у вас есть возможность использовать JavaScript для предотвращения выбора фонового изображения (например, http://www.felgall.com/jstip35.htm) или используя CSS 3 background-stretch method.

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

Myke Black 06 июля ’11 в 13:382011-07-06 13:38

Drupal 7 — Как растянуть картинку на весь экран CSS HTML

Решил заморочится по поводу позиционирования картинок, как растянуть изображение на всю ширину экрана, как задать оригинальный размер, как обозначить позиционирование в блоке, и еще что-то для себя и для вас сегодня напишу здесь. Не то что-бы я не знаю, но постоянно забываю. И каждый раз приходится рыскать по всем местам по новой. Готовы? Ready Go!

Как растянут картинку на весь экран CSS HTML ?

Самый простой способ растянуть широкую картинку на весь экран такой, задайте ширину картинке в свойствах = 100%.
Вот рабочий пример страницы с результатом:
http://gorecmagic.ru/user_files/music/take-five.html

А здесь посмотрите как прописаны ширина и высота и сделайте так же, ссылка на рабочий CSS файл страницы:
http://gorecmagic.ru/user_files/music/sandbox.css

Дальше буду расказывать о позиционировании относительно размеров, но судя по статистике посещений, никто дальше не читает =))

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

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

Позиционорование по центру сверху в место «left top» ставим «center top». Тестируйте сами, если я начну объяснять, то вы ничего не пойиете, смыс такой, что как бы вы не поставили картинку, она будет менять свое положение относительно ширины экрана. Вывод, если вы хотите точное позиционирование картинки на экране , прописываем стили для каждой ширины экрана. Это уже другая история. =) Блин, хотел коротко и по делу, да не выходит. Продолжаем.

Примеры: К слову сказано, Разрешение экрана iPad и iPad 2 одинаковое и равно: 1024 на 768, но разрешение окна браузера немного другое это 1024 на 620. Давайте посмотрим примеры. Имеем картинку размером 1500 на 1000, давайте посмотрим как она будет смотрется на ширине 1) — 1920 и 2) — 1024 при высоте блока 620px. и позиционировании «left top».

1) Ширина 1920px

2) Ширина 1024px

Как видите результаты разнятся, давайте посмотрим, что будет если мы увеличим высоту блока с 620px до 900px.

1) Ширина экрана — 1920px, высота блока 900px;

2) Ширина экрана 1024px высота блока 900px, пришлось уменьшить картинку до полной высоты, изображеная ширина и есть полная ширина на 1024px.

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

Надеюсь вы поняли мои рассказаы, до скорых встреч.

Растянуть фоновое изображение css?

Это мой CSS скрипт

Я хочу растянуть background-image всей ячейке

  • Сафари 3+
  • Хром Whatever+
  • IE 9+
  • Opera 10+ (Opera 9.5 поддерживает фоновый размер, но не ключевые слова)
  • Firefox 3. 6+ (Firefox 4 поддерживает версию с префиксом не от поставщика)

Кроме того, вы можете попробовать это для решения IE

Вы можете указать только ширину или высоту с помощью:

Который будет растягивать его на 100% ширины и на 50% высоты.

Вы не можете растянуть фоновое изображение (до CSS 3).

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

Я думаю, что вы ищете

Просто вставьте это в свою строку кодов:

Посмотрите другие вопросы по меткам html css background или Задайте вопрос

Растягивание бэкфона на всю страницу при помощи CSS

пример решения, используя CSS3:

  1. html <
  2. background : url ( images / bg . jpg ) no — repeat center center fixed ;
  3. — webkit — background — size : cover ;
  4. — moz — background — size : cover ;
  5. — o — background — size : cover ;
  6. background — size : cover ;
  7. >

Значение может быть следующим:

  • В единицах (px, cm, em и т.д.)
  • В процентах (задает размер картинки от высоты или ширины элемента)
  • auto (Если задано высота и ширина как auto auto, то размеры фона остаются исходными). Если указать например 250px auto, то размеры высчитаются исходя из пропорций картинки
  • cover (пропорциональное растягивание, при этом картинка растянется на весь блок)
  • contain (пропорциональное растягивание, при этом картинка растянется так, чтобы полностью вместиться в блок)

Как растянуть картинку на весь экран с помощью css и других проверенных способов

Доброго времени суток, гики сайтостроения и любители веб-тематики. Сегодня я хочу дать ответ на часто задаваемый вопрос не только новичками, но иногда и разработчиками: «Как растянуть картинку css на весь экран?» На самом деле такой прием очень просто реализовывается, но тут дело в другом.

На сегодняшний день существует множество способов и языков программирования, благодаря которым изображение может размещаться на целый экран. Поэтому в данной публикации я расскажу о нескольких способах создания полноразмерного фонового изображения при помощи css, css3, jquery и php. Приступим к делу!

Способ 1. Адаптивная фоновая картинка css-средствами

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

Для этого нужно всего лишь написат вот такую строку:

background- size: 100% auto

Первый параметр, т.е. 100%, отвечает за растягивание картинки по горизонтали, второй параметр – по вертикали. Теперь перейдем к примеру.

Планетарий на открытой местности!

Познайте далекие звезды, планеты и кратеры луны.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих