Making text display on top of an image HTML & CSS

Question

Im struggling to get the text in the div footertext to display on top of the image. Im also trying to get it so that the copyrighttext goes to the right corner and the footernavmenu goes to the left corner.

Here is my HTML code:

<div id="footer">
  <div id="footerimage">
    <img src="images/footer-waves.jpg" width="980" height="140" alt="waves" />
  </div><!-- footer image --> 
  <div id="footertext"> 
    <div id="footernavmenu">
      <ul id="list-footer-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="design.html">Design</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="kayaking-di">kayaking Disciplines</a></li>
        <li><a href="links.html">Useful links</a></li>
      </ul><!-- ul end list-footer-nav -->
    </div><!-- div end footernavmenu -->
    <div id="copyright">
      <div class="copyrigttext">
        Copyright © 2013 Elliott Davidson, All Rights Reserved.
      </div><!-- end div copyrighttext -->
    </div><!-- end div copyright -->
  </div><!-- end div footertext -->            
</div><!-- end of footer -->

Here is the CSS code:

    #footer {
    margin-left:auto;
    margin-right:auto;
    height:175px;
    width:980;
}

#footertext {
    position:relative;
    width:980px;
    height:auto;
}

#footerimage {
    margin-left:auto;
    margin-right:auto;
    width:980px;
    height:140px;
}

#footernavmenu {
    width : 480px;
    right:0px;
    margin-right:0px;
    float:left;
    color:#FFF;
}

ul#list-footer-nav {
    list-style : none;
    padding-right : 3px;
    width:auto;
}

ul#list-footer-nav li {
    display : inline;
    padding-right: 3px;
}

ul#list-footer-nav li a {
    text-decoration : none;
    width:auto;
    float : left;
}

ul#list-footer-nav li a:hover {

}

ul#list-footer-nav li a:active {

}

#copyright {
    width:480px;
    height:auto;
    right:0px;
    float:right;
}

.copyrighttext {

}

Answer 1

Here is a more practical solution, you just have to shift the #footer-text container and its children within the #footerimage container, after the <img> tag.

After that you assign a position relative to the footer-text, and then position absolute to the footerimage, and a few other things. Please look at my fiddle to experiment with my solution.

HTML CODE:

<div id="footer">
  <div id="footerimage">
    <img src="images/footer-waves.jpg" width="980" height="140" alt="waves" />
      <div id="footertext"> 
        <div id="footernavmenu">
          <ul id="list-footer-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="design.html">Design</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="kayaking-di">kayaking Disciplines</a></li>
            <li><a href="links.html">Useful links</a></li>
          </ul><!-- ul end list-footer-nav -->
        </div><!-- div end footernavmenu -->
        <div id="copyright">
          <div class="copyrigttext">
            Copyright © 2013 Elliott Davidson, All Rights Reserved.
          </div><!-- end div copyrighttext -->
        </div><!-- end div copyright -->
      </div><!-- end div footertext -->          
  </div><!-- footer image --> 
</div><!-- end of footer -->

CSS CODE:

#footer {
    margin-left:auto;
    margin-right:auto;
    height:175px;
    width:980;
}

#footertext {
    position:absolute;
    width:980px;
    height:auto;
    bottom: 0
}

#footerimage {
    margin-left:auto;
    margin-right:auto;
    width:980px;
    height:140px;
    position: relative;
}

#footernavmenu {
    width : 480px;
    right:0px;
    margin-right:0px;
    float:left;
    color:#FFF;
}

ul#list-footer-nav {
    list-style : none;
    padding-right : 3px;
    width:auto;
}

ul#list-footer-nav li {
    display : inline;
    padding-right: 3px;
}

ul#list-footer-nav li a {
    text-decoration : none;
    width:auto;
    float : left;
}

ul#list-footer-nav li a:hover {

}

ul#list-footer-nav li a:active {

}

#copyright {
    width:480px;
    height:auto;
    right:0;
    position: absolute;
    bottom: 0;
    margin: 1em;
    text-align: right;
}

.copyrighttext {

}

Answer 2

CSS

 .ParentDivclassThatContainsFooterimageandFootertext{
    position:relative;
  }

#footerimage{
  position:relative;
}

#footertext {
   position:absolute;
    width:980px;
    top: whateversuits;
    left: whateversuits;
   height:auto;
}

  .copyright {
     float: right;
      width:50%; // adjust according to what you want.
    vertical-align: top; // or bottom if you want bottom corner
  }


 .footernavmenu {
   float: left;
    vertical-align: top; // or bottom if you want bottom corner
    width: 50%;  adjust according to what you want.
 } 

Answer 3

HTML:

    <div id="footertext"> 

        <div id="footernavmenu">

            <ul id="list-footer-nav">

                <li><a href="index.html">Home</a></li>

                <li><a href="design.html">Design</a></li>

                <li><a href="about.html">About</a></li>

                <li><a href="kayaking-di">kayaking Disciplines</a></li>

                <li><a href="links.html">Useful links</a></li>

            </ul><!-- ul end list-footer-nav -->

        </div><!-- div end footernavmenu -->

        <div id="copyright">

            <div class="copyrigttext">

                Copyright © 2013 Elliott Davidson, All Rights Reserved.

            </div><!-- end div copyrighttext -->

        </div><!-- end div copyright -->

    </div><!-- end div footertext -->

CSS:

#footertext {
    background: url('images/footer-waves.jpg') fixed top left no-repeat;
    width: 980px;
    height: 140px;
}

To make the copyright go to the right and footernavmenu go to the left:

#copyright {
    float: right;
    vertical-align: top; // or bottom if you want bottom corner
}

#footernavmenu {
    float: left;
    vertical-align: top; // or bottom if you want bottom corner
}

Answer 4

Add the image as a background-image on the #footertext element:

#footertext {
  background-image: url('images/footer-waves.jpg');
}