Position fixed throws off background image - html

Question

I need to have some text go over a background image. Looking around it seems like the way to do it is like this:
<div align="center" style="">
<h1>About Us</h1>
some text and more for the sub headline
<br/><br/>
<img src="aboutbg.jpg" style="width:500px; position:fixed; z-index:-1;" />
<div style="width:500px; position: relative; z-index:1;" >
About Us
</div>
</div>
but something seems to be off with the position:fixed of the <img>, and it's not centered correctly. The end result is:
What am I missing?

Answer 1

It's obeying the text-align statement you have on an ancestor element. You'll need to set its left position to 0, and possibly top as well.
It would probably be better to make the background an actual background.
.content {
text-align: center;
background-image: url(http://lorempixel.com/1200/800/nature);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
min-height: 400px;
color: yellow;
}
<div class="content">
<h1>About Us</h1> some text and more for the sub headline
<br/>
<br/>
<div style="width:500px; position: relative; z-index:1;">About Us</div>
</div>

Answer 2

Here it is with inline styles.
<div style="background:url('aboutbg.jpg') no-repeat;width:500px;text-align:center;">
<h1>About Us</h1>
<p>some text and more for the sub headline</p>
<br/>
<br/>
<ul style="list-style:none;">
<li style="border-right:1px solid #000;display:inline;margin-right:7px;padding-right:7px;">About Us</li>
<li style="border-right:1px solid #000;display:inline;margin-right:7px;padding-right:7px;">Terms</li>
<li style="display:inline;">Contact</li>
</ul>
</div>