Html Question posted in
Some basic documentation can be found here.

Html – background-image cover by grandparent width, overflow property doesn't works

Using background-image for pseudo-element, parent overflow:hidden property doesn’t affects pseudo-element background-image and don’t hide part of it. Where is problem? I want to hide background that go beyond parent element. I cannot change elements hierarchy.

Code:

.main {
  background-color: orange;
}

.grandparent {
  margin: 0 auto;
  position: relative;
  background-color: red;
  width: 737.3px;
  height: 368.65px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}
.parent {
  z-index: 1;
  overflow: hidden;
  background-color: green;
  width: 221.19px;
  height: 307.2px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
}

.child {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    width: 50%;
    height: 100%;
/*     background-color: purple; */
    border: 3px dashed red;
    z-index: 1;
}

.parent::before {
    content: "";
    position: absolute;
    height: inherit;
    width: 100%;
    background-image: url('https://images.pexels.com/photos/592077/pexels-photo-592077.jpeg?cs=srgb&dl=pexels-katja-79053-592077.jpg&fm=jpg');
    background-repeat: no-repeat;
    background-size: cover;
    transform-origin: center;
    background-position: bottom 30% center;
    left: 0; 
    right: 0;
/*     border: 1px solid; */
}
<div class="main">
  <div class="grandparent">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</div>

https://codepen.io/johurt/pen/MWMjLBd

Picture to understand:
enter image description here

Tags:

2

Answers


  1. 0

    You missed set parent position to relative.

    .parent{
   position:relative;
}
    Login or Signup to reply.
  2. 0

    You can use clip-path on the parent.

    .main {
  background-color: orange;
}

.grandparent {
  margin: 0 auto;
  position: relative;
  background-color: red;
  width: 737.3px;
  height: 368.65px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}
.parent {
  z-index: 1;
  overflow: hidden;
  background-color: green;
  width: 221.19px;
  height: 307.2px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.child {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    width: 50%;
    height: 100%;
/*     background-color: purple; */
    border: 3px dashed red;
    z-index: 1;
}

.parent::before {
    content: "";
    position: absolute;
    height: inherit;
    width: 100%;
    background-image: url('https://images.pexels.com/photos/592077/pexels-photo-592077.jpeg?cs=srgb&dl=pexels-katja-79053-592077.jpg&fm=jpg');
    background-repeat: no-repeat;
    background-size: cover;
    transform-origin: center;
    background-position: bottom 30% center;
    left: 0; 
    right: 0;
/*     border: 1px solid; */
}
    <div class="main">
  <div class="grandparent">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search