Superponer texto en css

Club para webmasters Foros Creación de páginas web Superponer texto en css

Viendo 4 entradas - de la 1 a la 4 (de un total de 4)
  • Autor
    Entradas
  • #7852 Karma: 0
    Usuario-Chorri
    Participante
    81
    ChorriPuntos 36
    Nuevo

    Buenas chorris,

    Estaba creando un header animado para una de mis webs (al estilo del curso de la agencia online) y no soy capaz de poner el texto por encima del fondo (también hay que decir que no tengo ni idea de css).
    El código al que he llegado es el siguiente:

    .context {
    	width: 50%;
    	position: absolute;
    	top:250px;
    	left: 400px;
    }
    .context h1{
    	text-align: center;
    	color: #fff;
    	font-size: 50px;
    }
    @keyframes move_wave {
        0% {
            transform: translateX(0) translateZ(0) scaleY(1)
        }
        50% {
            transform: translateX(-25%) translateZ(0) scaleY(0.55)
        }
        100% {
            transform: translateX(-50%) translateZ(0) scaleY(1)
        }
    }
    .waveWrapper {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 60px;
        margin: auto;
    }
    .waveWrapperInner {
        position: absolute;
        width: 100%;
        overflow: hidden;
        height: 500px;
        bottom: ;
        background-image: linear-gradient(to top, #ffff2b 20%, #0c101b 80%);
    	; 
    }
    .bgTop {
        z-index: 15;
        opacity: 0.5;
    }
    .bgMiddle {
        z-index: 10;
        opacity: 0.75;
    }
    .bgBottom {
        z-index: 5;
    }
    .wave {
        position: absolute;
        left: 0;
        width: 200%;
        height: 100%;
        background-repeat: repeat no-repeat;
        background-position: 0 bottom;
        transform-origin: center bottom;
    }
    .waveTop {
        background-size: 50% 100px;
    }
    .waveAnimation .waveTop {
      animation: move-wave 3s;
       -webkit-animation: move-wave 3s;
       -webkit-animation-delay: 1s;
       animation-delay: 1s;
    }
    .waveMiddle {
        background-size: 50% 120px;
    }
    .waveAnimation .waveMiddle {
        animation: move_wave 10s linear infinite;
    }
    .waveBottom {
        background-size: 50% 100px;
    }
    .waveAnimation .waveBottom {
        animation: move_wave 15s linear infinite;
    }

    Y en el html tengo lo siguiente:

    <div class="context">
    	<h1>Texto</h1>
    		</div>
    <div class="waveWrapper waveAnimation">
      <div class="waveWrapperInner bgTop">
        <div class="wave waveTop" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png')"></div>
      </div>
      <div class="waveWrapperInner bgMiddle">
        <div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div>
      </div>
      <div class="waveWrapperInner bgBottom">
        <div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div>
      </div>
    </div>

    Ayudarme por favor, porque ya he probado todo lo que mi escaso conocimiento de programación ha pensado que podía arreglarlo.
    Gracias de antemano 🙂

    #7855 Karma: 0
    David Cuesta
    Superadministrador
    176
    ChorriPuntos 6.302
    Curso SEO
    ChorriCuesta

    Al elemento .waveWrapper añadele:
    z-index:1;

    Al elemento .context h1 añádele:
    z-index: 9;
    position: absolute;

    Y ya estaría 😀

    #7857 Karma: 0
    Usuario-Chorri
    Participante
    81
    ChorriPuntos 36
    Nuevo

    Muchas gracias David me hasarreglado el problema,

    A ver si subes ya el curso de html y css para no tener que hacer esta clase de preguntas 😜

    Un saludo

    #7858 Karma: 0
    David Cuesta
    Superadministrador
    176
    ChorriPuntos 6.302
    Curso SEO
    ChorriCuesta

    No sé si seré capaz de tener la primera parte para este domingo jeje

Viendo 4 entradas - de la 1 a la 4 (de un total de 4)
  • Debes estar registrado para responder a este debate.