0

al poner position absolute a la imagen de fondo y position relative al texto delante no funciona no se posiciona el texto delante de la imagen:

.imagen-fondo1{
	position: relative;
}
.imagen-fondo2{
	position: relative;
}

.texto-denlante1{
	position: absolute;
	text-align: center;
	bottom: 50px;
}
.texto-denlante2{
	position: absolute;
	text-align: center;
	bottom: 50px;
}

body {
    font-family: 'PT Sans', sans-serif;
    font-size: 14px;
    line-height: 1.8em;
    font-weight: 400;
    background: #ffffff;
}
*{
	box-sizing: border-box;
}
.wrapper{
	width: 1349px;
	margin: 0 auto;
}
/*barra arriba*/
.barra-arriba{
	background-color: #000000;
}
.barra-izquierda{
	float: left;
	margin-left: 20px;
	padding-top: 10px;
}
.barra-izquierda ul li{
	display: inline-block;
	vertical-align: top;
}
.barra-izquierda ul li a{
	text-decoration: none;
	color: #ffff;
	margin-right: 15px;

}
.barra-derecha{
	float: right;
	padding-top: 10px;
    padding-bottom: 10px;
}
.barra-derecha a{
	float: right;
	color: #ffff;
	text-decoration: none;
	margin-right: 15px;
}

.fa-user{
    font-size: 12px;
    color: #2dcc70;
    margin-right: 6px;
	}
.fa-lock{
    font-size: 12px;
    color: #2dcc70;
    margin-right: 6px;
	}
.fa-shopping-cart{
    font-size: 16px;
    color: #2dcc70;
    margin-right: 6px;
	}

/*Header*/
.header{
	background-color:#2dcc70;
	padding-top: 40px;
    padding-bottom: 116px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    color: #ffff;
    width: 1349px;
}
.wraper-header{
	background-color: transparent;
    width: 1250px;
    margin: 0 auto;
}
.header h2{
	margin-top: 103px;
    font-size: 40px;
    line-height: 53px;
}
.izquierda{
	float: left;
	display: inline-block;
	margin-bottom: 15px;
	font-size: 25px;
    line-height: 23px;
    font-weight: 700;
}
.derecha{
	float: right;
	font-weight:700;
	font-size: 14px;
	margin-top: 12px;
}
.derecha li a{
	text-decoration: none;
	color: #fff;
}
.derecha li a:hover{
	color: black;
}
.derecha li {
	display: inline-block;
	vertical-align: top;
	margin-right: 15px;
}
.texto-centro{
	font-weight: 400;
	margin-bottom: 40px;
}
.search-form_submit{
	padding-top: 13px;
	padding-bottom: 14px;
	padding-right: 19px;
	padding-left: 19px;
	color: #ffff;
    background-color:#333333FF;
    border: none;
    cursor: pointer;
}
.search-form_submit:hover{
	color:#2dcc70;
	background-color: #4d4d4d;
}

.search-form-label{
	padding: 11px 40px 11px 10px;
    background: #fff;
}
.search-form-input{
	padding: 11px 40px 11px 10px;
    background: #fff;
    border: none;
}
.fa-search{
	color: #C2C2C2FF;
	font-size: 12px;
	margin-right: 10px;
}
.parrafo1{
	margin-top: 42px;
}
.limpiador{
	clear: both;
}
/*paisaje*/
.paisaje{
	width: 1250px;
	margin:0 auto;
	padding-top: 50px;
	padding-bottom: 31px;
}
.primera-parte{
	display: inline-block;
	vertical-align: top;
	width: 436px;
	margin-right: 159px;
}
.segunda-parte{
  display: inline-block;
  vertical-align: top;
  width: 436px;
  margin-right: 10px;
}
.imagen-fondo1{
	position: relative;
}
.imagen-fondo2{
	position: relative;
}

