Блоки наезжают на текст

@Wandersmann · Регистрация: 13.05.2019

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

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

HTML5

        <div class="about__images">
            <div class="image__dispatcher"></div>
            <div class="image__boxes"></div>
            <div class="image__drivers"></div>
        </div>

CSS

/*О нас*/
.about {
    height: 626px;
    padding: 0;
    margin: 0;
}
 
/*Изображения*/
.about__images {
    height: 693px;
    background-size: cover;
    padding: 0;
    margin: 0;
}
 
.image__dispatcher,
.image__boxes,
.image__drivers {
    height: 369px;
}
 
.image__dispatcher {
    background: url(/img/image_dispatcher.svg) no-repeat right;
    margin-top: -380px;
    margin-right: 150px;
    position: relative;
    z-index: 20;
}
 
.image__boxes {
    background: url(/img/image_boxes.svg) no-repeat right;
    margin-top: -212px;
    margin-right: 301px;
    position: relative;
    z-index: 10;
}
 
.image__drivers {
    background: url(/img/image_driver.svg) no-repeat right;
    margin-top: -200px;
    margin-right: 465px;
    position: relative;
    z-index: 5;
}
 
.h1__about {
    padding-top: 20px;
    font-size: 40px;
    font-weight: bold;
    line-height: 60px;
    letter-spacing: 2.5px;
}
 
.h2__about {
    margin-top: -20px;
    font-size: 29px;
    line-height: 43.5px;
    letter-spacing: 0.7px;
}

@AlexZaw · 14.08.2023, 11:55

Не по теме:

Сообщение от Wandersmann

Скрины приложить не могу по правилам форума.

А можете озвучить правило которое это запрещает? Ибо в правилах есть пункт 4.11 который гласит как раз обратное: "Картинки и любые другие файлы загружайте на форум, во избежание их удаления или потери на сторонних ресурсах. По этой же причине коды программ также должны находиться на форуме".

@Wandersmann · 20.08.2023, 17:53 **[ТС]**

Сообщение от AlexZaw

А можете озвучить правило которое это запрещает? Ибо в правилах есть пункт 4.11 который гласит как раз обратное: "Картинки и любые другие файлы загружайте на форум, во избежание их удаления или потери на сторонних ресурсах. По этой же причине коды программ также должны находиться на форуме".

Нет бы, над вопросом порассуждать)

@AlexZaw · 20.08.2023, 21:38

Сообщение от Wandersmann

Нет бы, над вопросом порассуждать)

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

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

Может я конечно усложняю и все гораздо проще, а возможно все наоборот еще сложнее

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

Сообщение от Wandersmann

при этом оставались на своем месте при скроллинге

Вот это тоже непонятно. Что значит оставались на месте? Блок уехал, а фон остался? Тогда смотрим пример с фотографиями выше. Возможно вам нужно задавать фон не блокам, а их родителю или родителю родителя, или вообще body.
Или вам нужно чтобы блок был как бы своеобразным окном через которое при скролле просматриваются разные части неподвижного фона? Тогда вам поможет background-attachment: fixed;
В общем вопросов к вашему вопросу больше чем ответов

@Wandersmann · 30.08.2023, 22:23 **[ТС]**

Сообщение от AlexZaw

Блок уехал, а фон остался

Я уже понял всю абсурдность своей идеи)))
Переделал и смирился))

@AlexZaw
	14.08.2023, 11:55 #2
	Не по теме: Сообщение от Wandersmann Скрины приложить не могу по правилам форума. А можете озвучить правило которое это запрещает? Ибо в правилах есть пункт 4.11 который гласит как раз обратное: "Картинки и любые другие файлы загружайте на форум, во избежание их удаления или потери на сторонних ресурсах. По этой же причине коды программ также должны находиться на форуме". 0

@Wandersmann 0 / 0 / 0 Регистрация: 13.05.2019 Сообщений: 33
	20.08.2023, 17:53 [ТС]	3
	Сообщение от AlexZaw А можете озвучить правило которое это запрещает? Ибо в правилах есть пункт 4.11 который гласит как раз обратное: "Картинки и любые другие файлы загружайте на форум, во избежание их удаления или потери на сторонних ресурсах. По этой же причине коды программ также должны находиться на форуме". Нет бы, над вопросом порассуждать) 0

@AlexZaw Модератор 2277 / 1657 / 651 Регистрация: 07.08.2016 Сообщений: 3,973
	20.08.2023, 21:38	4
	Сообщение от Wandersmann Нет бы, над вопросом порассуждать) А тут и рассуждать нечего, вы хотите сделать прямо противоположные вещи. Если ширина не ограничена и блоки стремятся расположиться по краям экрана, то вместе с ними будет смещаться и их фон. Возьмите в руки две фотографии в рамке и попробуйте отдалить их друг от друга так, чтобы рамки разъехались, а фотографии остались на том же месте. Вот тоже самое вы пытаетесь сделать и с фоном. В теории можно конечно попробовать рассчитать изначальные координаты фона и отслеживая изменения размера экрана и/или блока задавать background-position, но на практике это, скорее всего, приведет к непредсказуемому поведению. Но тут нужно учитывать ширину экрана, ширину окна браузера, масштаб, плотность пикселей плюс нужно учесть то, что ширина браузера может меняться как слева так и справа и как-то понять с какой стороны произошло изменение и куда двигать фон в каждом случае. Плюс страница изначально может открыться в окне браузера которое не развернуто на всю ширину и изначально имеет не 100% масштаба. Может я конечно усложняю и все гораздо проще, а возможно все наоборот еще сложнее А может я вообще не понял, что вы хотите сделать. Вот поэтому необходимы скрины и точное описание того, что вы хотите получить. Сообщение от Wandersmann при этом оставались на своем месте при скроллинге Вот это тоже непонятно. Что значит оставались на месте? Блок уехал, а фон остался? Тогда смотрим пример с фотографиями выше. Возможно вам нужно задавать фон не блокам, а их родителю или родителю родителя, или вообще body. Или вам нужно чтобы блок был как бы своеобразным окном через которое при скролле просматриваются разные части неподвижного фона? Тогда вам поможет `background-attachment: fixed;` В общем вопросов к вашему вопросу больше чем ответов 0

@Wandersmann 0 / 0 / 0 Регистрация: 13.05.2019 Сообщений: 33
	30.08.2023, 22:23 [ТС]	5
	Сообщение от AlexZaw Блок уехал, а фон остался Я уже понял всю абсурдность своей идеи))) Переделал и смирился)) 0