Aquí mi sandbox: https://codepen.io/joondoe/pen/vjyxqn

Aquí una imagen de la situación: ingrese la descripción de la imagen aquí

me pregunto por qué el primer "contenido increíble" no obtiene 300VH, y el siguiente texto parece superponerse en el primero?

Ojalá los dos divirvían uno tras otro, en cambio, se superponen puramente, ¿cómo es posible?

Me parece que he establecido una altura y ancho relevantes, el DIV es básicamente elemento de bloque por defecto,

Aquí mi fragmento:

 <!DOCTYPE html>
    <html>
    <head>
    	<title>seamless_background_test</title>
    	<style>
    		html,body{
    			margin:0;
    			padding:0;
    		}
    		.seamless_background{
    			min-height: auto;
    			width: 100%;
    			/*bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit*/
    			background: url(./seamless_background_test2a.jpg) center repeat ;
    
    			display: flex;
    			flex-direction: column;
    			justify-content: center;
    			align-items: center;
    		}
    
    		.content_container{
    			min-height: 300vh;
    			background: orange;
    			width: 75%;
    			margin:auto;  
    		}
    
    		.content h1{ 	 
    			padding:15px;
    			color:rgb(140, 49, 0);
    
    			display:flex;
    			justify-content: center;
    			align-items: center;
    		}
    
    		#wind_content{	
    			position:relative;		
    			
    			height: 100%;
    			width: 100%;
    
    			margin:auto;
    			top: 15vh;
    
    			background:rgba(255, 255, 255, 1);
    
    			font-style:Arial;
    			font-size: 1.5em; 
    
    			display:flex;
    			justify-content: center;
    			align-items: center;
    		}
    
    		
    
    		#grass_content{	
    			position:relative;		
    			height: 100%;
    			width: 100%;
    
    			margin:auto;
    			top: 15vh;
    
    			background:rgb(197, 245, 66);
    
    			font-style:Arial;
    			font-size: 1.5em; 
    
    			display:flex;
    			justify-content: center;
    			align-items: center;
    		}
    
    
    	</style>
    </head>
    <body>
    	<div class="seamless_background" >
    		<div id="wind_content" >
    			<div class="content_container">
    				<h1>I am an awesome content :)!<h2>
    			<div>
    		</div>
    
    		<div id="grass_content" >
    			<div class="content_container">
    				<h1>I am an awesome content :)!<h2>
    			<div>
    		</div>
    	<div>
    </body>
    </html>

Cualquier pista sería genial, gracias

-1
Webwoman 28 jun. 2019 a las 22:32

1 respuesta

La mejor respuesta

Parece que hay muchas etiquetas de apertura que no has cerrado.

Realmente no entendí sobre la palabra "superposición".

Pero he cerrado todas las etiquetas abiertas y creo que eso es lo que está buscando

<!DOCTYPE html>
    <html>
    <head>
    	<title>seamless_background_test</title>
    	<style>
    		html,body{
    			margin:0;
    			padding:0;
    		}
    		.seamless_background{
    			min-height: auto;
    			width: 100%;
    			/*bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit*/
    			background: url(./seamless_background_test2a.jpg) center repeat ;
    
    			display: flex;
    			flex-direction: column;
    			justify-content: center;
    			align-items: center;
    		}
    
    		.content_container{
    			min-height: 300vh;
    			background: orange;
    			width: 75%;
    			margin:auto;  
    		}
    
    		.content h1{ 	 
    			padding:15px;
    			color:rgb(140, 49, 0);
    
    			display:flex;
    			justify-content: center;
    			align-items: center;
    		}
    
    		#wind_content{	
    			position:relative;		
    			
    			height: 100%;
    			width: 100%;
    
    			margin:auto;
    			top: 15vh;
    
    			background:rgba(255, 255, 255, 1);
    
    			font-style:Arial;
    			font-size: 1.5em; 
    
    			display:flex;
    			justify-content: center;
    			align-items: center;
    		}
    
    		
    
    		#grass_content{	
    			position:relative;		
    			height: 100%;
    			width: 100%;
    
    			margin:auto;
    			top: 15vh;
    
    			background:rgb(197, 245, 66);
    
    			font-style:Arial;
    			font-size: 1.5em; 
    
    			display:flex;
    			justify-content: center;
    			align-items: center;
    		}
    
    
    	</style>
    </head>
    <body>
    	<div class="seamless_background" >
    		<div id="wind_content" >
    			<div class="content_container">
    				<h1>I am an awesome content :)!</h1>
    			</div>
    		</div>
    
    		<div id="grass_content" >
    			<div class="content_container">
    				<h1>I am an awesome content :)!</h1>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
1
Kareem Dabbeet 28 jun. 2019 a las 19:43