Div with 2 background images that are full width, 50% each?

HTML & CSS
1

Hi there,

I am trying to great a full width div which has a different background image on the left and the right, but 50% each in width.

This is what I have, but i’ts not working:

.about-middle{
	background: #6c3dd1 url(../images/bg-purple.png) left repeat, url('../images/bg-image.jpg') no-repeat right;
}

The left side is meant to be a solid colour with a transparent background on top and the right has a background image JPG.

Can anyone tell me what I have wrong?

Thank you.

2

I don’t think you can repeat multiple background images and keep them sized to 50% of the viewport (you can’t have the background-color in the shorthand anyway).

I would just use 2 pseudo elements and have complete control.

.about-middle{
	position:relative;
	min-height:100vh;/* for testing*/
}
.about-middle:before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	right:50%;
	bottom:0;
	background:red url(images/image1.png) repeat 0 0;
	z-index:-1;
}
.about-middle:after{
	content:"";
	position:absolute;
	left:50%;
	top:0;
	right:0;
	bottom:0;
	background: url(images/image2.png) repeat 0 0;
	z-index:-1;
}
1 Like
3

Thank you, that worked great :slight_smile:

It seemed to work with the same background image like:

background: url('../images/bg-image.jpg') no-repeat left, url('../images/bg-image.jpg') no-repeat right;

but not when I added a background colour :confused:

Thank you again :slight_smile:

4

No you can’t have the background color in that multiple shorthand rule.

You can have multiple background images and place them where you want but you can’t restrict their size. If the images are repeated they will overlap if anything else is on the way.

You could repeat something down the left and a different image down the right bit you could not make them meet in the middle:)

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.