Przez background-size zdjęcia na stronie się nie wczytują.

Question

Witam. Mam problem z tłem jednego z divów. Oto kod:

var numer = Math.floor(Math.random()*4)+1;

function off()
{
	$('#home-page').fadeOut(1000);
}

function slider_backgorund()
{
	numer++; if (numer>4) numer=1;

	var tlo = "img/background/" + numer + ".jpg";

	document.getElementById("home-page").style.background = "url(" + tlo + ") no-repeat fixed center cover";
	$('#home-page').fadeIn(1000);

	setTimeout("slider_backgorund()", 10000)
	setTimeout("off()", 9000)
}

Problem polega na tym, iż gdy dodam dopisek cover w .style.background to zdjęcie, które ma się wczytać się nie wczytuje. Po prostu zostaje pusta przestrzeń. Dzieje się tak na każdej z przeglądarek, na której próbowałem (Edge, IE, Chrome). Nie mam już żadnego pomysłu dlaczego tylko przez wartość background-size,zdjęcia przestają się ładować. Z góry dziękuje za pomoc.

Answer 1

to dlatego, że niepoprawnie to zapisujesz ;)
nawet jakbyś prosto w CSS próbował tak zrobić to nie wczytałoby zdjęcia.

poprawnie powinno być zapisane:
background: url(...) no-repeat fixed center/cover;

tu masz link: mdn

Answer 2

1. Zmienna numer jest globalna. Każdy może podpisać pod nią -100 albo "fake". Używaj IIFE
2. Używaj raczej single quotes (dla ES6 Template strings)

3. setTimeout(foo, 1000); //zamiast stringa

4. Co do samej mechaniki wyloguj to co podpisujesz pod background i spróbuj przypisać w przeglądarce, w edytorze stylów.

5. Skoro korzystasz z jQuery to masz metodę css

6. slider_backgorund vs sliderBackground?

7. off vs hideSlider?

8. Zauważ że ukrywasz slider w funkcji off a setTimeout wesoło pomyka dalej. Korzystaj z clearTimeout