0

Eu gostaria de por uma imagem do lado direito da tela de login do site que estou criando. Abaixo com a imagem fica mais fácil de entender. inserir a descrição da imagem aqui

gostaria que uma imagem ficasse 'flutuando' ali com css, onde eu atualizaria essa imagem quando necessário.

Penso que deveria usar o z-index talvez, mas não sei como fazer isso sem alterar o layout da página. meu código:

<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>

2 Respostas 2

1

Coloca tem uma infinidade de formas de fazer isso, no caso eu coloquei a imagem como background de um pseudo elemento do cotainer. e alinhei com 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>

2
  • vou testar aqui Commented 13/09/2019 às 19:30
  • @RicardoGonçalves ok qq dúvida me da um toque
    – hugocsl
    Commented 13/09/2019 às 19:36
0

Adiciona a tag de imagem e utiliza a propriedade position: absolut; e configura top e left como quiser.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .