CODEWITHSUNDEEP
css
user11124425
user11124425

Reputation: 971

2 background color with an image

I am trying to do two background color (black and grey) with an image. The color black is OK and the image also. However the color grey is missing...

enter image description here

I have a problem in my blocks ?

Thank you 

.image-item-2-03{
	float: left;
	height: 390px;
	object-fit: cover;
	width: 40%;
}

.background-black{
	background-color: #222222;
	position: absolute;
	width: 65%;
}

.background-grey{
	background-color:grey;
	position: absolute;
	width: 100%;
}
<div class="background-black">
<img class="image-item-2-03" src="https://zupimages.net/up/19/13/alfk.jpg" alt="">
<div class="background-grey">
</div>
</div>

Upvotes: 0

Views: 72

Answers (3)

Compiler v2
Compiler v2

Reputation: 3605

As I do not fully understand your question, I think from what you've said that you want to place the grey background on top the black one. Making the image on the very top of the stack.

Here is the code for that:

CSS

.image-item-2-03 {
  display: inline-block;
  height: 390px;
  object-fit: cover;
  width: 40%;
  z-index: 100;
}

.background-black {
   display: inline-block;
   background-color: #222222;
   width: 100%;
   z-index: -200;
}

.background-grey {
   display: inline-block;
   background-color: grey;
   padding: 10% 10% 10% 45%;
   height: 70px;
   z-index: -100;
}

HTML

<div class="background-black">

<img class="image-item-2-03" src="https://zupimages.net/up/19/13/alfk.jpg" alt="">

<div class="background-grey">
</div>
</div>

https://jsfiddle.net/1wvk53mc/98/ for the output

Upvotes: 1

Shomz
Shomz

Reputation: 37701

The question is not clear, but if you want the gray background on the left of the image, and the black on the right, then you need to reaarange the blocks a little. I've used inline-blocks instead of absolutely positioned divs as they are much easier to control:

.image-item-2-03{
  display: inline-block;	
	height: 390px;
	object-fit: cover;
	width: 60%;
  margin: none;
}

.background-black{
	background-color: #222222;
	display: inline-block;
	width: 20%;
  height: 390px;
  margin: none;
}

.background-grey{
	background-color:grey;
	display: inline-block;
	width: 20%;
  height: 390px;
  margin: none;
}
<div class="background-black"></div><img class="image-item-2-03" src="https://zupimages.net/up/19/13/alfk.jpg" alt=""><div class="background-grey"></div>

Upvotes: 2

Lazar Ljubenović
Lazar Ljubenović

Reputation: 19764

It's there, but its height is zero. Set it to some number.

.image-item-2-03{
	float: left;
	height: 390px;
	object-fit: cover;
	width: 40%;
}

.background-black{
	background-color: #222222;
	position: absolute;
	width: 65%;
}

.background-grey{
	background-color:grey;
	position: absolute;
	width: 100%;
}
<div class="background-black">
<img class="image-item-2-03" src="https://zupimages.net/up/19/13/alfk.jpg" alt="">
<div class="background-grey">
hello!
</div>
</div>

Upvotes: 1

Related Questions