Растянуть фон css: Как растянуть фон на всю ширину окна?

Как растянуть фон сайта на всю ширину моб. устройства? :: DLE FAQ

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

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


вопрос

Как растянуть фон сайта на всю ширину моб. устройств?

height: 200px;
    position: relative;
    width:100%;
    padding: 0;
    display: block;
    background: url("../images/bg.png") no-repeat top left;
    background-attachment: fixed;
    background-size:cover;

На телефоне фон не растянгивается на всю ширину и создаётся часть белого отступа. Как растянуть фон на всю ширину?

Ответа пока нет

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


  • События
  • Заказы
  • Модули
  • html#fullans-26509″ data-event-title=»Ответ на вопрос» data-event-i=»2″ data-event-status=»e_answer»>

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

    Decart
    Как изменить количество страниц в навигации в DLE 13.3?
    14-02-2023, 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=»7″ data-event-status=»e_answer»>

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

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


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

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

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

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

наверх

html — Растяжка фонового изображения на 100% по высоте Div

спросил

Изменено 7 лет, 6 месяцев назад

Просмотрено 61к раз

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

.container , чтобы фоновое изображение оставалось на 100% от div.

Я пробовал следующее, но это не сработало:

 .container { background: url('backgroundImage.jpg') 0 100% no-repeat; }
 

Пример структуры HTML:

 

Это короткий контейнер

<дел>

Это

высокий
контейнер

  • HTML
  • CSS

1

Вам необходимо установить свойство background-size . размер фона: 100% 100%; будет масштабировать его для заполнения контейнера как по горизонтали, так и по вертикали.

Обычно я предпочитаю background-size: cover; , поскольку он изящно масштабирует изображение по мере необходимости, сохраняя соотношение сторон.

Обязательно проверьте поддержку background-size, так как это довольно новое свойство.

1

В случае background-size: содержат; бесполезен, и если вы ищете фоновое изображение полной ВЫСОТЫ без потери соотношения сторон, используйте ниже написанный CSS

 background-size: auto 100%;
 

установка первого параметра на « auto » гарантирует, что ширина изображения будет пропорциональна текущей высоте. Второй параметр « 100% » поможет фоновому изображению адаптироваться к той же высоте, что и DIV.

2

Вы пробовали background-size: cover; ?

В вашем примере вы настраиваете background-position .

В css3 есть свойство background-size:cover; и размер фона: содержат;. Вы можете использовать

background-size:cover; в соответствии с вашими потребностями.

** содержат

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

 крышка
 

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

**

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

SVG Background stretch — Общие — Forum

samulir (Самули Р. )

1

Можно ли сделать фон раздела 100% ширины И высоты без обрезки? У меня есть векторное изображение, которое может растягиваться вместе с разделом.

Спасибо!

1 Нравится

Винсент (Венсан Бидо)

2

Да, не только с SVG, но и со всеми форматами.

http://vincent.polenordstudio.fr/snap/19dahww.jpg

1 Нравится

самулир (Самули Р.)

3

Эй, Винсент! Мне кажется, это не работает…

482674×1160 284 КБ

1 Нравится

Винсент (Венсан Бидо)

4

Плохо, вы правы, это не работает с SVG.

1 Нравится

(Джефф Селсер)

5

Эта статья достойна внимания.

1 Нравится

самулир (Самули Р. )

6

Спасибо!! посмотрю

1 Нравится

Винсент (Венсан Бидо)

7

Вот код, необходимый для сброса соотношения сторон.

 .stretched-logo-bg {
    background: url("../img/curve.svg#svgView(preserveAspectRatio(none))") по центру без повторения;
    размер фона: 100% 100%;
}
 

1 Нравится

самулир (Самули Р.)

8

Большое спасибо, Винсент!! Я попробую это!

янм (Элиас)

9

Привет,

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

Вы можете открыть свой SVG в текстовом редакторе (Sublime и т. д.) и жестко закодировать его прямо в свой SVG.

1. Первый шаг , Найти:
SVG

и изменение на
SVG

2. Второй шаг , добавьте атрибут Preserveaspectratio = «Нет» Сразу после ширины и высоты. %» saveAspectRatio=»none»

3. Третий шаг:
Сделайте свой SVG фоновым изображением с «обложкой»

Надеюсь на помощь

3 лайков

Вера (Вера)

10

Это золото. Большое спасибо!

Паскаль_Помаска (Паскаль Помаска)

11

Удивительная помощь! Большое спасибо

Мэгги (мэгги)

Оставить комментарий

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

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