▼
Streaming live at 10am (PST)

Background-Image in Link-Elements not Showing in Chrome/Firefox

#1

Hey.

I've build a media-page where people shall be able to download images.

The plan is, to put background-images onto link-objects and add a hover-effect (dark, transparent overlay and some text) to it. The object will then link to the bigger, source-images somewhere dropbox.

When I finally managed to set up the grid right and published the page to test it, I found out that neither Chrome nor Firefox show any of the background-images… Safari desktop & mobile works fine.

The source-code in Chrome looks good too, everything's there and the links work too – but all I see is white space between the two headlines.

Forum-Research didn't help unfortunately.

Preview-Link:
https://preview.webflow.com/preview/dailydress?preview=4e5cce400f52df16f19791699cf0e53b

Would be glad if someone can have a look.

#2

Link blocks and divs when empty, take up 0 space when published. Set a width/height.

#3

That was fast – and correct. Thank you.

Just to add this to the topic, if anyone stumbles upon it someday:
Setting width and height in % seems not to work. I set the values in pixel now.

#4

That is because you are applying the width and height to the child element of the link. Links by default are display inline, and have no dimensions.

If the link is display block and has a dimension, for example, 500 x 500px, then for the child element, you can set display relative/absolute, width 100%, height 100%.

closed #5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.