5

Quiero que mi proyecto tenga la siguiente apariencia:

introducir la descripción de la imagen aquí

Actualmente, tengo el código para que la imagen aparezca tantas veces como la ponga, es decir:

<div class="flex-container contenido">  

    <div style="flex-grow: 1">

        <p class="lateral">
            <img src="../imagenes/lateral.jpg">
            <img src="../imagenes/lateral.jpg">
            <img src="../imagenes/lateral.jpg">
            <img src="../imagenes/lateral.jpg">
            <img src="../imagenes/lateral.jpg">
        </p>

    </div>

    <div style="flex-grow: 8"> 

    </div>

    <div style="flex-grow: 1">

        <p class="lateral">
            <img src="../imagenes/lateral.jpg">
            <img src="../imagenes/lateral.jpg">
            <img src="../imagenes/lateral.jpg">
            <img src="../imagenes/lateral.jpg">
            <img src="../imagenes/lateral.jpg">
        </p>

    </div>

</div>

El problema es que esto es poco eficaz, ya que tengo que estar comprobando cuándo seguir repitiendo o cuándo parar.

He probado a poner una clase "lateral" con el siguiente código:

.lateral {
  background-image: url(../imagenes/lateral.jpg);
  background-size: 100px 80px;
}

Pero no aparece a menos que ponga algún tipo de texto ahí, y eso no es lo que pretendo conseguir.

Probé a poner un background al body y luego poner un background-color al flexbox, pero ni siquiera se efectúa.

body {
    font-family: Verdana;
    width: 100%;
    height: 100%;
    background-image: url(../imagenes/lateral.jpg);
    background-size: auto;
    background-repeat: space;
}

Dejo mi código entero por aquí

/* GENERAL */      
      
::-moz-selection {
  color: white;
  background: #8d33ff;;
}

::selection {
  color: white;
  background: #8d33ff;;
}

body {
	font-family: Verdana;
	width: 100%;
	height: 100%;
    background-image: url(../imagenes/lateral.jpg);
    background-size: auto;
    background-repeat: space;
}

/* ESTRUCTURA */

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: none;
}

.flex-container > div {
  background-color: none;
  color: black;
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
}

.portada{
  background-image: url(./imagenes/portada_debian.png), url(./imagenes/portada_linux.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left, right;
  width: 100%;
  height: 150px;
  margin: 5px;
}

.contenido {
	background-color: none;
	float: left;
	width: 100%;
	padding: 15px;
	margin-top: 7px;
	text-align: center;
}

/* MENÚ */

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
  float: left;
	text-align: center;
  margin: 5px;
}

.navbar a {
  float: left;
  padding: 14px 16px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #000;
}

