1

boa noite. Gostaria da ajuda de vocês para colocar um texto de determinada classe do .css em cima de uma imagem.

Vocês poderão entender melhor o que eu preciso acessando o site Agência Stage, logo na primeira página temos o slogan

Comunicação e marketing

certeiros para cada estágio do seu negócio.

Eu quero pegar este texto cujo o código é

/* ..................................... 

Google Font

..................................... */
@import url('https://fonts.googleapis.com/css?family=Quattrocento');

/* ..................................... 

Padrões

..................................... */

body{
    font-family: 'Quattrocento', serif !important;
}

:root {
    --cor1: #242526;
    --cor2: #3D3E40;
    --cor3: #F2EFE9;
    --cor4: #A6A29C;
    --cor5: #FFBB00;
}

.logo{
    position: absolute;
    z-index: 2;
    padding: 30px;
}
canvas{
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    background-image: url(imagens/1920.jpg);
    background-size: cover;
}

.clear50x{ height: 50px; }
.clear100x{ height: 100px; }

/* ..................................... 

loader

..................................... */

#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 100;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 2px solid var(--cor3);
    border-radius: 50%;
    border-top: 2px solid var(--cor5);
    width: 120px;
    height: 120px;
    -webkit-animation: spin .6s linear infinite;
    animation: spin .6s linear infinite;
}
#loader-bg {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: var(--cor5);
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ..................................... 

navegação

..................................... */

.toggle{
    width: 100%;
    text-align: right;
    position: fixed;
    z-index: 10;
    padding: 38px;
}
.navigation-mobile{
    width: 100%;
    height: 100vh;
    z-index: 99 !important;
    position: absolute;
    background-color: var(--cor3);
    padding: 35px;
}
.navigation-mobile a{ 
    font-size: 50px; 
    color: var(--cor1);
    transition: color .5s ease-out;
    -moz-transition: color .5s ease-out;
    -webkit-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
}
.navigation-mobile a:hover{  
    color: var(--cor5);
    transition: color .5s ease-out;
    -moz-transition: color .5s ease-out;
    -webkit-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
}
.back{
    width: 100%;
    z-index: 99 !important;
    position: absolute;
    text-align: right;
    padding: 35px;
}

/* ..................................... 

home

..................................... */

.slogan{
    position: absolute;
    width: 100%;
    z-index: 3;
    text-align: center;
    top: 40%;
}
.super{
    font-size: 80px;
    color: wheat;
}
.sub-super{
    font-size: 40px;
    color: floralwhite;
    margin-top: -25px;
}
footer{
    text-align: right;
    width: 100%;
    z-index: 2;
    position: absolute;
    bottom: 0;
    padding: 40px;
}
footer ul li{ display: inline; padding: 5px;}
#icons{ width: 4%;}

/* ..................................... 

fade + tab

..................................... */

#fechar{
    width: 100%;
    text-align: right;
    font-size: 90px;
    padding: 20px;
    margin-top: -50px;
    cursor: pointer;
}
#fade{
    width: 100%;
    height: 100%;
    background-color: black;
    position: absolute;
    z-index: 4;
    opacity: 0;
    display: none;
}

/* ..................................... 

quem somos

..................................... */

#section1{
    width: 85%;
    height: 100%;
    background-color: var(--cor5);
    position: absolute;
    z-index: 5;
    opacity: 0;
    left: -2000px;
}
#quemsomos{
    margin-top: -60px;
    text-align: justify;
    position: absolute;
    padding-left: 60px;
    padding-right: 140px;
    font-size: 20px;
    color: var(--cor1);
}

/* ..................................... 

portfolio
..................................... */

.bg-portfolio{
    background-image: url(imagens/bg-portfolio.jpg);
    background-attachment: fixed;
    background-size: cover;
}

.portfolio-menu li{ display: inline; padding: 10px; font-size: 20px; }
.portfolio-menu a{ background-color: black; padding: 10px;}

#socialmedia, #apps{ color: #666; }

.thumb-portfolio{
    text-align: center;
    padding-right: 80px;
    padding-left: 80px;
}
.thumb-portfolio img{
    border-radius: 20px;
}
.thumb-portfolio a{

}

@keyframes goToOpacity {
    from { opacity: 1; }
    to {   opacity: .2; }
}

.thumb-portfolio a:hover{
    animation-name: goToOpacity;
    animation-duration: .2s;
    animation-iteration-count: infinite;
}

