Using Google Maps As A Background?

Okay so I have tried to implement Google Maps as a background to my website. But when I try to put text over it using this code: .content{ z-index:0; background-color:fffff; positi

Solution 1:

Try adjusting the top and left instead of margin when an item is set to an absolute position:

.content{
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 100px;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}

Hope that helps? Also might want to set a higher z-index value as I have done above.

If you want it horizontally centered with auto margin values but also absolutely positioned, I don't think you can do that.

You can try this instead by giving your content an absolute width and offsetting the left property:

.content{
width: 500px;
    z-index: 100;
    background-color:fffff;
    position: absolute; top: 100px; left: 50%;
    height: auto;
    margin: auto;
margin-left: -250px; /* half the value of the width */
    }

Here's a link to a JS Fiddle that uses your code: http://jsfiddle.net/4FLKt/1/ Seems to be working fine.

Mikey.

Solution 2:

Did you try putting the content on top of the map?

#map {
    z-index:1;
}
.content{
    z-index:100;
}

Solution 3:

This is because your using position: absolute; and that is not working togetter with margin:auto;.

Place a div around it with a full width over the google maps and make that absolute... then in that div you can center a other div.

Example

<div> //This div has position:absolute; and the width of the Google maps chart.
  <div> //This div has margin:0 auto;
     Content here
  </div>
</div>