-1

Soy nuevo en esto del desarrollo web y tengo un ligero problema: hice una sección de servicios pero el fondo no ocupa todo el ancho de la pantalla. Quizá suene como una pregunta estúpida, agradeceré toda la ayuda que me puedan brindar

Así se ven hasta ahorita:

   /*Services section*/
   .services-title:before {
     content: "";
     background: #2851c2;
     height: 5px;
     width: 200px;
     margin-left: auto;
     margin-right: auto;
     display: block;
     transform: translateY(45px);
   }

       #services {
         background: #e7e7e7;
         background-size: cover;
         margin-top: 11px;
         padding-top: 30px;
         padding-bottom: 60px;
         padding: 0;
       }

El html es este:

div class="text-center">
  <h3 class="services-title">Mis servicios</h3>
  <section id="services">
    <div class="services-detail">
      <div class="row">
        <div class="col-lg-4 col-md-6">
          <div class="services-selection">
            <div class="services-icon">
              <img src="images/servicios/evaluación.png" alt="">
            </div>
            <div class="services-description">
              <h4></h4>
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
1
  • Samuel fíjate de poner la clase container-fluid después de services-detail para tener la syntax de bootstrap de que un container tiene rows y cols.
    – Juan
    Commented el 22 ago. 2020 a las 10:46

4 respuestas 4

1

Según entendí quieres hacer algo así:

introducir la descripción de la imagen aquí

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>

<style>
    .bg-degradado{
        background: rgba(73,155,234,1);
        height: 100px;
    }
    .bg-gray{
        background-color: gray;
    }

    .titulo_servicios{
        border-bottom: solid 3px rgba(73,155,234,1);
        width: 200px;
        font-size: 19px;
    }
    .mt-100{
        margin-top: 100px;
    }
</style>

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

        <div class="row mt-100">
            <div class="col-md-12">
                <h1 class="titulo_servicios text-center mx-auto">Mis servicios</h1>
            </div>
            <div class="text-center">
                icono evaluacion
            </div>
        </div>

        <div class="row bg-degradado">
        </div>

        <div class="row d-flex justify-content-center text-center">
            <!-- 
                la clase d-flex justify-content-center te alineara los divs que tengas al centro.
            -->
            <div class="col-md-4">
                <img src="https://i.imgur.com/aXeEbNJ.png" alt="">
                <h3> titulo </h3>
                <p>
                    Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne
                     lumbering animata corpora quaeritis. Summus brains sit​​.
                </p>
            </div>

            <div class="col-md-4">
                <img src="https://i.imgur.com/aXeEbNJ.png" alt="">
                <h3> titulo </h3>
                <p>
                    Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne
                     lumbering animata corpora quaeritis. Summus brains sit​​.
                </p>
            </div>

            <div class="col-md-4">
                <img src="https://i.imgur.com/aXeEbNJ.png" alt="">
                <h3> titulo </h3>
                <p>
                    Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne
                     lumbering animata corpora quaeritis. Summus brains sit​​.
                </p>
            </div>
           

        </div>


        <div class="row">
            <div class="col-md-12">
                <h1 class="titulo_servicios text-center mx-auto">Mis servicios</h1>
            </div>
        </div>

        <div class="row d-flex justify-content-center text-center bg-gray">
            <!-- 
                la clase d-flex justify-content-center te alineara los divs que tengas al centro.
            -->
            <div class="col-md-4">
                <img src="https://i.imgur.com/aXeEbNJ.png" alt="">
                <h3> titulo </h3>
                <p>
                    Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne
                     lumbering animata corpora quaeritis. Summus brains sit​​.
                </p>
            </div>
            <div class="col-md-4">
                <img src="https://i.imgur.com/aXeEbNJ.png" alt="">
                <h3> titulo </h3>
                <p>
                    Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne
                     lumbering animata corpora quaeritis. Summus brains sit​​.
                </p>
            </div>
            <div class="col-md-4">
                <img src="https://i.imgur.com/aXeEbNJ.png" alt="">
                <h3> titulo </h3>
                <p>
                    Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne
                     lumbering animata corpora quaeritis. Summus brains sit​​.
                </p>
            </div>
           

        </div>

    </div>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
</body>

</html>

4
  • Lo hice pero sigue igual, alguna idea? ;(
    – samuel088
    Commented el 8 jul. 2020 a las 0:07
  • puedes poner una captura de toda el sitio web ? y marca la sección que deseas que tome todo el ancho.
    – xWesko
    Commented el 8 jul. 2020 a las 0:17
  • Listo, ya la puse ;)
    – samuel088
    Commented el 8 jul. 2020 a las 0:20
  • @samuel088 edite mi respuesta, te puse una estructura del html según tu imagen, solo tendrias que agregar las separaciones correspondientes, espero que te sirva.
    – xWesko
    Commented el 8 jul. 2020 a las 0:45
0
#services{
/* La imagen de fondo se reescala automáticamente con el cambio del ancho de ventana del navegador */
    background-size: cover;
    /* Para que la imagen de fondo no se repita */
    background-repeat: no-repeat;
    /* Donde se encuentra la Imagen*/
    background-image: url(imagenes/fondos/ssolar.png);
}

en background-image: url(imagenes/fondos/ssolar.png); añade tu direccion de imagen y lo mete dentro de tu fondo

-1

Podrias usar algo asi:

 background: url(https://cdn.memegenerator.es/imagenes/memes/full/0/15/151873.jpg) no-repeat center center fixed; 
   background-size: cover;

-2

Edición

Úse container-fluid para un contenedor de ancho completo, que abarca todo el ancho de su viewport.

<div class="container-fluid">
   ...
</div>

Fuente : bootstrap Saludos :)

7
  • Muchas gracias por tu aclaración, pero, el fondo que quiero lo estoy identificando en el css(background: #e7e7e7) ;, no es el "evaluación.png" :(
    – samuel088
    Commented el 8 jul. 2020 a las 0:11
  • Agrega entonces, a las clases que mencioné, lo siguiente. background-color: #12091c y pruebalo. Commented el 8 jul. 2020 a las 0:15
  • sigue sin funcionar :(
    – samuel088
    Commented el 8 jul. 2020 a las 0:24
  • Perdón, entendí mal la pregunta, chechalo ahora :) Commented el 8 jul. 2020 a las 0:25
  • Aún nada bro, creo que lo dejaré sin fondo ya que no encuentro alguna solución, igual muchísimas gracias por tu ayuda <3
    – samuel088
    Commented el 8 jul. 2020 a las 0:27

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.