CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3043051
user3043051

Reputation: 35

why won't the background image display in my code?

I'd like to put a image in the jumbotron in the background centered and have the header and textarea in the front but I can't find the problem please help. Also how can I take the data typed into the textarea and post it somewhere else on the page like a status i.e. facebook status

<!DOCTYPE html>
<html>
    <head>
        <title>Sample Home Page</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="login.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
    </script>
    </head>

    <body>
        <nav class="navbar navbar-inverse">
      <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Sample App</a>
    </div>
    <div class = "navbar-links">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Help</a></li> 
        <li class="dropdown"> 
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="navLogin">Sign in
            <span class="caret"></span></a>
            <div class="dropdown-menu">
              <form class="form" id="formLogin">
                <input name="username" id="username" type="text" placeholder="Username"> 
                <input name="password" id="password" type="password" placeholder="Password"><br>
                <label><input type="checkbox" value="1" id="remember-me">Remember me</label>
                <br>
                <button type="button" id="btnLogin" class="btn">Sign in</button>
              </form>
            </div>
          </li>
          <li class="sign-up"><a href="sign up form.html">Sign up</a></li>
      </ul>
    </div>
  </div>
    </nav>

<div class="jumbotron">
  <div class="intro">
    <h1>Hello Beautiful</h1>
    <p>Leave a message!</p>
  </div>
  <div class="message-container">
    <form method="post" action="/Anonymous" target="main">
      <textarea name="message" rows=10 cols=70 maxentry=1000 placeholder="Message..."></textarea>
      <br>
      <button type="button" id="message-button">Submit</button>
    </div>
</div>

    </body>
</html>

here is the css I currently have

.navbar-links a{
    color: white;
}

#formLogin{
    padding:10px;
}

.dropdown-menu input{
    margin: 10px;
}

.jumbotron{
    display: auto;
    text-align: center;
    background-image: url(https://rebelmoustache.files.wordpress.com/2011/12/tumblr_lvl7uyuldf1qhm09f.png) no-repeat center center;
}

Upvotes: 0

Views: 276

Answers (1)

Gold Pearl
Gold Pearl

Reputation: 2024

Because you wrote shorthand notation for .jumbotron background image properties. If you want multiple properties in single line your code must be background.

Fiddle

CSS

.jumbotron{
    display: auto;
    text-align: center;
    background: url(https://rebelmoustache.files.wordpress.com/2011/12/tumblr_lvl7uyuldf1qhm09f.png) no-repeat center center;
}

Upvotes: 2

Related Questions