KrMa KrMa - 1 month ago 12
CSS Question

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'}
]
});

MJN MJN
Answer

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;
}