[Gelöst] Want to crop featured image in a Div background

[Author]

Artikel

[jorg-andreasK]

Hi there,

in a Div, which is a wrapper of a slider post I simply want to use the featured image as a background image covering the whole Div. How can I use a bigger sized image but crop and center center it?

This here is not working:

########
<div class="wrapper" style="background-image:url([wpv-post-featured-image size="full" width="100%" height="420px" crop='true' crop_horizontal="center"]">
########

What is the right spelling for it?

Jörg

[Christian Cox]

Hello, I think you should use the CSS background-position property to move the image around in the div, use background-size to adjust the height and width of the background image, and use the wpv-post-featured-image shortcode to provide the full size image URL. The background-position "center center" should place it in the middle. The background-size "cover" will ensure the entire area is covered by the image. I would not try to crop or position the image by adjusting the configurations in the wpv-post-featured-image shortcode. To troubleshoot the problem, remove the wpv-post-featured-image shortcode and replace it with the URL of the full-size version of one of the featured images. This will help you test things out.

<div class="wrapper" style="background:url(<em><u>hidden link</u></em>); background-position: center center; background-size: cover;">
  your slider div content
</div>

Replace the URL above with the actual featured image URL (you can find that in the Media Library), and put your slider inside the div content. Then you can adjust the CSS for the background as needed. Once you have this working, replace the URL with the wpv-post-featured-image shortcode.

https://www.w3schools.com/cssref/css3_pr_background-size.asp
https://css-tricks.com/almanac/properties/b/background-position/

If you show me on the front-end of your site I can take a closer look.

[jorg-andreasK]

Hi Christian,...

thx for your soon reply

Maybe it was not clear,... I need the featured post mage in the background. It is in the Post-Slider-View - Slide

I can´t use the static url here, it is in a loop.

unfortunately this here (using the [wpv-post-featured-image]does not work:

You can have a look on the test page the red bordered frame on: hidden link

#####
<div class="wrapper" style="background:url([wpv-post-featured-image]); background-position: center center; background-size: cover;">
your slider div content
</div>
#######

thx
Jörg

[Christian Cox]

I wanted to use a static URL for testing, but it's not a problem. I can show you how to fix the shortcode. You need output="url" like in this example:

<div class="wrapper" style="background:url([wpv-post-featured-image output='url']); background-position: center center; background-size: cover;">

Otherwise, the shortcode will output a full image tag. You don't want that, you just want the image URL.
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-featured-image

[jorg-andreasK]

Hi Christian,

again thx for your soon reply.

I actually have 2 smaller problems on your solution:

1. I don´t understand the "&#039" used two times

and

2. If you look at my staging page (hidden link) the image is not the right size and it is not in full size, a cropping problem?

may I ask you for help again to fix it?

Jörg

[jorg-andreasK]

Hi Christian,

With your help and with a bit of trial and error I fixed it.

It needed an additional - size="large" -

Thx for your help

Jörg

[Christian Cox]

Ok thank you for the update, I will close here.