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


Оглавление (нажмите, чтобы открыть):

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

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

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

Метод CSS3 background

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

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

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

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

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

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

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

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

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

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

Нужно растянуть фон сайта на всю ширину и высоту

Весит мой фон 1,2 мб. У меня 2 вопроса:
Нормально ли это для фон? Если нет то как уменьшить вес картинки
И второй основной — как растянуть его на всю высоту и ширину.
Снизу мой вариант, но это не то. Возможно из-за того что я прижимаю футер к низу экрана

13.05.2014, 00:27

Фон div’a на всю ширину, но не высоту экрана + подвал
Здравствуйте! Я совсем еще начинающий, так что если вопрос очень уж глупый — тапками прошу не.

Как растянуть div на всю ширину сайта?
Можете ли вы мне подсказать как растянуть div на всю ширину сайта, width: 100% пробовал, див.

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

Растянуть таблицу во всю высоту
С шириной ок, а вот с высотой беда. Как заставить таблицу растянуться во всю высоту окна.

Растянуть DIV на всю высоту
Доброго времени суток. Помогите пожайлуста. Никак не могу найти решения. Прижал футер к низу.

13.05.2014, 02:51 2 13.05.2014, 03:14 3

Уместный ли такой фон в верстке сказать сложно, т.к. не известно для чего это. Такое практиковать в основном не желательно. Если уж так нужен такой фон то уменьшить размер изображения возможно графическим редактором (например adobePhotoshop), но в потерю качества самого изображения, хотя это может быть и не заметно.
Уменьшить еще можно, даже очень не плохо, используя части изображений. Например, если у Вас в центре страницы будет блок с другим фоном и.т.д. то можно как минимум вырезать точно не используемые участки изображения или применять к отдельному блоку DIV свое соответствующие изображение. т.е. левый блок то то. правый то то. шапку например можно сделать css градиентом+кусок горы.

Если же размещать изображение целиком как фон то, считаю, лучше реализовать это в 2 блока, с postition:absolute;
Так тогда можно будет разместить 1 блок полностью на весь экран, а второй поставить верх него, полностью не зависимым.

13.05.2014, 14:47 [ТС] 4

Изображение тогда уменьшим, а метод ваш не помог

Сайт просто тематический (туризм в горах и т.п) вот и решил сделать такой фон. А по методу он тоже не работает, потому что он расстягивает фон на ширину и высоту ЭКРАНА, т.е. если сайт будет скролиться, то фон начнет повторяться.

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

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

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

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

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

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

Как сделать фон сайта картинкой HTML

В прошлой статье мы говорили о том, как изменить цвет фона на сайте с помощью атрибутов тега body и CSS-стилей: Фон в HTML. В текущей статье речь пойдет об использовании изображений в качестве фона на сайте, о том как растянуть фон на всю ширину страницы и зафиксировать его.


Картинка в качестве фона страницы — HTML

Рассмотрим сначала способ задания фонового изображения на сайте с помощью атрибута background тега body:

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

Примечание: Фоновое изображение и цвет фона рекомендуется задавать не с помощью HTML, а с помощью CSS. В таком случае код будет валидным и более правильным.

Картинка в качестве фона страницы — CSS

В CSS фоновый цвет и фоновое изображение можно задать одним свойством background:

Мастер Йода рекомендует:  Xen — всё по этой теме для программистов

Здесь с помощью свойства background-attachment фиксируется фон страницы, а с помощью свойства background-repeat устанавливается повторение изображения по горизонтали. Но стоит учесть, что фоновое изображение должно хорошо «сшиваться» по краям.

Если вы хотите растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%;

В конструкторе сайтов «Нубекс» для любого сайта можно использовать большое изображение в качестве фона и закрепить его.

Background-size: масштабирование фонового рисунка

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

Значения background-size

Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).

Ключевые слова

auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:

