CODEWITHSUNDEEP
javascripthtmlcssbackground
petxd
petxd

Reputation: 27

The image has not the same CSS properties after it's changed with JavaScript

This is the current background:

html {
  background: url('source.gif') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
}

And then I change it with this (when hovering over a button):

document.getElementById('b1').addEventListener('mouseover', () => {
    document.body.style.backgroundImage =  "url('src2.gif')";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundSize = "cover";
});

But the problem is that it's not even full-screen.

I want it to have all the same properties the previous one had (I mean in CSS).

How can I do this?

Upvotes: 0

Views: 29

Answers (3)

Krzysztof Janiszewski
Krzysztof Janiszewski

Reputation: 3834

In css you have styles to <html> but in javascript you change body style.

body { 
    background: url('source.gif') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

document.getElementById('b1').addEventListener('mouseover', () => {
    document.body.style.backgroundImage =  "url('src2.gif')";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundSize = "cover";
});

Also if you want to return to first values after mouse is not over b1 element you should add something like this:

document.getElementById('b1').addEventListener('mouseleave', () => {
    document.body.style.backgroundImage =  "url('source.gif')";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundSize = "cover";
});

And also line

document.body.style.backgroundSize = "cover";

is redundant, because this property is alredy set in css.

Upvotes: 0

entio
entio

Reputation: 4263

You should change the same element, you changing body styles when the initial css settings aplly to html.

Here's fiddle: https://jsfiddle.net/c59eymf8/1/

JS:

document.getElementById('b1').addEventListener('mouseover', function () {
    document.body.style.backgroundImage =  "url('https://wow.olympus.eu/webfile/img/1632/x=1024/oly_testwow_stage.jpg')";
    document.body.style.backgroundRepeat = "no-repeat";
});

CSS:

body { 
   background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/384px-PM5544_with_non-PAL_signals.png') no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   min-height: 100%;
}

Upvotes: 1

Joschi
Joschi

Reputation: 2974

Change the css so it applies to body element, not html

document.getElementById('b1').addEventListener('mouseover', () => {
  document.body.style.backgroundImage =  "url('https://cdn.pixabay.com/photo/2017/07/24/19/57/tiger-2535888_960_720.jpg')";
});
body, html { 
  height: 100%;
  padding:0;
  margin:0;
}

html { 
  background: url('https://cdn.pixabay.com/photo/2016/05/27/18/31/chaffinch-1420407_960_720.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
<button id="b1" value="b1">Other Image</button>

Upvotes: 1

Related Questions