1

Necesito ayuda para poder desarrollar estos dos ejemplos que adjunto. Estoy desarrollando un sitio en Bootstrap y hay dos secciones donde la galería van al 100% de ancho. Estuve probando algunas cosas pero no me han dado resultado, una de ellas como el código que adjunto. También estoy buscando ejemplos concretos pero no encuentro nada.

.centros-red {
  background: url("https://lorempixel.com/1500/1500/cats") no-repeat top center;
}

.centros-atencion-pie {
  background: url("https://lorempixel.com/1500/1500/people") no-repeat top right;
}

.red-productores-pie {
  background: url("https://lorempixel.com/1500/1500/abstract") no-repeat top left;
  float: right;
}

.centros-atencion-pie h5 {
  font-size: 20px;
  line-height: 20px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  padding: 0px 20px 0px 0px;
}

.red-productores-pie h5 {
  font-size: 20px;
  line-height: 20px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  padding: 0px 0px 0px 120px;
}

.centros-atencion-pie p {
  font-size: 16px;
  line-height: 18px;
  color: #fff;
  width: 60%;
  float: left;
  padding: 0px 20px 0px 0px;
}

.red-productores-pie p {
  font-size: 16px;
  line-height: 18px;
  color: #fff;
  width: 70%;
  float: left;
  padding: 0px 0px 0px 120px;
}

.centros-atencion-pie div.hr {
  margin: 20px 0px 0px 0px;
}

