[RESOLVED] Is there a better way to do this with Webflow?

Publishing help General
1

I create a DIV and add an image. The application generates this code:

<div class="div_serviceicon"><img src="images/home78.png" alt="54d0d8aaf7a4d6cb45406acd_home78.png">
</div>

When I try to add the image as a background to the DIV (thus moving the image into a css file - and out of the html file)… things don’t go well.

I’d rather have this:

<div class="div_serviceicon"></div>

Oftentimes… when I hand code… I keep images separate from html by placing them in the css file.

Is there a better way to do this with Webflow ?.. or am I doing this wrong (and images should be part of the html file ???)

I’m try to keep the html file clean and move images into the css file.

2

Hi there @Revolution, could you elaborate, on the part “When I try to add the image as a background to the DIV (thus moving the image into a css file - and out of the html file)… things don’t go well.”

When you setup a BG image, it will be shown in the css, and not in the html. If you are just manually adding an image using a widget, then yes that will be added to the html as it is using image tags.

Cheers, Dave

3

I’m still trying to set “placement” properly with Webflow’s background property.

The fix I’ve come across is like this:

Create a parent DIV width 100% auto-center.
Add an icon inside the DIV.

This will generate code like this:

    <div class="div_serviceicon"><img src="images/home78.png" alt="54d0d8aaf7a4d6cb45406acd_home78.png">
    </div>

Don’t get me wrong here… the code works.

It’s just that I prefer to place the image into a css file and reduce the reference footprint in the html file… like this:

    <div class="div_serviceicon">
    </div>

It makes the code “easier to view”… and it reduces code in the html file.

If I try to do “my way”…

I’m guessing I would need to create an inner DIV… add the image as a BG to the inner DIV like this:

<div class="div_serviceicon">
    <div class="div_serviceiconactual"></div>
</div>

When I do this… div_serviceicon does not properly “contain” div_serviceiconactual… and div_serviceiconactual does not display the image correctly - with the COVER attribute.

I played this with in the past… and gave up - but like I usually do - “I return to a skipped issue” (and at a later date) try to again resolve the issue.

I’m guessing I still need to play with it more… but there’s got to be a better / easier way.

4

let’s make this easier.

can you provide an example of how to do this:

and place the image in a css file.

I’m sure i am doing it wrong - and the fix is easy.

The image could be 500x500 auto-scaled down to say 32x32

  • or it could be preset at 32x32
5

BINGO.

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:

HTML

<div class="div_serviceiconinner"></div>

CSS

.div_serviceiconinner {
  display: block;
  width: 40px;
  height: 32px;
  margin-right: auto;
  margin-left: auto;
  background-image: url('../images/home168.png');
  background-size: 40px 32px;
}

Instead of

HTML

<div class="div_servicecontainer">
<div class="div_serviceicon"><img src="images/home78.png" 
</div>
</div>

CSS

.div_serviceicon {
  width: 100%;
  text-align: center;
}

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.

.div_servicecontainer {
}

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.

1 Like