Imágenes responsive en "article".

Macflito · #1 (**permalink**) 03/04/2016, 09:23

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!!

C2am · #2 (**permalink**) 05/04/2016, 18:00

No entendí cual es el problema, pero parece funcionar bien.
https://jsfiddle.net/c2am/6e9zy7L6/

Si le dices que el primer articulo tenga una altura de 100% va a ocupar toda la pantalla, con lo cual el otro no se verá hasta que bajes con el scroll. Creo que esa podría ser una pista aunque no estoy seguro

Macflito · #3 (**permalink**) 06/04/2016, 12:45

Gracias por tu respuesta.
Tal vez no me explico bien. Lo que pretendo es algo muy simple -pero que yo no resuelvo-.
Simplemente dos "div" fluid y fulwidht con una imagen background cada uno de ellos, y con una respuesta global "responsive", es decir que en los diferentes @media query mantengan posición y proporciones.
Lo que he conseguido tiene una respuesta extrañísima: Al hacer scroll aparece la imagen del segundo div que se superpone al segundo... Si fuese eso lo que buscaba seguro que no lo conseguiría. Sí he probado a cambiar el "height" con diferentes valores, opciones y porcentajes, pero... sin éxito.
En resumen, sería más o menos esto, sin que el scroll l afecte:

Muchísimas gracias!!