Fade in different background image when clicked

Question

I'm having some trouble fading in a new background image when the button is clicked. Also, the background image isn't covering the page once it's clicked. Not sure if my htmt/css is relevant. Any help is appreciated!

html:

   <section class="banner"></section>

<div class="container">
    <header class="sixteen columns l-main-head">
        <h1>シアトル</h1>
    </header>

    <nav class="sixteen columns m-btn-artCont">
        <button class="m-btn-mainArt">学ぶ</button>
    </nav>


    <section class="one-third column m-lorem">
    <p>こでど</p>
            </section>

 <section class="one-third column m-lorem">
        <p>こでど </p>
 </section>

        <section class="one-third column m-lorem">
        <p>こでど</p>
 </section>

 <section class="sixteen columns m-last-para">
    <p>こでど</p>
 </section>

</div><!-- container -->

CSS

 .banner {
background: url(../images/Seattle.svg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 min-height: 100%;
 min-width: 1024px;
 display: block;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
 }

.m-back-lorem {
 text-align: center;
 }


.m-btn-artCont {
 text-align: center;
 margin-left: 1em;
 display: block;
}

 button.m-btn-mainArt {
 background-color: white;
 border-radius: 49%;
 color: rgb(2, 0, 0);
 width: 7em;
 height: 7em;
 opacity: 0.5;
 margin-bottom: 4em;
}

jQuery:

$(document).ready(function() {
    $('.m-lorem p').hide();
});

$('button.m-btn-mainArt').click(function() {
    $('.m-lorem p').fadeIn(1000);
});

$('button.m-btn-mainArt').click(function() {
    $('.banner').css('background', 'url(images/Seattle-day.svg) no-repeat center center fixed');
});

http://stackoverflow.com/questions/7832140/jquery-change-background-image may answer this for you. — Jay Blanchard, Mar 27 '14 at 17:20
Why are you registering two separate handlers on the same event? Can you please show your full code. — iCollect.it Ltd, Mar 27 '14 at 17:21
What kind of trouble are you facing exactly? which one is the class of your image? — Mohammed Joraid, Mar 27 '14 at 17:24
Added the rest of my code. I want the Seattle-day.svg to fade in after the button is clicked. Also, any help in regards to having the the background image covering the background like the first image would be helpful. Thanks — Waymond, Mar 27 '14 at 17:33
I figured it out. I put the second background image in the CSS. In the Js file, I just put a fade toggle to that background and it worked. Phew.. — Waymond, Mar 27 '14 at 19:02

score 0 · Answer 1 · answered Mar 27 '14 at 17:26

0

Make sure that the class banner is applied to the body tag of the html and not a topmost parent div

answered Mar 27 '14 at 17:26

A J

2,112
15
24

Fade in different background image when clicked

1 Answers1