CODEWITHSUNDEEP
htmlcss
KrMa
KrMa

Reputation: 713

change background from JS to CSS

I have a problem with loading-time on my background.

Originally I had a slideshow background(with the following JS code below), but I decided to only have 1 picture background. So everytime I click around on my site, there is coming a white background because the script is loading slow:

My Portfolio

I tried to set the background like the below CSS, but it does not work properly. Either the background is scrolling and reapeting itself, or the background is not called.

How is the proper way to make the background exact as it is now on my website, but with CSS instead of JS?

CSS

html { 
  background: url(images/background/bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

This is the JS code:

$(document).ready(function() {

// Supersized Background Images
$.supersized({
    // Functionality
    slide_interval          :   6000,           // Length between transitions
    transition              :   1,              // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
    transition_speed        :   300,            // Speed of transition
    navigation              :   10,                 // Slideshow controls on/off

    // Components                           
    slide_links             :   'blank',        // Individual links for each slide (Options: false, 'num', 'name', 'blank')
    slides                  :   [               // Slideshow Images

    {image : 'https://vouzalis.com/images/background/bg2.jpg'},
    {image : 'https://vouzalis.com/images/background/bg2.jpg'},
    {image : 'https://vouzalis.com/images/background/bg2.jpg'}                                                                                  
        ]
});

Upvotes: 0

Views: 75

Answers (2)

sheunis
sheunis

Reputation: 1544

There's definitely a typo there:

background-repeat: no-reapet;

That should be no-repeat.

Upvotes: 0

MJN
MJN

Reputation: 653

Make sure the correct path of image is given or just give full path as below..

html { 
  background-image: url('https://vouzalis.com/images/background/bg2.jpg'); 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment:fixed;
}

Upvotes: 1

Related Questions