CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sébastien Gicquel
Sébastien Gicquel

Reputation: 4386

Background parent container smaller with image partially outside

I’m working on a custom template and I have to create a block like this :

Desktop :

enter image description here

Mobile

enter image description here

I have difficulties in obtaining this result : the background color of the parent container is smaller and the image is partially outside.

For now, I have managed to do this but I don’t think it is good because I have to set some max-height in pixels and position absolute on the image.

#block-devis-home {
  margin: 0 auto;
  position: relative;
  z-index: 1;
  max-width: 400px;
  height: 450px;
  background: #0e182c;
}

#block-devis-home img {
  position: absolute;
  left: -200px;
  top: 30px;
  width: 100%;
}

.block-devis-home-text {
  padding: 0 30px;
}

#block-devis-home h2,
#block-devis-home p {
  color: #fff;
}

#block-devis-home h2 {
  color: #fff;
  margin: 56px 0 36px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

  <section class="block-home">

    <div class="row">

      <div id="block-devis-home">

        <div class="col-md-6">

          <img class="img-full-width" src="http://via.placeholder.com/100x50">

        </div>

        <div class="col-md-6">

          <div class="block-devis-home-text">

            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Lorem ipsum dolor sit amet, sapien etiam, nunc amet dolor ac odio mauris justo. Lorem ipsum dolor sit amet, sapien etiam, nunc amet dolor ac odio mauris justo.</p>

          </div>

        </div>

        <div class="clearfix"></div>

      </div>

    </div>

  </section>

</div>

Is there an other way I could explore ?

Upvotes: 1

Views: 120

Answers (2)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

You can get the desired output by just using border:white on your background of parent element.

.image {
  /*   position:absolute; */
  /* right:0; */
}

.image>img {
  position: relative;
  top: 20px;
  height: 200px;
  left: -10vw;
}

.rightbox {
  text-align: center;
  color: white;
}

.parent {
  margin-top: 20px;
  background: red;
  /*   border-left:100px solid white; */
  /*   margin:0px 30px; */
  border-left: 15vw solid white;
  border-right: 2vw solid white;
  width: 100%;
  height: 240px;
}

.widthAdjust {
  width: 100% !important;
}

.block-devis-home-text {
  height: 240px;
}

@media only screen and (max-width: 991px) {
  .parent {
    border: 0;
    height: auto;
    margin-top: 80px;
  }
  .image {
    text-align: center;
    border-left: 20px solid white;
    border-right: 20px solid white;
  }
  .image>img {
    /*     position: absolute; */
    top: -50px;
    /*     border:1px solid blue; */
    left: 0;
  }
  .block-devis-home-text {
    height: max-content;
  }
  .rightbox {
    border-left: 20px solid white;
    border-right: 20px solid white;
    margin-top: -50px;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section class="block-home parent">

  <div class="container widthAdjust">
    <div class="row flex">
      <div class="col-md-6 image">

        <img class="img-full-width" src="http://via.placeholder.com/100x50">

      </div>

      <div class="col-md-6 rightbox">

        <div class="block-devis-home-text">
          <div class="content">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Lorem ipsum dolor sit amet, sapien etiam, nunc amet dolor ac odio mauris justo. Lorem ipsum dolor sit amet, sapien etiam, nunc amet dolor ac odio mauris justo.</p>
          </div>

        </div>


      </div>

    </div>
  </div>

</section>

Upvotes: 1

puja
puja

Reputation: 17

    You can try this.
    css:
     body,html{
     height:100%;
     margin:0;
     padding:0;
     }

.float-left{
float:left;
}
.block-home{
float:none !important;
margin:auto;
height:250px;
background-color:red;
position:relative;

}
.col-md-6.text-center{
    height: 100%;
    float: right;
}
.text-center h2{
  font-size:26px;
}
.image-class{
 position: absolute;
    top: 0;
    height: 75%;
    background: #afb8bf;
    font-family: monospace;
    background-position: center center;
    left: -8%;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(https://top13.net/wp-content/uploads/2014/11/7-small-flowers.jpg);
    background-size: cover;

}
 @media only screen and (max-width : 760px) and (min-width : 480px) {
.image-class {
     top: 0;
    height: 50%;
    background: #afb8bf;
    font-family: monospace;
    background-position: center center;
    left: 24%;
    display: block;
    transform: translateY(-25%);
    background-image: url(https://top13.net/wp-content/uploads/2014/11/7-small-flowers.jpg);
    background-size: cover;
}
.col-md-6.text-center {
    height: 50%;

}
    }
HTML:


<div class="container-fluid">

  <section class="block-home col-lg-6 col-md-6 col-sm-6 col-xs-12 ">
   <div class="image-class col-lg-6 col-md-6 col-sm-6 col-xs-6">

  </div>

   <section class="text-center col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor sit amet, sapien etiam, nunc amet dolor ac odio
            mauris justo. Lorem ipsum dolor sit amet, sapien etiam, nunc amet dolor ac odio mauris justo.</p>

   </section>

  </section>

</div>
    And import bootstrap cdn.

Upvotes: 0

Related Questions