…то размеры фона останутся оригинальными. Если значение auto задано лишь для одной из сторон, то размер фона будет автоматически подогнан под пропорции изображения. Например, если записать следующее:

…то высота фоновой картинки будет вычисляться автоматически.

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

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

Числовые значения

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

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:

Учтите, что изображение может исказиться, если вы не попадете в его пропорции:

Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto :

Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически

Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

Поддержка браузерами

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.

Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.

Как растянуть изображение

Обнаружил данный урок на одном канале youtube. Очень полезная фишка для веб-дизайнера на мой взгляд.

Иногда ширины оригинального изображения недостаточно для какой-либо дизайнерской задумки, а его растягивание по ширине искажает нужные объекты. Чтобы сохранить эти объекты в целости и при этом растянуть фон изображения, PhotoShop предоставляет нам определенные инструменты. И так, в конечном итоге у нас из оригинального изображения:

  • Должно получиться вот что:
  • Приступим. Открываем наше изображение в PhotoShop и выделяем необходимый нам объект:
  • Далее переходим на вкладку Выделение >> Сохранить выделенную область

  • И задаем какое-нибудь произвольное имя для данного выделения:
  • Таким образом, мы создали область, которая в последствии будет защищена от изменений. Следующим шагом переходим в Редактирование >> Масштаб с учетом содержимого:
  • И обязательно указываем защищаемый объект:

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

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

Как растянуть изображение в Фотошопе? – Templatemonster | Вопросы и ответы. Все о дизайне и создании сайтов

Взгляните на фотографию ниже. Вы видите что-то странное? Не стоит переживать, если не увидели! Просто на фото все идеально! Это благодаря мощному инструменту Adobe Photoshop, который называется Content-Aware Scale.

Из статьи вы узнаете:

Важно! Нужно уметь работать с Фотошоп, если планируете использовать psd шаблоны сайтов.

Content-Aware Scale позволяет масштабировать фотографии в Photoshop без потери качества, искажения изображения людей, зданий, животных и т.д.

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

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

Как изменить размер картинки в Фотошопе?

Чтоб понять, как увеличить картинку в Фотошопе, возьмем за основу уже знакомый исходник:

Если внимательно посмотреть на оба изображения, то заметно, что бокал, изначально, не был в центре и фотография меньше по масштабу. Как растянуть картинку в Фотошопе и отцентровать напиток на фотографии?

Большинство пользователей, в такой ситуации, решили бы обрезать фотографию и растянуть ее, чтоб отцентровать напиток. Но, если вы не хотите резать изображение и терять качество, то на помощь приходит Content-Aware Scale.

С чего начать?

Чтоб начать работу с фотографией, откройте ее в Photoshop, а затем выберите инструмент Crop Tool в левой вертикальной панели инструментов. На сегодняшний день, это пятый по счету инструмент сверху. Вы можете либо выбрать его на панели инструментов, либо просто нажать C на клавиатуре.

Затем, с помощью этого инструмента, выделите саму фотографию, чтоб она выглядела таким образом:

После этого нажимаете Image на панели настроек, далее Crop, который находится в верхней части рабочей области, и выберите Crop Tool. Щелкните мышкой внутри изображения и перетащите курсор влево, пока напиток не будет отцентрирован на фотографии.

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

Выбор части изображения

Следующий шаг — выбрать часть фотографии, которая похожа на пустующую область. Это легко выполнимо с помощью инструмента Rectangular Marquee Tool.

Инструмент Content-Aware Scale

На данном этапе и начинается настоящее волшебство. Теперь, когда есть выбранная область, нужно перейти Edit > Content-Aware Scale.

Далее необходимо выбрать функцию Free Transform. Нажмите на центрально-правое разделение и перетащить его вправо, чтоб оно совпадало с краем фотографии. И вот, изображение приобретает новый вид. Ответ на вопрос: “Как изменить размер картинки в Фотошопе?” — найден!

