Very Interesting (for me at least)
So Webflow allows you to change the HEIGHT and WIDTH of the DIV.
- and the HEIGHT and WIDTH of the BACKGROUND-IMAGE of the DIV.
It seems… you have to set the value in both places…
- HEIGHT and WIDTH of the DIV and
- HEIGHT and WIDTH of the BACKGROUND-IMAGE of the DIV
to the same values.
Then proper positioning of the image is achievable.
If you don’t do this… the image will not appear correctly.
As it turns out… this is not a Webflow issue. It seems to be a CSS process you must follow… to accomplish what I’m trying to do.
Doing it “this way”… the code will result in:
background-size: 40px 32px;
<div class="div_serviceicon"><img src="images/home78.png"
What I also found interesting is…
if create a DIV - give it a class name - but make setting / value changes to the class
– Webflow does not create the class in the CSS file.
In other words… this piece of code (below) - through referenced in the HTML file… will not be included in the CSS file.
I discovered this… when I auto-margined div_serviceiconinner (thus centering the image) and removing the auto-center from div_servicecontainer.
So I’m guessing… if Webflow purposely did not include the CSS code… the element was not needed. And this can be removed. And that’s exactly what I did. I removed the non-needed element (DIV).
The only thing I don’t like about this it “this way” (the fix) is that you have to manually figure out the dimensions of the image.
ISSUE RESOLVED for now.