resizing of background image in block

[mrroy44]

Hi,

On my page I’m running a test with Gambit’s Hover Animation for Visual Composer. On Their page you’ll see similar blocks with animal photos set as background image. If you resize this page, you’ll see the images get resized too.

My page also shows these kind of blocks, but when you resize my page, you’ll see the images just get cropped.
I’ve tried to set it to resize, but it just keeps on cropping. I’ve tried it with css looking like this, and some variations to it, also including

#hoverblock-1{
background-position:50%;
background-repeat:no-repeat;
background-size:cover;display:block;margin:0 auto;float:none !important
}

And like this

.wpb_wrapper1{
background-image: url(rsz_foto-340-bewerkt.jpg);
width: 300px;
height: 200px;
}

I think I got some things completely wrong. I hope somebody is willing to look at the source code and tell me what I do wrong?

Thanks,

Roy.

[Shikkediel]

Background properties aren’t inherited so the rules would have to target the specific element that also has the background image defined.

https://www.w3.org/TR/CSS21/propidx.html

Edit – or use inherit of course.

[mrroy44]

Can you tell me please how that would look in CSS?

For instance with this image background-image: url(rsz_foto-340-bewerkt.jpg);

Something like this? (which doesn’t work of course ;-) )

body {
background-image: url(https://weddingreport.nl/wp-content/uploads/2018/05/rsz_foto-340-bewerkt.jpg);
background-size:cover;
}


I don’t know if I would need to name the complete url including all subfolders?

[mrroy44]

I found a way of doing it by adding Row ID and using this code

#row-1 {
background-image: url(https://weddingreport.nl/wp-content/uploads/2018/05/rsz_foto-340-bewerkt.jpg);
background-size:cover;
}

It isn’t however what Gambit can be using on their page, because they run this demo WP account where you can see the settings in visual composer, and they didn’t attach a Row ID.

But it works… still hope to find out how they did it. It seems more dynamic on their page. If I change an image on their demo-wp page out of my own images, it also is responsive, without adding it as back-ground image in CSS

[Shikkediel]

I think you can leave the domain itself out in any case, using the absolute path is usually preferable. So that would just be:

background-image: url(/uploads/2018/05/rsz_foto-340-bewerkt.jpg);

The identifiers you used in the first post don’t really match the actual layout on your site, so I’ll be using what I see on the page source. From that I would go about it this way:

.wpb_wrapper > div {
 background-position: 50%;
 background-repeat: no-repeat;
 background-size: cover;
}

.vc_custom_1549385221774 {
 background-image: url(/wp-content/uploads/2019/02/IMG_4733-bewerkt-3.jpg);
}

I’m adding that it is circumventive to see its effects while using developer tools so the code is somewhat of a guess, assuming the last rule there is a unique identifier for that particluar element.

[Shikkediel]

Using inherit (just as an example because why would you when it can be targeted directly) I reckon it would look like this by the way:

.wpb_wrapper {
 background-position: 50%;
 background-repeat: no-repeat;
 background-size: cover;
}

.vc_custom_1549385221774 {
 background: inherit;
 background-image: url(/wp-content/uploads/2019/02/IMG_4733-bewerkt-3.jpg);
}

[mrroy44]

Thank you! The one without inherit doesn’t work, the one with does.

Do you have any idea how it can be made more dynamic like gambit did on their page?
If you use their Demo page you’ll see that you can add every background image to a row from your own computer, and you don’t need to change the css, but it is responsive right away if you view the page.

[mrroy44]

Hi, just forget about my question….when I was looking through the code of the plugin files and the database, looking to change that, I saw that it already should be possible to choose this option. So I went back to wordpress and VC and….indeed….I just did overlook it :-D

A day work for nothing LOL

Thank you for your help anyway, because without it, I would never have come knowing how to set it in CSS, which finally brought to looking at the plugin files and the database, knowing htat it was already possible to set.

[Shikkediel]

Edit – I guess you figured it out. Cheers.

[mrroy44]

yes, sorry for all the work I caused you :-)

[Author]

Posts