Adding a doctype breaks background image alignment

StackOverflow https://stackoverflow.com/questions/17874654

Question

Currently I have the below HTML code, as you can see there is no doctype specified:

<html lang="en">
    <head>
        <title>Website</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
        <!--[if gt IE 7]>
            <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
        <![endif]-->
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/plugins.min.js"></script>
        <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
    </head>
    <body>
        <div class="container">
            <div id="searchbar">
                <form action="#" method="POST">
                    <div class="input-append">
                        <input class="span2" id="appendedInputButton" type="text" />
                        <button class="btn" type="button">Go!</button>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>

Mixed with the following style.css file:

@font-face{
    font-family: Comfortaa;
    src: url('Comfortaa.ttf');
}

body{
    background-color: #77d5fb;
    background-image: url('bottom_bg.jpg');
    background-position: center bottom;
    background-repeat: no-repeat;
    font-family: Comfortaa;
}

#searchbar{
    width:700px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -350px;
}

Having that code shows my background image just fine however when I add the <!DOCTYPE html> as is required by bootstrap, my background image declaration seems to be "ignored" and only the specified background color is shown.

I have done some testing and found that background-position is causing the issue.

With background-position: center bottom the image will not appear however background-image: center and it will appear but centered at the top of the page and I need it at the bottom.

How can I push down that background image?

Was it helpful?

Solution

Add

html,body{min-height:100%}

to your CSS.

As for the doctype, use this

<!DOCTYPE HTML>

so your document will look somewhat like this working example. Try it and you'll see the image is displayed just the way you want it to be displayed.

  <!DOCTYPE HTML>
  <html>
  <head>
  <title>Title Here</title>
  <meta charset="utf-8">
  <style>
  html{
      min-height:100%;
  }
  body{
      min-height:100%;
      background-color: #77d5fb;
      background-image: url('bottom_bg.jpg');
      background-position: center bottom;
      background-repeat: no-repeat;
      font-family: Comfortaa;
  }
  #searchbar{
      width:700px;
      height:200px;
      position:absolute;
      left:50%;
      top:50%;
      margin:-100px 0 0 -350px;
  }
  </style>
  </head>
  <body>
  <p id="searchbar">Just testing!</p>
  </body>
  </html>

Enjoy!

OTHER TIPS

You should always use a doctype, otherwise you will be developing in the scary and unpredictable land called quirksmode, this is nothing you want. I suggest you add:

<!DOCTYPE html>

and try to fix your minor CSS issues with that in place.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top