Background in the tag aside hides all content inside the tag

Question

Hello, in my css and html studies I am creating pages and I came across a following problem that I am a few days trying to understand, I have a tag and inside it I have a background-image that is covering all content, why give this behavior? and how I can solve?

html code:

 <aside>
            <img src="br.jpg" alt="" width="150%">
            <p class="cc1">Already have an account?</p>
            <h1 class="cc2">Go to your account</h1>
            <input class="cc3" type="button" value="sign up">

    </aside>

css code:

aside{
    width: 50%; height: 100%; position: fixed; right: 0; top: 0;

}

i’ve tried to apply direct in css but I got no result, in advance I come to thank to those who take their time to help me, my thank you

Answer 1

The behavior is obvious, how can you have an aside of 50% width and an image of 150% width? Of course you’ll cover, fix it this way:

 <aside>
   <img id="imagem_teste" src="br.jpg">
    <p class="cc1">Already have an account?</p>
    <h1 class="cc2">Go to your account</h1>
    <input class="cc3" type="button" value="sign up">
</aside>

Css:

#imagem_teste{ width:25%; }

Or 2 alternative way is:

<aside>
    <p class="cc1">Already have an account?</p>
    <h1 class="cc2">Go to your account</h1>
    <input class="cc3" type="button" value="sign up">
</aside>

Css:

aside{
 height:30%; //30% de altura irá deixar um espaço sobrando
 width:100%; preenche 100% da largura da tela
 background: url(fundo- 
 br.jpg) no-repeat bottom center scroll;
background-position: 30% 45%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

Note: You can change the height and width of the img to see which one looks best for you

Answer 2

Try using the image not with the tag img, but how css:

  background-image: url("br.jpg");
  background-size: cover;

---

aside{
  width: 50%;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  background-image: url("https://i.stack.imgur.com/YB0IX.png");
  background-size: cover;
}

<aside>
  <p class="cc1">Already have an account?</p>
  <h1 class="cc2">Go to your account</h1>
  <input class="cc3" type="button" value="sign up">
</aside>

Answer 3

I believe that Daniel’s response is the best in this case, you should use the image as a background of an element and not put the element inside the tag.

BUT, if you need to put the element inside the tag try so:

<style>
    aside {
        width: 50%;
        height: 100%;
        position: fixed;
        right: 0;
        top: 0;
    }
    #tg1{
        position: absolute;
        top:0;
        left: 0;
        z-index: 1;

    }
    #tg2{
        position: relative;
        top:0;
        left: 0;
        z-index: -1;
    }
</style>

<aside>
    <div id="tg1">
        <p class="cc1">Already have an account?</p>
        <h1 class="cc2">Go to your account</h1>
        <input class="cc3" type="button" value="sign up">
    </div>
    <div id="tg2">
        <img src="br.jpg" alt="" width="150%">
     </div>
</aside>