Как сделать фиксированный фон css: background-attachment | htmlbook.ru

Leave a Comment / Css / By /

Содержание

Как сделать фиксированный фон на моб. устройствах? :: DLE FAQ

Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как сделать фиксированный фон на моб. устройствах?

вопрос

Всем привет столкнулся с такой проблемой сделал фиксированный фон на сайте background fixed , проблема в следующем на пк и ноутбуке фон фиксируется,а на мобильном телефоне прокручивается вместе с основной страницей,а на мобильных устройствах iphone вообще нет катринки. Для айфонов создал отдельное css просто убрал значение fixed и картинка появилась.Подскажите как реализовать фиксированный фон для мобильных устройств и устройств iphone.Мои стили ниже.


header {    
overflow: hidden;
float: left;
width: 100%;
-moz-background-size: 100%;
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-size: cover!important;
position: relative;
background: url(.
 
 ./images/header-fon.jpg) fixed;
}
Ответа пока нет

Последние события

  • События
  • Заказы
  • Модули

  • Decart | Как изменить количество страниц в навига …

    Decart
    Как изменить количество страниц в навигации в DLE 13.3?
    Вчера, 17:27

    Сохраните как xml и добавьте плагин в админ.панели:

    <?xml version="1.0" encoding="utf-8"?>
