如何使用Javascript / jQuery更改背景图片？

Question

我目前正在研究如何在用户从聊天室的下拉菜单中选择speficifc组时更改html文档的背景图像。 但是我目前陷入困境，我似乎无法让我的jQuery正常工作，您可以提供的任何帮助将非常感谢:)

<!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>

Answer 1

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

使用jQuery CSS属性设置背景图像的可能重复项

Answer 2

$('body').css('background', 'url(resource/GamingSoc.jpg)')

如何使用Javascript / jQuery更改背景图片？

问题描述

2 个解决方案

解决方案1
0 2015-11-11 12:15:55

解决方案2
0 2015-11-11 12:18:30

如何使用Javascript / jQuery更改背景图片？

问题描述

2 个解决方案

解决方案1 0 2015-11-11 12:15:55

解决方案2 0 2015-11-11 12:18:30

解决方案1
0 2015-11-11 12:15:55

解决方案2
0 2015-11-11 12:18:30