Overlapping text over background image

Question

I'm using Bootstrap and I want to have a background image and over it some text, images or whatever. The problem is Bootstrap CSS displays elements with some kind of background and, of course, ruins the result.

You can see the example with Bootstrap here and without bootstrap here .

How can I remove this default background bootstrap uses?

The code is:

HTML

<center><div>
    <h1>This is a test</h1>
</div></center>

CSS

html { 
    width: 100%;
    height: 100%;
  background: url('http://static.panoramio.com/photos/original/24446619.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: opacity(0.9);
    -webkit-filter: opacity(0.9);
    -moz-filter: opacity(0.9);
  -o-filter: opacity(0.9);
}

Answer 1

Bootstrap sets the css of body as follows within the first few lines of code body { background-color: #fff; } body { background-color: #fff; } . My recommendation for this is to go into your bootstrap.css file and remove that css.

If you are using a cdn, you can add the following after you have your <link> to the bootstrap css:

<style>
  body { background-color: inherit; }
</style>

this will override the bootstrap css loaded.

See my update to your fiddle here: http://jsfiddle.net/1Ldykff2/2/

Answer 2

Try setting the background color to transparent . (You could use none but I've found it can be troublesome at times. Not really sure why.)

Fiddle: http://jsfiddle.net/1Ldykff2/3/

body {
   background: transparent;
}

Answer 3

There's a css rule on the body of your html that bootstrap that gives background-color: #fff;

In your own CSS, you could put

body {
    background-color: none;
}

This will override bootstrap's code.