Como recién llegado al Foro, un saludo muy afectuoso para todos.
Y paso a plantear mi primer problema, y es que estoy absolutamente bloqueado con algo que aunque con seguridad será muy obvio, no consigo resolver.
El caso es que quiero comenzar una web con dos artículos responsive que irían tras el "header", conteniendo cada uno de ellos una imagen de fondo, y contenido diverso: enlaces, texto, etc. y el problema surge cuando al llegar al navegador, este solo me muestra el primero de los artículos, que sí es responsive y se ve muy bien, pero el segundo desaparece...
Os pongo a continuación tanto el HTML como el CSS para que por favor, alguien me indique en donde está el error que estoy cometiendo:
HTML
Código:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<article class="sup">
<div id="barranav">
<a href="http://www.linkficticio.com" target="blank">Sitio Ficticio</a>
</div>
<div class="texto">
<h1>Artículo Superior</h1>
<h3>Prueba de implementación de imágenes en "article".</h3>
</div>
</article>
<article class="inf">
<div id="barranav">
<a href="http://www.linkficiticio.com" target="blank">Sitio Ficticio</a>
</div>
<div class="texto">
<h1>Artículo Segundo</h1>
<h3>Prueba de implementación de imágenes en "article".</h3>
</div>
</article>
</body>
</html>
CSS
Código:
@charset "UTF-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html,body {
color:white;
font-family:'Opens Sans',helvetica;
height:100%;
width:100%;
margin: 0px;
}
#barranav {
padding: 10px 0px 10px 0px;
background: rgba(0,0,0,0.3);
color: #00bdff;
width: 100%;
text-align:center;
font-size:1.3em;
}
#barranav a {
padding: 10px;
border:none;
color: white;
color: #00bdff;
text-decoration: none;
}
.sup {
background: url(http://i86.servimg.com/u/f86/12/12/27/73/superi10.gif) no-repeat fixed top;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 100%;
width: 100% ;
text-align: center;
}
.inf {
background: url(http://i86.servimg.com/u/f86/12/12/27/73/inferi10.gif) no-repeat fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 100%;
width: 100% ;
text-align: center;
}
h1 {
color: #FFEC01;
font-weight: lighter;
font-size: 3rem;
}
h3 {
color: #FFEC01;
font-weight: lighter;
}
.texto {
margin: 30px 0px 30px 0px;
padding: 10px;
background: rgba(255,255,255,0.5);
display: inline-block;
}
Espero vuestras respuestas, pero desde este momento, mi agradecimiento.
Saludos!!