html - Text Outside of Div -

for 1 reason or another, when attempt add text div, cleverly misses it.

i'm trying text inside div, it's staying outside of it.

here's jfiddle: http://jsfiddle.net/hspwtyag/1/

<div align="center"> <div id="box1"> <img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/rectangle_.png" /> </div>  <div id="box2"> <h2>proudly celebrating 10 years</h2> </div> </div>  * {  background-image: url("http://images.virtualworldsland.com/blog/2322/796.jpg");  background-attachment: fixed; }  #box1 {  border-radius: 1px solid black;  width: 500px;  background: white;  border-radius: 15px 15px 15px 15px ; }  #box2 {  border-radius: 1px solid black;  width: 500px;  background: white;  border-radius: 15px 15px 15px 15px ;  height: 150px; } 

it is inside div - it's background image that's tricking you.

see, if remove background image, , change div's color, proudly celebrating 10 years can seen inside red (ie. inside div).

#box1 {    border-radius: 1px solid black;    width: 500px;    background: white;    border-radius: 15px 15px 15px 15px;  }  #box2 {    border-radius: 1px solid black;    width: 500px;    background: red;    border-radius: 15px 15px 15px 15px;    height: 150px;  }

<div align="center">    <div id="box1">      <img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/rectangle_.png" />    </div>      <div id="box2">      <h2>proudly celebrating 10 years</h2>    </div>  </div>