RedLight GreenLight RedLight GreenLight - 4 months ago 13
CSS Question

HTML Image Sits On Top Of Other Controls

I want to have my background image span the entire page. This works as it should, with the exception of it sits on top of any other control/element I may add to the page. What do I alter in order for me to be able to have an image as a background spanning the entire page as well as add text/images on top of it? This is my current syntax:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
</head>

<body>
<div id="bg"><img src="C:\KittyKat.jpg" width="100%" height="100%" alt="1stDay" />
<font size="30" color="red">Pic 1</font><br>
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>

Answer

I used demo images for test it. Here is working code: Just add z-index: -1; to #bg.

  html {height:100%;}
  body {height:100%; margin:0; padding:0;}
  #bg {position:fixed; top:0; left:0; width:100%;z-index:-1; height:100%;}
  #content {position:relative; z-index:10;}
<center>
  <div>
    <font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
  </div>
</center>

<body>
<div id="bg">
<img src="https://www2.palomar.edu/pages/testwritingstrategies/files/2015/02/online-test-fotolia_60995176.jpg" width="100%" height="100%" alt="1stDay" />
</div>
<font size="30" color="red">Pic 1</font><br>    
<img src="http://authentic-scandinavia.com/system/images/tours/photos/155/thumbnail.jpg?1370424008" alt="" style="width:450px;height:500px;">