CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
s_curry_s
s_curry_s

Reputation: 3432

Background Changing and CSS with Bootstrap

I am trying to change the background of my website with every on-module load. It works perfectly without importing bootstrap, but once I try to import bootstrap it seems like $('html').css({"background":background}) is only effective on the parts that Twitter bootstrap is not used.

I feel like I should be changing the background only when Twitter bootstrap is imported. Here a screenshot: https://www.dropbox.com/s/ztcx56p9b7twq8b/Screen%20Shot%202012-12-18%20at%203.35.21%20PM.png?m

    <!DOCTYPE html>
<html>
<head>

    <script src="/javascripts/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/javascripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/javascripts/background_decider.js"></script>
    <link rel='stylesheet' href='/stylesheets/css/bootstrap.min.css'/>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>


  <body>
      <script type="text/javascript">

         window.onload = function() {
           window.setTimeout(function () {
                var background = select_background();
                $('html').css({"background":background});
           }, 0);
           };


      </script>
    <div class="title">
      <form class="form-horizontal">
        <div class="control-group">
          <div class="controls">
            <label class="control-label" for="inputEmail">Email</label>
            <input type="text" id="inputEmail" placeholder="Email">
          </div>
        </div>
        <div class="control-group">
          <div class="controls">
            <label class="control-label" for="inputPassword">Password</label>
            <input type="password" id="inputPassword" placeholder="Password">
          </div>
        </div>
      </form>

    </div>
  </body>

</html>

Upvotes: 0

Views: 642

Answers (2)

s_curry_s
s_curry_s

Reputation: 3432

thanks for your help, but this is how I fixed my problem:

I changed $('html').css({"background":background}); to $('body').css({"background":background});

Upvotes: 0

Grinn
Grinn

Reputation: 5543

It looks like an element is covering up part of your page. Without seeing your complete HTML/CSS it's hard to tell what that is. But, here's where I would start:

  1. Use FireBug (in FireFox) or the Developer Tools (in Chrome: Ctrl+Shift+J, IE: F12) to select the element for determining what it is.
  2. Add the code below to your CSS file. It makes sure the element that uses it has no background.
  3. Add class="transparent" to the element from step 1.

.

.transparent
{
    border-color: transparent;
    background-color: transparent;
    background-image: none;
}

Upvotes: 1

Related Questions