.credits{
    padding: 100px;
    width: 100%;
    height: auto;
    background-color: var(--cor1);
}

.credits p{
    color: var(--cor4) !important;
}

@media screen and (orientation: portrait) {
    .credits{
        padding: 10px;
    }
    .thumb-portfolio{
        text-align: center;
        padding-right: 0px;
        padding-left: 0px;
    }
}

/* ..................................... 

mobile

..................................... */

@media screen and (orientation: portrait) { 
    #section1{  width: 100%; height: 100vh; }
    #quemsomos{ padding-left: 0px; padding-right: 0px; padding: 30px; }

    .logo{ width: 70%; }
    .navigation-mobile a{ font-size: 30px; }

    .super{     font-size: 30px; color: wheat; }
    .sub-super{ font-size: 20px; color: floralwhite; margin-top: -10px; }

    #emc2-image{ display: none; }
    .toggle{ display: block; }
    #icons{ width: 20%; }
    footer{ text-align: center; }
}
<div class="slogan">
            <h1 class="super">Comunicação e Marketing</h1>
            <h1 class="sub-super">certeiros para cada estágio do seu negócio.</h1>
        </div>

e colocar em cima desta imagem: imagem por trás do texto

Talvez isto os ajude a me ajudar, então estou deixando aqui o meu css completo também

/* ..................................... 

Google Font

..................................... */
@import url('https://fonts.googleapis.com/css?family=Quattrocento');

/* ..................................... 

Padrões

..................................... */

body{
    font-family: 'Quattrocento', serif !important;
}

:root {
    --cor1: #242526;
    --cor2: #3D3E40;
    --cor3: #F2EFE9;
    --cor4: #A6A29C;
    --cor5: #FFBB00;
}

.logo{
    position: absolute;
    z-index: 2;
    padding: 30px;
}
canvas{
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    background-image: url(imagens/1920.jpg);
    background-size: cover;
}

.clear50x{ height: 50px; }
.clear100x{ height: 100px; }

/* ..................................... 

loader

..................................... */

#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 100;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 2px solid var(--cor3);
    border-radius: 50%;
    border-top: 2px solid var(--cor5);
    width: 120px;
    height: 120px;
    -webkit-animation: spin .6s linear infinite;
    animation: spin .6s linear infinite;
}
#loader-bg {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: var(--cor5);
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ..................................... 

navegação

..................................... */

.toggle{
    width: 100%;
    text-align: right;
    position: fixed;
    z-index: 10;
    padding: 38px;
}
.navigation-mobile{
    width: 100%;
    height: 100vh;
    z-index: 99 !important;
    position: absolute;
    background-color: var(--cor3);
    padding: 35px;
}
.navigation-mobile a{ 
    font-size: 50px; 
    color: var(--cor1);
    transition: color .5s ease-out;
    -moz-transition: color .5s ease-out;
    -webkit-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
}
.navigation-mobile a:hover{  
    color: var(--cor5);
    transition: color .5s ease-out;
    -moz-transition: color .5s ease-out;
    -webkit-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
}
.back{
    width: 100%;
    z-index: 99 !important;
    position: absolute;
    text-align: right;
    padding: 35px;
}

/* ..................................... 

home

..................................... */

.slogan{
    position: absolute;
    width: 100%;
    z-index: 3;
    text-align: center;
    top: 40%;
}
.super{
    font-size: 80px;
    color: wheat;
}
.sub-super{
    font-size: 40px;
    color: floralwhite;
    margin-top: -25px;
}
footer{
    text-align: right;
    width: 100%;
    z-index: 2;
    position: absolute;
    bottom: 0;
    padding: 40px;
}
footer ul li{ display: inline; padding: 5px;}
#icons{ width: 4%;}

/* ..................................... 

fade + tab

..................................... */

#fechar{
    width: 100%;
    text-align: right;
    font-size: 90px;
    padding: 20px;
    margin-top: -50px;
    cursor: pointer;
}
#fade{
    width: 100%;
    height: 100%;
    background-color: black;
    position: absolute;
    z-index: 4;
    opacity: 0;
    display: none;
}

/* ..................................... 

quem somos

..................................... */

#section1{
    width: 85%;
    height: 100%;
    background-color: var(--cor5);
    position: absolute;
    z-index: 5;
    opacity: 0;
    left: -2000px;
}
#quemsomos{
    margin-top: -60px;
    text-align: justify;
    position: absolute;
    padding-left: 60px;
    padding-right: 140px;
    font-size: 20px;
    color: var(--cor1);
}

