Forums

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

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #286318
    Ranger SVO
    Participant

    I simply want to change my CSS Background image and I’m not sure what I’m doing wrong
    HTML
    [code]

    HS Mathematics

    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

    #286320
    Shikkediel
    Participant

    Seems to work fine…

    codepen.io/anon/pen/wZrpWP

    Edit – in essence anyway. But using background instead of background-image overwrites the other specific properties defined in the style.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.