- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Problem with CSS Background Image Changer
I simply want to change my CSS Background image and I’m not sure what I’m doing wrong
HTML
[code]
Confused by Algebra? Hate Geometry? PreCal makes you cry? Have No Fear – we’ll help you figure everything out.
[/code]
CSS
[code]
#showcase {
min-height: 500px;
background: url(‘../img/home/background_image1.jpg’);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
[/code]
JS
[code]
$(document).ready(function() {
let count = 0;
let images =[“../img/home/background_image_1.jpg”,
“../img/home/background_image_2.jpg”];
let image = $(“#showcase”);
image.css(“background”,”url(“+images[count]+”)”);
setInterval(function() {
image.fadeOut(500, function() {
image.css(“background”,”url(“+images[count++]+”)”);
image.fadeIn(500);
});
if(count == images.length)
{
count = 0;
}
},5000);
[/code]
The background image does not change, if I comment out [i]background: url(‘../img/home/background_image1.jpg’);[/i] then there is no background image at all. Not sure whats going on
Seems to work fine…
Edit – in essence anyway. But using background
instead of background-image
overwrites the other specific properties defined in the style.