.texto-denlante1{
	position: absolute;
	text-align: center;
	bottom: 50px;
}
.texto-delante1 a{
    padding: 14px 19px;
    color: #fff;
    background-color: #2dcc70;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}
.texto-denlante2{
	position: absolute;
	text-align: center;	
}
.texto-delante2 a{
    padding: 14px 19px;
    color: #fff;
    font-size: 14px;
    background-color: #2dcc70;
    text-decoration: none;
    font-weight: 700;

}
.texto-delante2 a:hover{
    background-color: ;
}
.parte1,.parte2,.parte3,.parte4{
  display: inline-block;
  vertical-align: top;
  width: 28%;
  margin-right: -50px;
  }
 .parte1 a,.parte2 a,.parte3 a,.parte4 a{
     color: #2dcc70
 } 
 .parte1 a:hover,.parte2 a:hover,.parte3 a:hover,.parte4 a:hover{
     color: #6D8E7BFF;
 } 
  .listas{
  	width: 1349px;
  	margin: 0 auto;
}
.wrapper-listas{
	width: 1250px;
	margin: 0 auto;
}
.wrapper-listas h4{
	font-size: 25px;
    line-height: 53px;
    text-align: center;
}
.wrapper-listas .lista1{
	    width: 270px;
}
.lista1 ul li{
	    display: inline-block;
	    vertical-align: top;
}
 .lista ul li a{
    font-size: 15px;
    line-height: 33px;
    color: #2dcc70;
    text-decoration: none;
}
 
.pie-de-pagina{
	background-color: #333333;
	color: #878787FF;
	padding-top: 42px;
    padding-bottom: 20px;
    width: 1349px;
    margin: 0 auto;
	}
.wrapper-footer{
	background-color: transparent;
	color: #878787FF;
    width: 1250px;
    margin: 0 auto;
	}
.pie-de-pagina h4{
	font-size: 25px;
    line-height: 53px;
    color: #ffff;
    margin-bottom: 10px;
	}
.footer1,.footer2,.footer3,.footer4{
	display: inline-block;
	vertical-align: top;
	margin-right: 30px;
	}

.imagen-izquierdo1,.imagen-izquierdo2,.imagen-izquierdo3{
  float: left;
}
.contenido-derecho1,.contenido-derecho2,.contenido-derecho3{
  float: right;
  margin-left: 10px;
}

.tiempo1,.tiempo2,.tiempo3{
  color:#2dcc70;
  margin-bottom: 8px;
}
<!DOCTYPE html>
<html>
<head>
    
		<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/estilo.css">
	</title>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.12';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="wrapper">
<div class="barra-arriba">
	<nav class="barra-izquierda">
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">About</a></li>
			<li><a href="">Services</a></li>
			<li><a href="">News</a></li>
			<li><a href="">Contacts</a></li>
		</ul>
	</nav>
	<div class="barra-derecha">
		<a href=""><i class="fas fa-shopping-cart"></i></a>
		<a href=""><i class="fas fa-user"></i>Creata an Account</a>
		<a href=""><i class="fas fa-lock"></i>Login</a>
	</div>
	<div class="limpiador"></div>
</div>	
<header class="header">
	<div class="wraper-header">
	<div class="izquierda">
		<h1><img src="imagenes/logo.png">image bank</h1>
	</div>
	<ul class="derecha">
		<li><a href="">CREATIVE</a></li>
		<li><a href="">EDITORIAL</a></li>
		<li><a href="">VIDEO</a></li>
		<li><a href="">MUSIC</a></li>
	</ul>
<div class="limpiador"></div>
<h2 class="texto-centro">Photoblog with premium collection of<br>
photos, vectors and videos</h2>
<form class="formulario-busqueda"  method="get" accept-charset="utf-8">
	<label class="search-form-label">
		<i class="fas fa-search"></i><input class="search-form-input" type="text" name="s" autocomplete="off" placeholder="Search for photos, vectors and videos">
	</label>
	<button class="search-form_submit" type="submit">SEARCH</button>
</form>
<p class="parrafo1">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
</div>
</header>
<section class="paisaje">
	<div class="primera-parte">
	   	<img class="imagen-fondo1" src="imagenes/imagen1.jpg">
	  <div class="texto-delante1">
	  	<h3>Creative images</h3>
	  	<p>
          Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
              <a class="boton1" href="">SEE ALL CATEGORIES</a>
	  </div>	
	</div>
	<div class="segunda-parte">
	   	<img class="imagen-fondo2" src="imagenes/imagen2.jpg">
	  <div class="texto-delante2">
	  	<h3>Top photos</h3>
	  	<p>
          Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a class="boton2" href="">SEE ALL CATEGORIES</a>
	  </div>
	  <div class="limpiador"></div>
	</div>
<div class="galeria">
	<div class="parte1">
		<div class="imagen1">
			<img src="imagenes/imagen3.jpg">
		</div>
		<h3>Stock Photos</h3>
		<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempo.</p>
		<a class="boton3" href="">SEE ALL CATEGORIES</a>
	</div>
	<div class="parte2">
		<div class="imagen2">
			<img src="imagenes/imagen4.jpg">
		</div>
		<h3>Vector Art</h3>
		<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempo.</p>
		<a class="boton4" href="">SEE ALL CATEGORIES</a>
	</div>
	<div class="parte3">
		<div class="imagen3">
			<img src="imagenes/imagen5.jpg">
		</div>
		<h3>HD Movies</h3>
		<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempo.</p>
		<a class="boton5" href="">SEE ALL CATEGORIES</a>
	</div>
	<div class="parte4">
		<div class="imagen4">
			<img src="imagenes/imagen6.jpg">
		</div>
		<h3>Editorial images</h3>
		<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempo.</p>
		<a class="boton6" href="">SEE ALL CATEGORIES</a>
	</div>
</div>
</section>
   <section class="listas">
   	<div class="wrapper-listas">
   	<h4>Browse top image categories</h4>
    <div class="lista">
	<ul>
		<li><a href="">Abstract</a></li>
		<li><a href="">Art Objects</a></li>
		<li><a href="">Architecture</a></li>
		<li><a href="">Business and Finance</a></li>
		<li><a href="">Cities</a></li>
		<li><a href="">Scenery</a></li>
	</ul>
   </div>
   <div class="lista">
    <ul>
		<li><a href="">Jewelry</a></li>
		<li><a href="">Food and Drink</a></li>
		<li><a href="">Animals</a></li>
		<li><a href="">Signs and Symbols</a></li>
		<li><a href="">Celebrities</a></li>
		<li><a href="">Illustrations</a></li>
	</ul>
</div>
   <div class="lista">
	<ul>
		<li><a href="">Tools</a></li>
		<li><a href="">Interiors</a></li>
		<li><a href="">Concepts</a></li>
		<li><a href="">Beauty & Fashion</a></li>
		<li><a href="">People</a></li>
		<li><a href="">Medicine</a></li>
	</ul>
</div>
<div class="lista">
	<ul>
		<li><a href="">Science</a></li>
		<li><a href="">Education</a></li>
		<li><a href="">Objects</a></li>
		<li><a href="">Purchase</a></li>
		<li><a href="">Holidays and Events</a></li>
		<li><a href="">Nature</a></li>
	</ul>
  </div>
	<a class="boton7" href="">SEE ALL CATEGORIES</a>
</div>
   </section>
   <footer class="pie-de-pagina">
   	<div class="wrapper-footer">
   <div class="footer1">
   	<h4>About</h4>
   	<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempor<br>incididunt ut labore et dolore magna aliqua. Ut<br>enim ad minim veniam, quis nostrud ullamco<br>laboris nisi ut aliquip ex ea commodo<br>consequat. Duis aute irure dolor in reprehenderi.</p>
   	<p>Dolor sit amet conse ctetur adipisicing elit, sed<br>do eiusmod tempor incididunt ut labore et <br>dolore magna aliqua. Ut enim ad minim veniam,<br> quis nostrud exercitation ullamco laboris nisi ut<br>aliquip ex ea commodo consequat. Duis aute<br>irure dolor in reprehenderi.</p>
   </div>
   <div class="footer2">

   	<h4>Latest News</h4>
   	<img class="imagen-izquierdo1" src="imagenes/footer1.jpg">
   	<div class="contenido-derecho1">
   	<time class="tiempo1" datetime="2018-01-22" pubdate>2018-01-22</time>
   	<p><a href="">Lorem ipsum dolor sit amet<br>conse ctetur adipisic</a></p>
   </div>
   <div class="limpiador"></div>

    <img class="imagen-izquierdo2" src="imagenes/footer2.jpg">
   <div class="contenido-derecho2">
   	<time class="tiempo2" datetime="2018-01-22" pubdate>2018-01-22</time>
   	<p><a href="">Lorem ipsum dolor sit amet<br>conse ctetur adipisic</a></p>
   </div>
   <div class="limpiador"></div>

   	<img class="imagen-izquierdo3" src="imagenes/footer3.jpg">
   <div class="contenido-derecho3">
   	<time class="tiempo3" datetime="2018-01-22" pubdate>2018-01-22</time>
   	<p><a href="">Lorem ipsum dolor sit amet<br>conse ctetur adipisic</a></p>
   </div>
   <div class="limpiador"></div>
   </div>	

   <div class="footer3">
   	<h4>Latest News</h4>
   	<h5>Lorem ipsum dolor sit amet cons</h5>
   	<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempor<br>incididunt ut labore et dolore magna aliqua.</p>

   	<h5>Lorem ipsum dolor sit amet cons</h5>
   	<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempor<br>incididunt ut labore et dolore magna aliqua.</p>
   </div>	
   <div class="footer4">
   	<h4>Facebook</h4>
    	<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FTemplateMonster%2F&tabs=timeline&width=270px&height=230px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="270px" height="230px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
   </div>
   </div>
   </footer>
</div>
</body>
</html>

5
  • no hay imagen como para verificar tu problema
    – LPZadkiel
    el 27 mar. 2018 a las 20:40
  • como haago para subir la imagen si esta en mi pc ya que aca no me deja el 27 mar. 2018 a las 20:52
  • 1
    podrías usar cualquier imagen que encuentres en internet y reemplazar en el atributo src de la imagen por la ruta de la imagen que encuentres en internet
    – LPZadkiel
    el 27 mar. 2018 a las 20:59
  • Sería mejor si solo pones el código necesario para reproducir el problema y enlazas una imagen que podamos ver como te dice @LPZadkiel
    – user7176
    el 28 mar. 2018 a las 6:49
  • tienes la clase mal escrita, pone denlante. Además la posición absoluta es respecto al elemento padre posicionado más cercano, así que el position: relative se lo deberías poner al div que engloba a la imagen y al texto y no a la imagen.
    – user7176
    el 28 mar. 2018 a las 10:43

1 respuesta 1

1

Te adjunto un ejemplo en el que se coloca una imagen de fondo y el texto encima. Espero te sirva de orientación.

En general, el absolute hace que un elemento se 'desenganche' del flujo normal del documento y se posicione en relación al primer ascendente que tenga posición relative o absolute.

Salu2

body {
  background-color: #a3d5d3;
}
#content{
  position:relative;
  max-width:1125px;
  height:auto;
}
img.debajo{
  display:block;
  position:absolute;
  z-indez:1;
  width:100%;
  height:auto;
}
div.texto{
  position:relative;
  z-indez:2;
  top:100px;
  width:100%;
  text-align:center;
  color:#fff;
  font-size:30px;
}
<div id="content">
  <img class="debajo" src="//images.pexels.com/photos/797643/pexels-photo-797643.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"/>
  <div class="texto">Texto encima</div>  
</div>

3
  • no me funciona que raro :"( el 27 mar. 2018 a las 20:18
  • Perdona pero ayer era un poco tarde para mi y no pude contestarte. A que te refieres con lo de que no te funciona?
    – cancrexo
    el 28 mar. 2018 a las 22:57
  • osea lo pongo igual como me dices y sigue sin funcionar el 5 abr. 2018 a las 18:04

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.