@ItWorld

Картинка повторяется в слайдере. Как исправить?

Здравствуйте. Имеем следующий слайдер: https://jsfiddle.net/9tvuo0my/

Как видите при большой ширине картинка начинает повторятся.

Подскажите, как сделать так, чтобы:

1. Картинка просто была по середине и не повторялась.

Или

2. Чтобы картинка просто занимала всю ширину без повторения.

Заранее спасибо.
  • Вопрос задан
  • 176 просмотров
Решения вопроса 3
AleksandrB
@AleksandrB
Для класса со слайдером
background-repeat: no-repeat;
background-size: cover;

Большее о background
Большее о background size
Ответ написан
@freekirill
Пишу под Битрикс
.slide:nth-of-type(1) {
 background: url(https://static-pss-eu.wgcdn.co/shop/media/carousel/86/1b/861b8481504e45a6a6a5b838286a5239.jpg) no-repeat center;
}
.slide:nth-of-type(2) {
 background: url(https://static-pss-eu.wgcdn.co/shop/media/carousel/86/1b/861b8481504e45a6a6a5b838286a5239.jpg) no-repeat center;
}
.slide:nth-of-type(3) {
 background: url(https://static-pss-eu.wgcdn.co/shop/media/carousel/86/1b/861b8481504e45a6a6a5b838286a5239.jpg) no-repeat center;
}
.slide:nth-of-type(4) {
 background: url(https://static-pss-eu.wgcdn.co/shop/media/carousel/86/1b/861b8481504e45a6a6a5b838286a5239.jpg) no-repeat center;
}
.slide:nth-of-type(5) {
 background: url(https://static-pss-eu.wgcdn.co/shop/media/carousel/86/1b/861b8481504e45a6a6a5b838286a5239.jpg) no-repeat center;
}


Вот так в CSS нужно поменять, задав 2 параметра no-repeat - не дублировать center-распологать по центру
Ответ написан
@danilr
Чтобы не дублировать в каждый child слайдера, лучше добавьте так
.slide {
 background-repeat: no-repeat;
 background-position: center;
}

так будет Выглядеть
Или второй вариант( как по мне - растягивать картинки - не лучший вариант):
.slide {
 background-position: center;
 background-size: cover;
}

Вот так
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы