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

Question

[ItWorld]

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

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

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

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

Или

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

Заранее спасибо.

Answer 1

[Александр]

Для класса со слайдером

background-repeat: no-repeat;
background-size: cover;

Большее о background
Большее о background size

Comments

[ItWorld]

Александр не помогло.

[Александр]

ItWorld, а ничего, что ты отметил ответом вопрос в котором сделано то же самое, только неправильно?

[ItWorld]

Александр, Ну ладно.

Answer 2

[Кирилл Прогер]

.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-распологать по центру

Answer 3

[danilr]

Чтобы не дублировать в каждый child слайдера, лучше добавьте так

.slide {
 background-repeat: no-repeat;
 background-position: center;
}

так будет Выглядеть
Или второй вариант( как по мне - растягивать картинки - не лучший вариант):

.slide {
 background-position: center;
 background-size: cover;
}

Вот так