Use new Image block as background image.

Hi there,

can i see where on your site you want to do this ?

As hero background image

Not easily. Is that the Featured Image being displayed ?

Yes!

Is there any way to replace that css backgroud images by a html block?

The background image is added inline, so it is in the HTML:
https://www.screencast.com/t/AmFZdKW8jui

Do you think that's good enough for Google to index? Or it has to be an image block?

Hello Ying!!!

In the last generateblocks update you added that inline function. So, I activated that inline background and google is not indexing that image. My conclusion is that it shoud be someting like a block image to get index and ranked. And I am also having so many problems lazyloading that inline background image.

Then try this:

1. Add a GB image block above the current hero section, set 100% as its width, 600px as its height for desktop, and adjust the height for mobile later.

2. Remove the padding of the current hero container block, and give it an additional CSS class, eg.hero-container.

3. Add this CSS:

.hero-container.gb-container {
    position: absolute;
    top: 170px;
}

You'll need to re-position it for mobile by modifying the above CSS.

Let me know how this works.

Didn't work properly.

This is not simple, but try this method:

1. Add this CSS:

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

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

.has-background-image .gb-inside-container figure {
	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;
}

2. Your layout must be as follows:

2.1 Add a Container Block for your hero section.
Give it an Advanced > Additional CSS Class of: has-background-image

2.2 First block that goes inside the Container is a GB Image Block, which you can set to display your Featured Image.
Give it a CSS class of: background-image

2.3 Any other content you want over the image such as your title and buttons goes in below the image block.

2.4 Style your hero container block with the necessary padding and minimum height.
Don't add any overlay gradients for the time being as that may mess with the CSS.

Hello David! #2274695 that code for hero section worked perfectly you can check here: http://s897840961.mialojamiento.es/about/
----------------------------------------------------------------------------------------------------------------------------------

Now I am trying to make a wrapper with 3 container with also background block image: http://s897840961.mialojamiento.es/hola/
( https://ibb.co/wQ6RyxC)

Is it good idea a structure like this?:https://ibb.co/QcCGTpy

Container1: (position-:relative;)
---------image
---------container2: (position:absolute;)

But now I am not sure which container should be relative the: gb-container or gb-inside-container?
And also not sure which one should be absolute: gb-container or gb-inside-container?

Can you help me? There is another alternative instead of adding container2 and add directly the heading and buttons inside the container1?

Hi Rostyslav,

Yes, your idea of how to structure the Blocks is good.

gb-inside-container should be relative, and the gb-container within the gb-inside-container should be absolute.

So for instance, as is, a code like this would work:

.gb-grid-wrapper-945ffae9 > .gb-grid-column > .gb-container > .gb-inside-container {
    position: relative;
}

.gb-grid-wrapper-945ffae9 > .gb-grid-column > .gb-container > .gb-inside-container > .gb-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Example: https://share.getcloudapp.com/12uLLv9k

You can put classes to your Containers so that you could refactor the CSS code to something more precise and neater.

For instance, if you have class my-container-1 for the outer Container Block and my-container-2 for the inner Container, the code would be like this instead:

.gb-container.my-container-1 > .gb-inside-container {
    position: relative;
}

.gb-container.my-container-1 > .gb-inside-container > .gb-container.my-container-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Hope this helps!

Hello Fernando! That worked perfectly.

Now I would like to add a image block full width background image behind this wrapper: https://share.getcloudapp.com/12uLLv9k but now this css: https://generatepress.com/forums/topic/use-new-image-block-as-background-image/#post-2274695 is not working.

Thanks

Are there padding or margins in your Container Blocks? Try removing them.

Looking at your site now, it seems you were already able to remove the spacing as well.