0

im currently working on how to change the background image of my html document when the user selects a speficifc group from the dropdown menu from chatrooms. But im currently stuck I cant seem to get my jQuery to work any help you could offer would be great thank you :)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Soc Talk</title>

<script src="resource/js/jquery-1.10.2.min.js"></script>


        <link rel="stylesheet" href="resource/css/bootstrap.min.css" />
        <link rel="stylesheet" href="resource/css/style.css" />

<script>
    $(".chatroom").click(function(){
      $('.active').toggleClass('active');
      $('.chatroom').toggleClass('active');

      $('.jumbotron').fadeOut(500);
      //change background image
      $('.jumbotron').fadeIn(500);
      $('.jumbotron').css('bg.png','url(resource/GamingSoc.jpg)');
    });
</script>
</head>


<body>
    <div class="jumbotron">
        <div class="container">
            <h1>SocTalk</h1>

        </div>
    </div>

    <div class="container chat-signin">
        <form class="form-signin">
            <h2>Chat Login</h2>
            <label for="nickname">Nickname</label> <input type="text" placeholder="Nickname" id="nickname">
            <div>
                <label for="chatroom" class="chatroom">Chatroom</label> <select size="1" id="chatroom">
                    <option>Select Room</option>
                                        <option>Gaming Soc</option>
                                        <option>Pokemon Soc</option>
                </select>
            </div>
            <button type="submit" id="enterRoom">Sign in</button>
        </form>
    </div>
    <!-- /container -->

    <div class="container chat-wrapper">
        <form id="do-chat">
            <h2></h2>
                        <h4></h4>
            <table id="response" ></table>
            <fieldset>
                <legend>Enter your message..</legend>
                <div>
                    <input type="text" placeholder="Your message..." id="message" style="height:60px"/>
                    <input type="submit" value="Send message" />
                    <button type="button" id="Exit-room">Exit Room</button>
                </div>
            </fieldset>
        </form>
    </div>

        <div class="alt1">
        <div class="container">

        </div>
    </div>
    <div class="alt2">
        <div class="container">
            <footer>
                <p>Passive Aggressive Liberals</p>
            </footer>
        </div>
    </div>
</body>
</html>
Malteaser
  • 1

2 Answers2

0

Use background-image property to change or set background image.

<script>
  $(".chatroom").click(function(){
  $('.active').toggleClass('active');
  $('.chatroom').toggleClass('active');

  $('.jumbotron').fadeOut(500);
  //change background image
  $('.jumbotron').fadeIn(500);
  $('.jumbotron').css('background-image','url(resource/GamingSoc.jpg)');
});

Possible duplicate of Setting background-image using jQuery CSS property

Community
  • 1
  • 1
Stark Buttowski
  • 1,799
  • 2
  • 10
  • 21
0
$('body').css('background', 'url(resource/GamingSoc.jpg)')
user1957724
  • 21
  • 1
  • 2
  • 1
    While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) out of the code really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Kyll Nov 11 '15 at 15:26