Осталось только нажать Enter на клавиатуре и сохранить изменения, а затем в главном меню (сверху) выбрать Select > Deselect menu item, чтоб удалить пунктирное выделение.

Согласитесь, результат выглядит неплохо!? Глядя на фотографию, трудно представить, что она редактировалась с помощью Photoshop.

Теперь вы знаете, как растянуть изображение в Фотошопе так, чтоб не потерять качество.

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

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

Давайте для примера добавим на один черновой сайт (wordpress) фото обложку. Открываем любую запись или страницу, загружаем туда уже подготовленную фото обложку для сайта, переходим на вкладку “Текст”, копируем код который мы будем вставлять в файл header.php.

Вставляем код фото обложки перед закрывающимся тегом head. Обратите внимание как по умолчанию указаны размеры изображения, они конкретные.

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

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


Чтобы убедиться в том что обложка не будет адаптироваться на больших экранах, заходим на сайт сервиса “quirKtools”, в инструмент “Screenfly”. Вводим в поле адрес нашего сайта, жмём кнопку GO. Вверху страницы выбираем самый большой размер экрана и видим, что обложка не растягивается, то есть не масштабируется, так как в коде указаны конкретные размеры.

Адаптивное изображение на любом экране

Чтобы сделать изображение адаптивным и масштабируемым, чтобы оно адаптировалось под любой размер экрана, нужно внести в код одно простое изменение. В коде изображения обложки, убираем обозначение высоты (height), а для ширины указываем значение – “100%” (смотри скриншот). Сохраняем код.

Мастер Йода рекомендует:  Как копировать файлы в Java

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

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

Вот как выглядит размер любого адаптивного изображения:

Всё просто ! Главное разобраться.

Масштабируем картинку в Фотошопе

Сегодня мы поговорим о том, как растянуть картинку в Фотошопе путем масштабирования.

Скачать последнюю версию Photoshop

  • В том случае, если требуется изменить не размер, а разрешение изображения, то рекомендуем изучить вот этот материал:
  • Урок: Меняем разрешение изображения в Фотошопе
  • Для начала поговорим о вариантах вызова функции «Масштабирование», при помощи которой мы и будем производить действия над изображением.

Первый вариант вызова функции – через меню программы. Необходимо перейти в меню «Редактирование» и навести курсор на пункт «Трансформирование». Там, в выпадающем контекстном меню и находится нужная нам функция.

После активирования функции на изображении должна появиться рамка с маркерами по углам и серединам сторон.

Потянув за эти маркеры, можно трансформировать картинку.

Второй вариант вызова функции «Масштабирование» является использование горячих клавиш CTRL+T. Эта комбинация позволяет не только масштабировать, но и вращать изображение, и трансформировать его. Строго говоря, функция называется не «Масштабирование», а «Свободное трансформирование».

Со способами вызова функции мы разобрались, теперь попрактикуемся.

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

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

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

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

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

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

Растягивание (масштабирование) объектов это тот навык, без которого Вам не стать настоящим мастером Фотошопа, поэтому тренируйтесь и удачи!

Мы рады, что смогли помочь Вам в решении проблемы. Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

Растянуть фото пример, программы

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

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

  • Для растягивания фото будем использовать две программы:
  • 1. Paint
  • 2. Photoshop

Растягиваем фото в Paint

Программу &Paint скачивать не нужно, она в виндовс идет вместе с ОСью

Не устаю повторять, что возможности Paint недооценены! И нам понадобится эта маленькая программка. Запустим её. Откроем в ней любое фото..

Нажимаем «ctrl + a» – либо «выделить» и у вас появится кайма вокруг фото! Ну и как говорится дело в шляпе! Отсеется потянуть мышкой за эту кайму вправо, либо вниз, либо и вправо и вниз одновременно взяв за кайму в углу.

К сожалению растянуть фото влево таким образом не получится, потому, что в программе Paint сделать нельзя!

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