.red-productores-pie div.hr {
  margin: 20px 0px 0px 120px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<section class="container-fluid centros-red">
  <div class="row">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 centros-atencion-pie lighb-int">
          <div class="hr green-int"></div>
          <h5>Centros<br>de Atención</h5>
          <p>Casa Matriz, Anexos, Agencias y todas las representaciones en el país y el extranjero.</p>
          <a href="#" class="btn btn-green-int btn-xs">Conocelos</a>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 red-productores-pie blue-st2">
          <div class="hr blue-int"></div>
          <h5>Red de<br>Productores</h5>
          <p>Utilizá nuestro mapa para buscar el productor más cercano a tu domicilio.</p>
          <a href="#" class="btn btn-blue-int btn-xs">Buscá un productor</a>
        </div>
      </div>
    </div>
  </div>
</section>

introducir la descripción de la imagen aquíy en el HO

2 respuestas 2

1

No se entiende claramente lo que propones, pero si solo se trata de dividir en 2 partes iguales con imagen de fondo es sencillo, te dejo este código para ver si suple tu necesidad, en el se ponen las imágenes como quieres, de una vez centrado y responsive, si tienes dudas, comenta y te ayudamos

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="Description" content="Ejemplo Bootstrap 3">
<meta name="author" content="Rafael Castro">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>

<style>
.colores
{
    margin-top: 0;/*Para que no tenga margen superior*/
    background-color:#dbfd96;/*si por alguna razón no se cargan las imagenes tienes un fondo preestablecido*/
}

.parteIzquierda
{
    height:300px;/*Le asignas un tamaño por defecto...*/
    /*Estableces una imagen de fondo*/
    background-image: url("http://images.all-free-download.com/images/graphiclarge/green_leaf_background_05_hd_pictures_169227.jpg");
}

.parteDerecha
{
    height:300px;
    background-image: url("http://freedesignfile.com/upload/2015/03/Spring-sunlight-with-green-leaves-background-vector-02.jpg");
}
/*Dandole color de fondo y alineación a las etiquetas*/
h1,h2
{
    color: #008080;
    text-align:center;
}

img
{
    width:50%;
    height: 50%;
}
</style>
<!--Suponiendo que es el header-->
<header class="colores">
<article class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <!--Contenido de la Izquierda-->
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 parteIzquierda">
            <h1>Titulo Principal</h1>
            <img class="img img-responsive" src=" http://imagenpng.com/wp-content/uploads/2015/08/Dibujos-Mariposas-3.png"/>
            </div>
            <!--Contenido de la Derecha-->
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 parteDerecha">
            <h2>Titulo Secundario</h2>
            <p>Todo el contenido que desees</p>
            <p>Todo el contenido que desees</p>
            <p>Todo el contenido que desees</p>
            <button class="btn btn-primary btn-lg">Hola</button>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h2>Solo relleno para completar el ejemplo.</h2>
            <p>Texto de relleno</p>
            <p>Texto de relleno</p>
            <p>Texto de relleno</p>
            <p>Texto de relleno</p>
        </div>
    </div>
</article>
</header>
</header>
</body>
</html>

2
  • Hola gracias por constestar lo que necesito es que la pagina este dividida en dos columnas con dos imagenes de fondo al 100% y que dentro de ellas situadas en un container contenga el texto, pero que el texto este dentro de los 1170 px del container. se entiende?
    – MarianoF
    Commented el 28 sept. 2017 a las 23:35
  • Es exactamente como el ejemplo que te envíe... Solo debes hacer una pequeña edición en el código arriba escrito Commented el 4 oct. 2017 a las 0:16
0

Yo lo veo igual al ejemplo que tienes alli. Espero te sirva

introducir la descripción de la imagen aquí

Te dejo un ejemplo de como podrias hacerlo, hice codigo totalmente nuevo porque el tuyo tiene muchos errores. Pero si logre captar la idea de lo que quieres hacer. Espero puedas aprender de este ejemplo cosas basicas, si tienes dudas no dudes en consultar.

html {
  font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.card {
  font-size: 1em;
  overflow: hidden;
  padding: 0;
  border: none;
  border-radius: .28571429rem;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}

.card-block {
  font-size: 1em;
  position: relative;
  margin: 0;
  padding: 1em;
  border: none;
  border-top: 1px solid rgba(34, 36, 38, .1);
  box-shadow: none;
}

.card-img-top {
  display: block;
  width: 100%;
  height: 500px;
}

.btn {
  position: absolute;
  margin-top: 50%;
  margin-left: 10%;
}

#texto {
  position: absolute;
  margin-top: 5%;
  width: 50%;
  color: white;
  margin-left: 5%;
}

.container {
  margin: 0 auto;
  width: 100%;
}

.sinpadding [class*="col-"] {
  padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="utf-8">

<body>
  <div class="container sinpadding">

    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div id="texto">
            <h1>Centros de Atención</h1>
            <h4>Casa Matriz, Anexos, Agencias y todas las representaciones en el país y el extranjero.</h4>
          </div>
          <button class="btn btn-danger">Quiero Sumarme</button>
          <img class="card-img-top" src="https://lorempixel.com/1500/1500/abstract">
        </div>
      </div>
      <div class="col-md-6">
        <div class="card">
          <div id="texto">
            <h1>Red de Productores</h1>
            <h4>Utilizá nuestro mapa para buscar el productor más cercano a tu domicilio.</h4>
          </div>
          <button class="btn btn-danger">Ubicanos</button>
          <img class="card-img-top" src="https://lorempixel.com/1500/1500/people">
        </div>
      </div>
    </div>
  </div>
</body>

Y aqui el otro ejemplo, si no es la respuesta correcta puedes adaptarlo a lo que necesites.

html {
  font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.card {
  font-size: 1em;
  overflow: hidden;
  padding: 0;
  border: none;
  border-radius: .28571429rem;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}

.card-block {
  font-size: 1em;
  position: relative;
  margin: 0;
  padding: 1em;
  border: none;
  border-top: 1px solid rgba(34, 36, 38, .1);
  box-shadow: none;
}

.card-img-top {
  display: block;
  width: 100%;
  height: 500px;
}

.btn {
  position: absolute;
  margin-top: 50%;
  margin-left: 10%;
}

#texto {
  position: absolute;
  margin-top: 5%;
  width: 50%;
  color: white;
  margin-left: 5%;
}

.container {
  margin: 0 auto;
  width: 100%;
}

.sinpadding [class*="col-"] {
  padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="utf-8">

<body>
  <div class="container-fluid sinpadding">

    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div id="texto">
            <h1>Centros de Atención</h1>
            <h4>Casa Matriz, Anexos, Agencias y todas las representaciones en el país y el extranjero.</h4>
          </div>
          <button class="btn btn-success">Quiero Sumarme</button>
          <img class="card-img-top" src="https://lorempixel.com/1500/1500/abstract">
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <div id="texto">
            <h1>Red de Productores</h1>
            <h4>Utilizá nuestro mapa para buscar el productor más cercano a tu domicilio.</h4>
          </div>
          <button class="btn btn-primary">Ubicanos</button>
          <img class="card-img-top" src="https://lorempixel.com/1500/1500/people">
        </div>
      </div>

      <div class="col-md-3">
        <div class="card">
          <div id="texto">
            <h1>Red de Productores</h1>
            <h4>Utilizá nuestro mapa para buscar el productor más cercano a tu domicilio.</h4>
          </div>
          <button class="btn btn-warning">Ubicanos</button>
          <img class="card-img-top" src="https://lorempixel.com/1500/1500">
        </div>
      </div>
    </div>
  </div>
</body>

5
  • Gracias por el ejemplo que me hiciste Luis, en realidad lo que necesito es que las imagenes esten como de fondo de ambas columnas y que ocupen el 100% de la columna de 6
    – MarianoF
    Commented el 28 sept. 2017 a las 23:33
  • Osea, y asi no esta hecho ese ejemplo? Tiene el texto, los botones y las dos columnas.
    – Alvarez
    Commented el 29 sept. 2017 a las 1:56
  • Ya la edite @MarianoFranco
    – Alvarez
    Commented el 29 sept. 2017 a las 2:34
  • gracias luis fernando es justamente eso, pero lo que quería yo era que las imagenes de fondo ocupen todo el ancho de la pagina y no que esten dentro del container, se comprende? que sean las dos imágenes pero que de los costados no queden margenes. y el contenido si dentro de un container de 1170px
    – MarianoF
    Commented el 30 sept. 2017 a las 15:20
  • estan dentro de un container, pero por eso con css quito el padding que por defecto son 15px, le quite el paddin para que las imagenes no tuvieran margenes. Pero si no es eso, ni modo. Saludos.
    – Alvarez
    Commented el 30 sept. 2017 a las 18:06

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.