Help to superimpose text in image

Question

Help to superimpose text in image

Navigation

#1 by (2 votes)

1

Good evening. I would like your help to put text from a certain .css class over an image.

You can better understand what I need to access the site Agência Stage , so on the first page we have the slogan

Communication and marketing

Accurate 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 put it on top of this image:

Maybe this will help them help me, so I'm leaving here my complete css too

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

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

NOTE: I left the topic with a lot of information redundancy, I apologize for this, I just could not find another way to specify what I need.

php html css imagem

asked by anonymous 17.05.2018 / 08:32

1 answer

Get the value of a radio button with Vanilla Javascript? How can I show certain products by clicking on a link to another page?

score 2 · Answer 1

Marcus you'll need to do little to work on 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 top:0 , however you will need to make a responsive treatment on it using @media so your layout does not break on small screens.

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

See the print as it was on Chrome Desktop