Заходим в повернуть – отразить по горизонтали – теперь вы можете потянуть за правую сторону и фото растянется влево… естественно, что после растягивания нужно повернуть фото еще раз по горизонтали!

Как растянуть фото в Фотошопе?

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

Идем – «редактирования –трансформирование – масштабирование.

И далее появится канва, как и в программе Paint потянув мышкой за которую фото растянется в том направлении куда вы потяните…

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

Это просто срывает башню! Как такое возможно….

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

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

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

Способ №1

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

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

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

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

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

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

body <
background: url(bgimage.jpg) no-repeat;
background-size: 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% в высоту.
    Добавьте приведенный ниже код в таблицу стилей:

img#bg <
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;>

  1. Поместите все содержимое страницы внутрь элемента DIV с id «content». Добавьте DIV под изображением:

All your content here – including headers, paragraphs, etc.

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

  1. Задайте содержимому относительное позиционирование и задайте z-index, равный 1. Это поднимет его над фоновым изображением в браузерах. Добавьте приведенный ниже код в таблицу стилей:

#content <
position: relative;
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. В таблице стилей установите ширину и высоту изображения. Заметьте, что можно подставить проценты, но мне легче использовать значения длины.
Мастер Йода рекомендует:  Как защититься от DDoS атак

img#bg <
width: 20em;
height: 30em;>

  1. Поместите содержимое в div с id «content», как мы делали раньше.
  2. Задайте div с содержимым ширину и высоту, соответствующую размерам фонового изображения:

div#content <
width: 20em;
height: 30em;>

  1. После этого разместите содержимое на той же высоте, что и фоновое изображение. Не забудьте добавить для содержимого z-index, равный 1.

#content <
position: relative;
top: -30em;
z-index: 1;
width: 20em;
height: 30em;>

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

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

Как растянуть фон по ширине экрана background-size: cover?

Растягиваю фон по ширине экрана, прописал стили :

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

  • Вопрос задан более трёх лет назад
  • 27253 просмотра

Стили позиционирования убрали, но на разрешении 1920×1080 как-то слишком все увеличивается, что не влазит в экран. При в принципе таком скромном количестве отображаемого материала, хорошо бы уместить все в один экран, без прокрутки.

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

То есть просто прописать:

А для остального задать центрирование и разумное увеличение, через @media

Адаптивное целое фоновое изображение с помощью CSS

Дата публикации: 2014-07-31

От автора: В этой обучающей статье мы рассмотрим простую технику создания фонового изображения, которое будет полностью растягиваться на всю ширину окна просмотра (viewport) браузера. Для этого нам понадобится CSS-свойство background-size; JavaScript не нужен.

Примеры адаптивных целых фоновых изображений

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Базовые принципы

Вот наш план действий.

Используйте свойство background-size, чтобы полностью заполнить окно просмотра

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


Используйте медиа-запрос для обработки небольших фоновых изображений для мобильных устройств

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

Изображение, которое я использовал в демо-примере, имеет разрешение 5500x3600px. Этого разрешения хватит для большинства широкоформатных компьютерных мониторов, имеющихся в настоящее время в продаже. Но ради этого придется обрабатывать файл размером 1.7MB.

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

Растянуть 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 и других техник. Творческих вам успехов!

Как растянуть фоновое изображение до заполнения div

Я хочу добавить обложку на свой веб-сайт. У меня есть тег div в верхней части страницы. Я установил ширину тега div на 80% и высоту на авто. Я хочу добавить изображение в качестве фона этого div. Эта ширина изображения должна растягиваться в соответствии с шириной div. Высота изображения должна автоматически изменяться в соответствии с новой шириной (растянутая ширина).

почему бы вам просто не использовать шаблоны, а не калечить веб?

Вы можете использовать свойство background-size CSS3 .

CSS

HTML

Примечание. Я использовал только background-size , но вам, вероятно, потребуется включить все версии с префиксом поставщика, если вы хотите сделать его более гибким.

Добавить комментарий