<dleplugin>
	<name>Количество страниц</name>
	<description>Изменение показа количества страниц в навигации</description>
	<icon>engine/skins/images/default_icon.png</icon>
	<version>1.
      1</version>
	<dleversion>12</dleversion>
	<versioncompare>greater</versioncompare>
	<upgradeurl></upgradeurl>
	<filedelete>0</filedelete>
	<needplugin></needplugin>
	<mnotice>0</mnotice>
	<mysqlinstall><![CDATA[]]></mysqlinstall>
	<mysqlupgrade><![CDATA[]]></mysqlupgrade>
	<mysqlenable><![CDATA[]]></mysqlenable>
	<mysqldisable><![CDATA[]]></mysqldisable>
	<mysqldelete><![CDATA[]]></mysqldelete>
	<phpinstall><![CDATA[]]></phpinstall>
	<phpupgrade><![CDATA[]]></phpupgrade>
	<phpenable><![CDATA[]]></phpenable>
	<phpdisable><![CDATA[]]></phpdisable>
	<phpdelete><![CDATA[]]></phpdelete>
	<notice><![CDATA[]]></notice>
	<file name="engine/modules/show.short.php">
		<operation action="replace">
			<searchcode><![CDATA[$max_pages = 10;]]></searchcode>
			<replacecode><![CDATA[$max_pages = 5;]]></replacecode>
			<searchcount>1</searchcount>
			<enabled>1</enabled>
		</operation>
		<operation action="replace">
			<searchcode><![CDATA[$end = 10;]]></searchcode>
			<replacecode><![CDATA[$end = 5;]]></replacecode>
			<searchcount>1</searchcount>
			<enabled>1</enabled>
		</operation>
		<operation action="replace">
			<searchcode><![CDATA[if ($cstart > 6) {]]></searchcode>
			<replacecode><![CDATA[if( $cstart > 3) {]]></replacecode>
			<searchcount>1</searchcount>
			<enabled>1</enabled>
		</operation>
		<operation action="replace">
			<searchcode><![CDATA[$start = $cstart - 4;
$end = $start + 8;]]></searchcode>
			<replacecode><![CDATA[$start = $cstart - 2;
$end = $start + 4;]]></replacecode>
			<searchcount>1</searchcount>
			<enabled>1</enabled>
		</operation>
		<operation action="replace">
			<searchcode><![CDATA[$start = $enpages_count - 9;]]></searchcode>
			<replacecode><![CDATA[$start = $enpages_count - 5;]]></replacecode>
			<searchcount>1</searchcount>
			<enabled>1</enabled>
		</operation>
	</file>
</dleplugin>
  • html#fullans-28920″ data-event-title=»Ответ на вопрос» data-event-i=»6″ data-event-status=»e_answer»>

    Gvn | Не работают конструкции если значение с …

    Gvn
    Не работают конструкции если значение с символом ‘ Как решить этот баг?
    Вчера, 01:35

    {custom xfields=»[xfvalue_name]» template=»shortstory»}

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

    {custom tags=»[xfvalue_name]» template=»shortstory»}

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

наверх

Код фона, бэкграунд(как сделать фиксированный фон сайта)? — Вопрос от Santoz Santoz

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16526)
  • Платные услуги (2134)
  • Вопросы по uKit (82)

Контент-модули

  • Интернет-магазин (1433)
  • Редактор страниц (236)
  • Новости сайта (499)
  • Каталоги (808)
  • Блог (дневник) (112)
  • Объявления (295)
  • Фотоальбомы (433)
  • Видео (255)
  • Тесты (60)
  • Форум (578)

Продвижение сайта

  • Монетизация сайта (220)
  • Раскрутка сайта (2455)

Управление сайтом

  • Работа с аккаунтом (5327)
  • Поиск по сайту (426)
  • Меню сайта (1766)
  • Домен для сайта (1533)
  • Дизайн сайта (13472)
  • Безопасность сайта (1483)
  • Доп. функции (1308)

Доп. модули

  • SEO-модуль (225)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (433)
  • Почтовые формы (318)
  • Статистика сайта (198)
  • Соц. постинг (212)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (644)
  • PHP и API на uCoz (235)
  • SMS сервисы (10)
  • Вопросы по Narod. ru (429)
  • Софт для вебмастера (39)

…

HTML DOM Style backgroundAttachment Property

❮ Предыдущий ❮ Справочник по объектам стиля Далее ❯

Пример

Установить фоновое изображение, которое будет фиксированным (не будет прокручиваться):

document.body.style.backgroundAttachment = «fixed»;

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

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

См. также:

Стили HTML: Свойство фона

Учебник CSS: Фоны CSS

Справочник по CSS: Свойство CSS background-attachment

Синтаксис

Возвращает свойство объекта backgroundAttachment:

.3 .

backgroundAttachment

Установить свойство backgroundAttachment:

object .style.backgroundAttachment = «scroll|fixed|local|initial|inherit»

Значения свойств

Значение Описание
свиток Фон прокручивается вместе с элементом. Это по умолчанию
фиксированный Фон фиксирован относительно области просмотра
местный Фон прокручивается вместе с содержимым элемента
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Технические детали

Значение по умолчанию: свиток
Возвращаемое значение: Строка, представляющая, как фоновое изображение прикрепляется к объекту в документе
Версия CSS CSS1

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

backgroundAttachment — это функция CSS1 (1996).

Полностью поддерживается во всех браузерах:

Хром Край Фаерфокс Сафари Опера ИЭ
Да Да Да Да Да Да

Другие примеры

Пример

Выбор между прокруткой и локальным элементом DIV:

document. getElementById(«myDIV»).style.backgroundAttachment = «local»;

Попробуйте сами »

Пример

Переключение между прокруткой и фиксацией:

let x = document.body.style.backgroundAttachment;
document.body.style.backgroundAttachment = (x == «прокрутка»)? «исправлено»: «прокрутка»;

Попробуйте сами »

Пример

Вернуть значение свойства background-attachment:

let back = document.body.style.backgroundAttachment;

Попробуйте сами »

❮ Предыдущая ❮ Справочник по объектам стиля Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

9 Top0 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

20 CSS Fixed Backgrounds

Коллекция отобранных вручную примеров кода HTML и CSS с фиксированным фоном из Codepen, GitHub и других ресурсов. Обновление ноябрьской коллекции 2021 года. 9 новых предметов.

  1. Анимированные фоны CSS
  2. Шаблоны фона CSS
  3. Фон частиц CSS
  4. Треугольные фоны CSS
  5. Фоновые плагины jQuery
О коде

Фиксированный фоновый эффект (эффект прокрутки параллакса)

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Сетка с фиксированным фоном

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: font-awesome.css

О коде

CSS Фиксированный эффект прокрутки фона

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Исправлено фоновое вложение

Исправлен фон с прокручивающимся контентом.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Содержимое по центру, фиксированный фон

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

CSS Фиксированный фон Hero

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Прокрутка параллакса с фиксированным фоном только для CSS

Это настоящее кроссбраузерное решение для панелей с фиксированным фоном только на CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

background-attachment: исправлено;

Фон с свойством CSS background-attachment: исправлено;

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Эффект прокрутки фона

Чистый CSS эффект прокрутки фонового изображения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Фиксированное вложение фона

Добавление фона на чистом CSS исправлено в контейнере.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Накладка полутранс

Интересная полупрозрачная черная накладка с текстом появляется на главном экране при прокрутке.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Прокрутка фиксированного фона

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Прокрутка фона в CSS

Поездка в Сиэтл: прокрутка фона в CSS с background-attachment: исправлено;

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Развлечение с Unsplash.

it

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Фиксированные фоновые полные разделы

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Фиксированный фоновый эффект

Простой шаблон, в котором используется свойство CSS background-attachment для создания эффекта фиксированного фона.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: jquery.js

О коде

Scroll Magic In Plain CSS

Если колесо мыши вниз… прокрутите вправо.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Фиксированные фоны CSS

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *