Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 22.12.2018
Сообщений: 26
1

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

05.02.2019, 18:50. Показов 516. Ответов 1
Метки нет (Все метки)

Всех приветствую ! Проблема такая
картинка для фона на половину отображается и даже
меньше чем на половину помогите разобраться
вот код :
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
     .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%);
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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

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

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.02.2019, 18:50
Ответы с готовыми решениями:

бэкграунд картинка
подскажите новичку: как сделать такой вот бэкграунд: у меня есть изображение шириной 2000 px...

В Firefox ссылки и бэкграунд(картинка) не работают. Что делать?
Здравствуйте. Помогите пожалуйста ! Не работают ссылки и background(картинка) в шапке сайта. Шапка...

Картинка в бэкграунд ячейки StringGrid
Доброго всем времени суток! Уважаемые, мне нужно прилично оформить таблицу StringGrid. Для...

Картинка на бэкграунд окна странно ведет себя :)
Пытаюсь установить на бэкграунд окна изображение. Если оно размером меньше окна то незанятая...

1
0 / 0 / 0
Регистрация: 22.12.2018
Сообщений: 26
05.02.2019, 18:53  [ТС] 2
ВОт еще видео клик
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
05.02.2019, 18:53

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Отсортировать первую половину массива размера 2*n по убыванию, а вторую половину - по возрастанию
в одномерном массиве размерностью 2*n отсортируйте первую половину массива по убыванию, а вторую...

Упорядочить первую половину массива по убыванию, а вторую половину – по возрастанию
Массив содержит 14 действительных чисел. Упорядочить первую половину массива по убыванию, а вторую...

Как сделать первую половину букв строки большими, а вторую половину - маленькими?
Здравствуйте, я не знаю как сделать первую половину букв строки большими, а вторую половину...

Удалить первую половину элементов из динамического массива, вторую половину поставить на место первой
удалить первую половину елементов из динамического массива , а вторую половину вставить на место...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.