[Resolved] Use new Image block as background image.

[Rostyslav]

What I am tryng to achive is this: https://ibb.co/3sgQxK3 Backgound full width block image for that wrapper.

http://s897840961.mialojamiento.es/hola/

[Rostyslav]

Something is not working because on mobile is working bad and the wrapeer’s containers are messing.

[Fernando]

You have this CSS which is affecting your new Container image as well:

.has-background-image .gb-inside-container figure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Replace it with something like this so it doesn’t affect other images:

.has-background-image > .gb-inside-container > figure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Kindly let us know how it goes.

[Rostyslav]

Thanks guys! Its working perfect! I am not closing the topic in case of future questions about it.

[Fernando]

You’re welcome Rostyslav!

[Rostyslav]

Hello again! Its not working properly: http://s897840961.mialojamiento.es/hola/
https://ibb.co/Fmwr7PZ
https://ibb.co/x37L5K8

Is there any way to make it work like this code:https://generatepress.com/forums/topic/use-new-image-block-as-background-image/#post-2274695

I whould like to fit all the content inside the image block container.

[David]

The method i provided here:

https://generatepress.com/forums/topic/use-new-image-block-as-background-image/#post-2274695

Should work with ANY Container block, including those that are automatically added inside the Grid block.

Create a new Grid block, select 1 x column.
Now select the Container Block that was automatically created and give it the has-background-image class.
Then follow the rest of those steps.

[Rostyslav]

David, you are GENIUS! Seriously! Thank you for putting up with.

[David]

Glad to be of help 🙂

[Rostyslav]

Hello again!

I inside a container I have more that one image. To make the first one as background without affectig the other ones. Is this code okay?

.has-background-image {
	position: relative;
}

.has-background-image .gb-inside-container > * {
	position: relative;
	z-index: 1;
}

.has-background-image > .gb-inside-container > figure:first-child{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.has-background-image .background-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

Thanks

[David]

Yeah that would work 🙂

[Author]

Posts