How to change body background image by hovering a li element

Question

I'm trying to do exactly what this site did in home page: http://ingrupo.net.br/

I need to change my body background image when a li element is hovered, and on each element a different image too.

PS: Not necessary but if anyone could help with the text elements like this site did, it will be appriciated.

Possible duplicate of [change body background image/gradient on hovering other elements](http://stackoverflow.com/questions/11940645/change-body-background-image-gradient-on-hovering-other-elements) — Md Sabbir Alam, Oct 10 '15 at 18:33
dude this is not how it works here, you got to show your research here in the question, code snippet or something like jsfiddle would be nice — prasun, Oct 10 '15 at 18:37
InsomniacSabbir I saw this post before posting it, but it does not work for me. — João Rocha, Oct 10 '15 at 18:45

Elliot E · Answer 1 · 2015-10-10T19:50:46.767

1

body {
    background-size: cover;
}

<script>
function myFunction2() {
    document.body.style.backgroundImage = "url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Color_icon_red.svg/2000px-Color_icon_red.svg.png')";
}
</script>
<a href="link-to-where-you-want-to-go" onmouseover="myFunction2()">hello!</a>

Here's an example of what you want, where the background is styled using css.

edited Oct 10 '15 at 19:50

answered Oct 10 '15 at 18:37

Elliot E

452
3
14

This works fine. There's any way that the background-image could be more customizable by css (control the size, repeat etc.)? – João Rocha Oct 10 '15 at 19:39
Of course! Iv'e edited my response, now it contains an example of how to style the background. It is also even possible to have different styling for different backgrounds, if you use js like this: `document.body.style.backgroundSize = "60px 120px";` inside myFunction2() – Elliot E Oct 10 '15 at 19:53
Thank you very Much Elliot, this will work for me. I'll just try to figure out how to add a fadeIn/FadeOut in the image transitions. – João Rocha Oct 10 '15 at 19:56

score 0 · Accepted Answer · answered Oct 10 '15 at 20:40

Try this https://jsfiddle.net/8k3kp6uu/

HTML

<div class="background-divs green active"></div>
<div class="background-divs blue"></div>
<div class="background-divs yellow"></div>

<ul class="links">
    <li><a class="link" data-background="green" href="">green</a></li>
    <li><a class="link" data-background="blue" href="">blue</a></li>
    <li><a class="link" data-background="yellow" href="">yellow</a></li>
</ul>

CSS

.background-divs {
    width: 100vw;
    height: 100vh;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    left: 0;
    visibility: visible;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.background-divs.blue {
    background-color: blue;
}

.background-divs.green {
    background-color: green;
}

.background-divs.yellow {
    background-color: yellow;
}

.links {
    position: absolute;
    top: 0;
    left:0;
    z-index: 5;
}

.links  li {
    border: 1px solid white;
    color: white;
    margin: 30px 0;
    padding: 10px;
}

.active {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

JS

$('.link').mouseover(function(e) {
e.preventDefault();
var color = $(this).attr('data-background');

$('.background-divs').removeClass('active');
$('.background-divs.'+color).addClass('active');

});

This is awesome Nenad. Thank you! Works very well. – João Rocha Oct 11 '15 at 17:32 — João Rocha, Oct 11 '15 at 17:32
I am glad i could help :) – Nenad Vracar Oct 11 '15 at 17:48 — Nenad Vracar, Oct 11 '15 at 17:48

How to change body background image by hovering a li element

2 Answers2