Бэкграунд картинка на половину.

D0
На сайте с 06.02.2019
Offline
1
379

Всех приветствую ! Проблема такая

картинка для фона на половину отображается и даже

меньше чем на половину помогите разобраться

вот код :

<header class="header">


<div id="slides">
<div class="slide showing"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<div class="arrow-left" id="previous">
<img src="H:\OpenServer\OSPanel\domains\site-maket\img\left.png" alt="arrow-left">
</div>

<div class="arrow-right" id="next">
<img src="H:\OpenServer\OSPanel\domains\site-maket\img\right.png" alt="arrow-right">
</div>
</header>

.header{

/* background: url('img/bg-head.jpg') no-repeat top center / cover;*/
height: 100vh;
max-height: 100vh;
position: relative;
}
#slides{
height: 100vh;
padding: 0px;
margin: 0px;
width: 100vh;
position: absolute;
z-index: -1;
}

.slide{
position: absolute;
left: 0px;
top: 0px;
opacity: 0;

-webkit-transition: opacity 1s;
transition: opacity 1s;
}

.showing{
opacity: 1;
z-index: 4;
}


.slide{
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
}

.slide:nth-of-type(1){
background: url('img/bg-head.jpg') no-repeat top center / cover;
width: 100vh;
height: 100vh;
}
.slide:nth-of-type(2){
background: url('../slide.jpg') no-repeat;
width: 100vh;
height: 100vh;
}
.slide:nth-of-type(3){
background: url('../slide2.jpg') no-repeat;
width: 100vh;
height: 100vh;
}

.arrow-left {
position: absolute;
z-index: 99;
top: 50%;
left: 5%;
-webkit-transform: translate(-1%, -50%);
transform: translate(-1%, -50%);
}
.arrow-right {
position: absolute;
z-index: 99;
top: 50%;
right: 5%;
-webkit-transform: translate(-1%, -50%);
transform: translate(-1%, -50%);
}

<script type="text/javascript">



var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;

function nextSlide(){
goToSlide(currentSlide+1);
}

function previousSlide(){
goToSlide(currentSlide-1);
}

function goToSlide(n){
slides[currentSlide].className = 'slide';
currentSlide = (n+slides.length)%slides.length;
slides[currentSlide].className = 'slide showing';
}
var next = document.getElementById('next');

var previous = document.getElementById('previous');

next.onclick = function(){

nextSlide();
};
previous.onclick = function(){

previousSlide();
};

</script>

Эти перелистывания работают, только на половину отображается

вот еще просто бэкграунд без js

D
На сайте с 30.09.2018
Offline
8
#1

Измените в #slides, .slide:nth-of-type(1,2,3) width с 100vh на 100%, и будет вам счастье.

И добавьте no-repeat top center / cover ко всем слайдам, чтобы картинки корректно растягивались.

Сайт под ключ (https://devmastery.ru)
D0
На сайте с 06.02.2019
Offline
1
#2

ОООООООООООООхххх так долго застрял на этом ну просто большууущеее вам спасибо!!!!!!!!!!!!!!!!!!!!!!!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий