Как создать фона параллакса div resposive

У меня есть div в верхней части страницы, которому присваивается изображение параллакса, когда порт представления не настолько широк, что изображение не реагирует, как я могу сделать фоновое изображение реагирует?Как создать фона параллакса div resposive

#parallax{ 
 
    height:100vh; 
 
    background:url("../images/keyboard.jpg"); 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
}

<div id="parallax"> 
 
    <div class="col-md-1"></div> 
 
    <div id="profile" class="bottom-align col-md-4"> 
 

 
    </div> 
 
</div>

и вот скриншоты того, что я имею в виду зависания

в основном я хочу «веб-сайт», чтобы показать, когда порт зрения не а также вместо «WE»

источник

2016-12-08 Ayman H

попытка 'ширина: 100%' – odedta

я сделал, если и имею в виду #parallaxDiv это не работало:/ –

К фактическому тегу изображения. Было бы неплохо увидеть рабочий пример для этого. – odedta

. Ваша ширина изображения будет 100%. Я помещал теги изображений в divs для представления размеров экрана.

<div style="width:20%"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%"> 
 
</div> 
 
<div style="width:40%">  
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%"> 
 
</div> 
 
<div style="width:60%">  
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%"> 
 
</div> 
 
<div style="width:80%">  
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%"> 
 
</div> 
 
<div style="width:100%"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%"> 
 
</div>

источник

2016-12-08 16:23:48

background-size: cover это масштабирование фонового изображения, чтобы заполнить всю высоту содержащего элемента, который на мобильном устройстве является высоким и узким, кадрированием изображения.

Вы должны либо использовать background-size: contain вместо cover, либо разрешить сдерживающий элемент сжиматься до менее 100vh. Предостережение с первым - вам нужно выяснить, что заполнить остальную часть контейнера.

Вот пример:

.target { 
 
    background: url(http://placekitten.com/300/100); 
 
    background-position: center center; 
 
    background-color: teal; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    height: 150px; 
 
    width: 100px; 
 
} 
 
.better { 
 
    background: url(http://placekitten.com/300/100); 
 
    background-position: top center; 
 
    background-color: teal; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    height: 150px; 
 
    width: 100px; 
 
}

<html> 
 

 
<body> 
 
    Cover: 
 
    <br> 
 
    <div class="target"></div> 
 

 
    Contain: 
 
    <br> 
 
    <div class="better"></div> 
 

 
    <div> 
 
    Original: 
 
    <br> 
 
    <img src="http://placekitten.com/300/100" ?> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2016-12-08 16:29:19 Bojangles

Простым решением было бы:

Сделайте ваш размер вытягивание тела на весь вид порта

body{ width:100%; height:100%; /* on the example due to some overflow I've used 97% to prevent scroll bars

....
сделать фоновое изображение заполнить элемент тела

background-image:url(...); background-position:cover;

И это все,

жить белое пространство для ваш заголовок смещает ваше положение изображения вниз по ширине вашего заголовка.

background-position:50px;

Неудобство, когда вы хотите, чтобы иметь реальное содержание, вы не можете полагаться на том же листе стилей для других страниц, вы должны изменить его.

Конечно, вы не увидите никакой отзывчивости в примере здесь, потому что способ фрагмента находится в контейнере с фиксированной шириной. Но при тестировании он работает, как ожидалось. (По крайней мере, вы можете увидеть, как растягивают изображение по сравнению с the original one here)

.header{ 
 
\t border:solid ; 
 
\t width:100%; 
 
\t height:50px; 
 
    text-align:center; 
 
} 
 

 
body{ 
 
    width:97%; 
 
    height:97%; 
 

 
    background-repeat:no-repeat; 
 
    background-image:url(https://i.stack.imgur.com/AWVa6.jpg); 
 
    background-position:0 50px; 
 
    background-attachment:fixed; 
 
    background-size:cover; 
 
}

<div class="header">your header or navigation bar</div>

источник

2017-11-29 00:08:00 user10089632

Как создать фона параллакса div resposive

ответ

Смежные вопросы