.active {
  background-color: #4CAF50;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}


  
/* TEXTO LATERAL */

.lateral {
  background-image: url(../imagenes/lateral.jpg);
  background-size: 100px 80px;
}

/* MOMENTOS INOLVIDABLES */

.container {
  position: relative;
  width: 100%;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

/* GRID */

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

.column img {
  margin-top: 12px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* TEXTO EN IMÁGENES */

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


/* ESTRUCTURA IMÁGENES */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.grid {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(var(--columnas), 1fr);
  width: calc(100% - 20px);
  max-width: 1200px;
  gap: 10px;
}

.grid__item {
  padding-top: 85%;
  position: relative;
  border: 1px solid;
}

.grid__img {
  --object-fit: cover;
  --object-position: center center;
  display: block;
  top: 0;
  bottom: 0;
  object-fit: var(--object-fit);
  object-position: var(--object-position);
  height: 100%;
  width: 100%;
}

.grid__img,
.caption {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

@media screen and (min-width: 600px) {
  .grid {
    --columnas: 3;
  }
}

@media screen and (min-width: 400px) and (max-width:599px) {
  .grid {
    --columnas: 2;
  }
}

@media screen and (max-width: 399px) {
  .grid {
    --columnas: 1;
  }
}

.caption {
  background-color: rgba(255, 255, 255, 0.5);
  top: auto;
  bottom: 0;
  min-height: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  padding: 0 10px;
  max-height: 100%;
}

.limpiar {
  clear: both;
}

/* ICONOS */

.material-icons{
  font-size: 24px;
  color: white;
  vertical-align: middle;
}

/* IMÁGENES */

img {
  max-width: 100%;
  height: auto;
}

div.img {
  border: 1px solid #ccc;
  background-color: white;
  overflow: hidden;
}

div.img:hover {
    border: 1px solid #777;
}

/* IMAGEN HERO */
.hero-image {
  background-image: url("https://dam.ngenespanol.com/wp-content/uploads/2019/10/perros-personalidad-2.jpg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.peque {
    font-size: 10px;
}
<!-- PORTADA Y MENÚ -->
<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  
  <link rel="stylesheet" href="../style.css">

</head>

<body>
  
<!-- PORTADA -->  
  
<div class="flex-container portada">

  <div style="flex-grow: 10">

  </div>
  
</div>

<!-- MENÚ -->

<div class="navbar">

  <a href="../index.php">
      <i class="material-icons">home</i>Inicio</a>
 
</div>

<!-- CONTENIDO -->

<div class="flex-container contenido">	

	<div style="flex-grow: 1">
	    	
		<p class="lateral">
		    <img src="../imagenes/lateral.jpg">
		    <img src="../imagenes/lateral.jpg">
		    <img src="../imagenes/lateral.jpg">
		    <img src="../imagenes/lateral.jpg">
            <img src="../imagenes/lateral.jpg">
        </p>
            
    </div>
    
	<div style="flex-grow: 8"> 
    
	</div>
	
	<div style="flex-grow: 1">
	    	
		<p class="lateral">
		    <img src="../imagenes/lateral.jpg">
		    <img src="../imagenes/lateral.jpg">
		    <img src="../imagenes/lateral.jpg">
		    <img src="../imagenes/lateral.jpg">
            <img src="../imagenes/lateral.jpg">
        </p>
            
    </div>
  
</div>

</body>

</html>

Básicamente, tengo una carpeta para cada entrada de la web, y las imágenes las tengo guardadas en la carpeta imagenes que se encuentra en la raiz.

¿Hay alguna forma de hacer que el background se adapte al contenido de la página? Ya que es poco productivo tener que estar poniendo a mano la imagen hasta que sea necesario, ya no por productividad, si no que en otros dispositivos puede verse alterado esto.

7
  • 1
    Has probado con background: url(../imagenes/lateral.jpg);? Commented el 5 mar. 2020 a las 8:23
  • 1
    ¿Has probado la página en algún sitio donde podamos verlo en funcionamiento? He intentado reproducir tu problema y con el fondo en body me funciona correctamente poner luego otro background al div. Commented el 5 mar. 2020 a las 8:24
  • 1
    @NicolasOñate sí, de hecho lo he probado tanto con comillas como sin ellas por si acaso, pero nada
    – Lucía
    Commented el 5 mar. 2020 a las 8:36
  • 1
    En mi entorno de pruebas se puede poner un fondo a <body> y luego poner otro diferente al flex central. Commented el 5 mar. 2020 a las 8:41
  • 1
    Entonces, ¿qué tengo mal que hace que no surta efecto el background? Estoy en firefox, pero también lo probé en chrome, incluso en oculto para el tema del caché por si acaso, y no cambia nada
    – Lucía
    Commented el 5 mar. 2020 a las 8:43

2 respuestas 2

5

Lo que yo haría sería montar una sola imagen para usarla de fondo, en vez de tener tres columnas. (la lateral izquierda con corazones, la lateral derecha con corazones y la central con fondo blanco).

Pero de no poder por lo que sea seguir esta estructura podrías apoyarte en el uso de flex para que al meter contenido en la columna con el fondo blanco, las laterales también crezcan.

Y sumándole el uso de background-repeat: repeat-y, como te han aconsejado, podías alcanzar el objetivo que creo que te propones.

.contenido {
  display: flex;
}

.lateral {
  background-image: url(http://kaiventuras.000webhostapp.com/imagenes/lateral.jpg);
  background-repeat: repeat-y;
  width: 20%;
}

.central {
  width: 60%;
}
<div class="contenido">  
  <p class="lateral">
    
  </p>

  <div class="central"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <p class="lateral">
    
  </p>
</div>

0

¿Hay alguna forma de hacer que el background se adapte al contenido de la página? Ya que es poco productivo tener que estar poniendo a mano la imagen hasta que sea necesario, ya no por productividad, si no que en otros dispositivos puede verse alterado esto.

Si, la propiedad background-repeat debe ser background-repeat: repeat-y;

¿Por qué? Pues porqué de este modo le indicas que esa imagen se repita tantas veces como sea posible en el eje de las ordenadas.

Entonces no hace falta que pongas ninguna clase lateral. Poniendo la imagen y el background-repeat en la clase body debería ser suficiente.

3
  • 1
    Todo sigue igual, no hace ningún cambio. Quité la clase lateral y el body lo tengo de esta manera: body { font-family: Verdana; width: 100%; height: 100%; background-image: url(../imagenes/lateral.jpg); background-size: auto; background-repeat: space; }
    – Lucía
    Commented el 5 mar. 2020 a las 8:37
  • 1
    Pero en background-repeat veo que tienes space, debería ser repeat-y Commented el 5 mar. 2020 a las 8:38
  • 1
    Disculpa, que lo probé antes pero no lo cambié, ya lo puse bien, pero aún así no se ve
    – Lucía
    Commented el 5 mar. 2020 a las 8:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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