How to place an image on the right side of the page without changing the layout?

Asked

Viewed 203 times

0

I would like to put an image on the right side of the login screen of the site I am creating. Below with the image is easier to understand. inserir a descrição da imagem aqui

I would like an image to be 'floating' there with css, where I would update this image when necessary.

I think I should use z-index maybe, but I don’t know how to do that without changing the page layout. my code:

<body>

<header class="container">

    <section class="content">
        <div class="container">
            <div style="text-align: center;font-family: 'Roboto', sans-serif;font-weight: bold">
                <img src="img/diskteka.png" width="200px" height="200px">
                <p>Somos uma plataforma de música eletrônica.</br>
                Faça parte desta comunidade, curta!</p>
            </div>
            <a href="#" class="button" style="font-family: 'Roboto', sans-serif;  text-decoration: none;">ENTRAR</a>&nbsp;
            <a href="#" class="button2" style="font-family: 'Roboto', sans-serif;  text-decoration: none;">SOBRE</a>

            </div>

        </section>
    </header>


    <canvas class="background"></canvas>
</body>
css

2 answers

1

Put has a plethora of ways to do this, in case I put the image as background to a pseudo element of cotainer. and went along with transfor:translate.

inserir a descrição da imagem aqui

.content {
    position: relative;
    width: max-content;
    margin: auto;
    text-align: center;
}
.content::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(0%, -50%);
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background-image: url(https://unsplash.it/100/100);
}
<header class="container">

<section class="content">
    <div class="container">
        <div style="text-align: center;font-family: 'Roboto', sans-serif;font-weight: bold">
            <img src="img/diskteka.png" width="200px" height="200px">
            <p>Somos uma plataforma de música eletrônica.<br>
            Faça parte desta comunidade, curta!</p>
        </div>
        <a href="#" class="button" style="font-family: 'Roboto', sans-serif;  text-decoration: none;">ENTRAR</a>&nbsp;
        <a href="#" class="button2" style="font-family: 'Roboto', sans-serif;  text-decoration: none;">SOBRE</a>

        </div>
    </section>
</header>


<canvas class="background"></canvas>

  • I’ll test it here

  • @Ricardogonçalves ok qq doubt me a touch

0

Add the image tag and use the position: Absolut property; and configure top and left as you like.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.