Сделать адаптивным фоновую картинку

@Coolfreeze · Регистрация: 21.02.2016

Студворк — интернет-сервис помощи студентам

Всем хорошего времени суток! Друзья, на сайте http://oknoffsochi.ru/ во втором блоке, где диаграмма цены, поставил картинку фоном блока

PHP/HTML
1
2
3
4
5
6
7
8
9
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="diagram">
<hgroup>
<h2 class="editkontent">Наши окна
<span>дешевле средней цены в Большом Сочи</span>
</h2>
</hgroup>
</div>
</div>

прописал значение в стиле

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.diagram {
    background: url(/wp-content/themes/oknoffsochi/img/diagram.png) no-repeat;
    max-width: 555px;
    height: 400px;
}
 
.diagram h2 {
    padding-top: 30px;
    font-size: 65px;
    font-weight: bold;
    text-transform: uppercase;
    color: #7d7d7d;
    -webkit-transform: rotateZ(-21deg);
    -ms-transform: rotate(-21deg);
    transform: rotateZ(-21deg);
    font-style: italic;
    margin: 30px 0 0 67px;
}
 
.diagram h2 span {
    font-size: 17px;
    color: #115592;
    display: block;
}

но при просмотре на мобильных, появляется скрол вправо из за этой фоновой картинки, подскажите пожалуйста как решить эту проблему с её адаптивностью, Заранее благодарю!

@zuluss · 24.07.2017, 23:37

А чего вы решили что из за картинки?
Там и без нее хватает желающих вылезти за границы
1. вот этот и все аналогичные что ниже него

HTML5
1
2
3
4
<div class="lev-glav-block">
<p>Предоплата<br>50%</p>
<p><span class="number-plashka1">50%</span>
</p></div>

2. "НАШИ ОКНА" вылазит
3. блок

HTML5
1
2
3
4
5
6
7
8
9
<div class="diagram-info">
<h3 class="editkontent">
Цена ниже средней<br>
<span>при наилучшем<br>качестве</span><br>
</h3>
<p class="editkontent">
Мы провели мониторинг цен и установили цены на 12% ниже средней цены по городу
</p>
</div>

У вас указаны фиксированные размеры ширины которые больше 320 px.
Или пишите 100% ширину или через медиа запросы меняйте ширину на которую вам нужно
PS. почти все проблемы из за transform: rotate в этих блоках

Не по теме:

Не сдержался ))
С визуальным восприятием информации у посетителей будут проблемы.
"НАШИ ОКНА
ДЕШЕВЛЕ СРЕДНЕЙ ЦЕНЫ В БОЛЬШОМ СОЧИ"
1. у вас текст идет справа и вверх-это воспринимается как увеличение и повышение
2. график сам почему то идет от нуля и опять же вверх (я бы его вообще снес и написал текст горизонтально)

@Coolfreeze · 25.07.2017, 00:07 **[ТС]**

zuluss, Согласен с добавлением)) но это не моя инициатива) хотя я всё же прислушаюсь к вашему высказыванию и видоизменю вопреки заказчику

@zuluss · 25.07.2017, 00:25

Не по теме:

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

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207
	25.07.2017, 00:07 [ТС]
	zuluss, Согласен с добавлением)) но это не моя инициатива) хотя я всё же прислушаюсь к вашему высказыванию и видоизменю вопреки заказчику 0

@zuluss
	25.07.2017, 00:25
	Не по теме: Coolfreeze, ну зачем вопреки заказчику? Вы аргументируйте свою профессиональную точку зрения а он пускай уже сам думает, деньги его. PS. хотя.... смотря как он платит и воспринимает критику, если проблема и с тем и с другим то нафик себе нервы портить )) 0

Сделать адаптивным фоновую картинку

Решение