Help to overwrite text in image

Asked

Viewed 142 times

1

good night. I would like your help to place a text from a certain . css class on top of an image.

You can better understand what I need by accessing the site Stage agency, on the front page we have the slogan

Communication and marketing

right for every stage of your business.

I want to get this text whose code is 

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

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>

and place on top of this image: imagem por trás do texto

Maybe this will help you help me, so I’m leaving my full css here as well 

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

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: I know I left the topic with enough redundancy of information, I apologize for that, I just could not find another way to specify so well what I need.

php html css image

  • You tried to put the image as the background of a div and insert the text into that div? Off-topic You’d better post a printscreen of the site. So, it would be faster for the post reader.

  • is a good idea, I will try this and until tomorrow already put the result, thanks for the tip

1 answer

2

Marcus you will need to move little thing in CSS

In the logo class put this way, this will align it in the horizontal center of the page and leave a space of 140px from the top of the page, I left the comment in the code:

.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 */
}

Now the slogan, just put the top:0, but you will need to do a responsive treatment on it using @media for its layout not break into small screens.

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

See how it looks in print on Chrome Desktop

inserir a descrição da imagem aqui

  • Hi Hugo, I appreciate your help. But I don’t think you quite understand the purpose of the Rsrsrsrsrsrsrs question. I would like to put only the black element in the center of the page and the text on top of it. The logo is where it was, in the upper left corner

  • PS: when I say "put on top" is not on top of position, but rather, overlay, use the image as background, understand?

  • @Marcusvinicius I tried to look at it now and the Agencia site seems to be offline, so I can not help you, but if the silence comes back to air I try to see what to do. But if I remember the logo (text + symbol) was a . png only, you will have to separate the logo into two image, one with the text and the other with the symbol and align them. If that’s what I understood you want...

Browser other questions tagged php html css image

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