/* ..................................... 

portfolio
..................................... */

.bg-portfolio{
    background-image: url(imagens/bg-portfolio.jpg);
    background-attachment: fixed;
    background-size: cover;
}

.portfolio-menu li{ display: inline; padding: 10px; font-size: 20px; }
.portfolio-menu a{ background-color: black; padding: 10px;}

#socialmedia, #apps{ color: #666; }

.thumb-portfolio{
    text-align: center;
    padding-right: 80px;
    padding-left: 80px;
}
.thumb-portfolio img{
    border-radius: 20px;
}
.thumb-portfolio a{

}

@keyframes goToOpacity {
    from { opacity: 1; }
    to {   opacity: .2; }
}

.thumb-portfolio a:hover{
    animation-name: goToOpacity;
    animation-duration: .2s;
    animation-iteration-count: infinite;
}

.credits{
    padding: 100px;
    width: 100%;
    height: auto;
    background-color: var(--cor1);
}

.credits p{
    color: var(--cor4) !important;
}

@media screen and (orientation: portrait) {
    .credits{
        padding: 10px;
    }
    .thumb-portfolio{
        text-align: center;
        padding-right: 0px;
        padding-left: 0px;
    }
}

/* ..................................... 

mobile

..................................... */

@media screen and (orientation: portrait) { 
    #section1{  width: 100%; height: 100vh; }
    #quemsomos{ padding-left: 0px; padding-right: 0px; padding: 30px; }

    .logo{ width: 70%; }
    .navigation-mobile a{ font-size: 30px; }

    .super{     font-size: 30px; color: wheat; }
    .sub-super{ font-size: 20px; color: floralwhite; margin-top: -10px; }

    #emc2-image{ display: none; }
    .toggle{ display: block; }
    #icons{ width: 20%; }
    footer{ text-align: center; }
}

OBS: sei que deixei o tópico com bastante redundância de informações, peço desculpas por isso, apenas não consegui encontrar outra maneira de especificar tão bem o que eu necessito.

2
  • Você tentou colocar a imagem como background de uma div e inserir o texto nessa div? Off-topic Seria melhor você postar um printscreen do site. Assim, seria mais rápido para o leitor do post. Commented 17/05/2018 às 8:57
  • é uma boa ideia, tentarei isto e até amanhã ja posto o resultado, valeu pela dica Commented 20/05/2018 às 6:18

1 Resposta 1

2

Marcus vc vai precisar mexer pouca coisa no CSS

Na classe do logo coloque dessa forma, isso vai alinhar ela no centro horizontal da página e deixar um espaço de 140px do topo da página, deixei o comentário no código:

.logo {
    position: absolute;
    z-index: 2;
    padding: 30px;
    top: 140px; /* altura do topo da página */
    left: 50%; /* classe para centralizar no meio horizontal */
    transform: translateX(-50%); /* classe para centralizar no meio horizontal */
}

Agora o slogan, basta colocar o top:0, porém vc vai precisar fazer um tratamento responsivo nele usando @media para o seu layout não quebrar em telas pequenas.

.slogan {
    position: absolute;
    width: 100%;
    z-index: 3;
    text-align: center;
    top: 0; /* altura do topo da página */
}

Veja no print como ficou no Chrome Desktop

inserir a descrição da imagem aqui

3
  • Oi Hugo, agradeço sua ajuda. Porém acho que você não entendeu bem o propósito da questão rsrsrsrsrs. Eu gostaria de colocar apenas o elemento preto no centro da pagina e o texto em cima deste. A logo fica onde estava, no canto superior esquerdo Commented 20/05/2018 às 6:04
  • PS: quando eu digo "colocar em cima" não é em cima de posição, mas sim, sobreposição, usar a imagem como fundo, entende? Commented 20/05/2018 às 6:19
  • @MarcusVinicius tentei olhar agora e o site da Agencia parece que está offline, ai não da pra eu te ajudar, mas se o silte voltar pro ar eu tento ver o que da pra fazer. Mas se me lembro a logo (texto + simbolo) era um .png só, vc vai ter que separar a logo em duas imagem, uma com o texto e outra com o simbolo e alinha-las. Se é o que eu entendi que vc quer...
    – hugocsl
    Commented 21/05/2018 às 18:48

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 .