Image on top of another css

Question

So, I gotta make my site like this (this is a project for the college): Site goal but all I got is this: i. stack. imgur. com/wN1TZ.png

I can't get the image to go on top of the other one and centered, I already tried position: relative, margin: auto and width: 65% none seem to work.

 <div class="menu">
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="apresentacao.html">APRESENTAÇÃO</a></li>
        <li><a href="programacao.html">PROGRAMAÇÃO</a></li>
        <li><a href="inscricao.html">INSCRIÇÃO</a></li>
        <li><a href="comite.html">COMITÊ</a></li>
        <li><a href="apoio.html">APOIO</a></li>
    </ul>
</div>
<div id="menu_princ">
    <div class="banner_fundo">
        <img src="banner.jpg">
    </div>
    <div class="enter-down-bounce">
        <img src="logogd.png" class="logogd">
        <article class="tudo2">
        <h1>GameDays 2015</h1>
    <h4><p>21 a 23 de Outubro</br>
    no campus Liberdade da Universidade Cruzeiro do Sul</p></h4>
<br></br>
</article>
<a role="button" target="_blank">Faça sua Inscrição</a>

        </div>

</div>

and the css:

@import url(https://fonts.googleapis.com/css?family=Fira+Sans); body{ font-family: 'Fira-Sans', sans-serif; color: #000000; } .logo{ padding: 0 0; float: left; } .banner_fundo{ max-width: 100%; position: relative; } ul li{ list-style: none; display: block; } .menu{ padding: 0; margin-right: 30px; float:right; width:100%; } .menu li{ display:inline-block; padding:0; margin:15px; -webkit-justify-content: space-around; justify-content: space-around; } .logogd{ margin: auto; position: relative; } .menu ul a:hover{ background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(4, 29, 61, 1)), color-stop(100%,rgba(2, 3, 27, 1))); } .menu a:link, .menu a:visited{ text-decoration: none; color: #000000; } .tudo2{ text-align: center; }

Possible duplicate of [How do I position one image on top of another in HTML?](http://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html) — Andrew Li, May 19 '16 at 23:41

score 0 · Answer 1 · answered May 20 '16 at 00:55

To place an element (B) on top of another (A):

1.) Put B inside A, making it dependent from its position

2.) Assign display: absolute; to B and display: relative; to A

3.) Adjust the position of B with the top or bottomand leftor right parameters. Give it either a width and height setting or all four top, bottom, left and right settings (defining the outer limits, so to say).

In your case A and B would probably be the DIVs banner_fundo and enter-down-bounce, which are the only ones that contain images in your code.

Image on top of another css

1 Answers1