Изменение размера, перемещение и масштабирование изображений и текстовых разделов с изменением размера браузера

Question

Я думал, что это будет довольно распространенный вопрос, который нужно искать в Google, но я не могу найти ответ. Любая помощь будет принята с благодарностью.

У меня есть веб-страница с полноразмерным переосмысленным фоновым изображением. Что-то вроде этого:

html 
{ 
    background-size:contain; 
    background: black url(../images/myimage.jpg); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:center; 
} 

На снимке у меня есть раздел, посвященный Z-слой DIV, который содержит изображение и еще г-слой DIV, который содержит некоторый текст.

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

Как я могу убедиться, что мои DIV, содержащие изображения, ссылки и текст, всегда находятся в правильном месте независимо от того, какое разрешение экрана пользователя или вне зависимости от того, как они изменяют размер браузера. CSS? Javascript? JQuery? Каков наилучший способ сделать это?

Спасибо заранее!

p.s. Пожалуйста, дайте мне знать, если что-то неясно, и нужен образец.

Answer 1

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

Если это fixed или absolute, назначая right будет поддерживать это положение выравнивается по правой части экрана, если повторно пользователь изменяет размер окна или в зависимости от разрешения, и left, top и bottom будут все действовать соответствующим образом, а также. Вы можете присвоить им процент, который также будет соответствующим образом изменяться по разрешению или изменению размера. Или вы можете назначить жесткий кодированный значение в пикселях, сантиметрах, миллиметрах, дюймах, etc... Вот jfiddle как пример кода

Answer 2

На мой взгляд, сделать следующее:

• удалить дополнительный белый интервал от фона image

• -измените фоновое изображение с тега тела и используйте главный div как и разместите весь контент внутри
  .

• -remove в DIV «element1» и добавить цвет фона «Content1» Див себя

• -в обрабатывать позиционирования контента на основе разрешения экрана, есть 2 подхода: - 1) Использование CSS медиа-запросы 2) Использование относительного позиционирования с использованием css

• -Использование медиа-запросов Css может стать утомительным, если вы поддерживаете широкий спектр разрешений, поэтому вместо этого используйте относительное позиционирование css.

например

<div class="wrapper"> 
    <div class="content1">Content</div> 
</div> 

.wrapper{ position:relative; width:100%; overflow:hidden; background:url(yourBgImage.jpg);background-size:100% 100%;} 
.content1{position:absolute; top:20%; left:10%;}