Background image in button?

I Need Help
#1

Hi,

In the previous version of Blocs I could add a background image to a button, no problem. I just added a custom class to the button (which is in a div) with an image background, and a solid color background with text in the hover and active states. However, I cannot seem to get an image background to appear in a button at all with the newest version. I have no idea why this is not working. I am doing it the same exact way as with my previous project.

ALSO: when i open my previous project with the buttons with image backgrounds, and delete the image background from one of the button classes, I can’t put another image in there anymore. ???

Help?

#2

You need to drag the image into the image field. In this new version you can not select it anymore. Hope it helps

#3

I tried that but i couldn’t drag it into the button. Is that not possible anymore?

#4

It works for me.

00
Screenshot 2019-12-05 at 21.31.00.png1185Ă—597 146 KB

#5

Basically, quite simply, I am creating a portfolio website and want to do what this website does (see link).

https://tshaped.org

Hover over each image and a dark overlay with text appears. It seems pretty simple but like I said the way I’ve done it before doesn’t work anymore (buttons in divs) :frowning:

#6

Thanks, i think i figured it out. i was dragging from the image library onto the actual button onscreen instead of the image background field in the class.

#7

Yes. That’s the way to do it

#8

How will you handle touch based devices that have no hover.?

#9

There is a nice image hover overlay in the Bloc Store that works great. It’s a great time saver from creating buttons with images.

https://blocs.store/product/image-overlay/

Casey

1 Like
#10

Hmm, I don’t know… the example above doesn’t do anything with touch-based devices. Maybe a label underneath…that I hide on other sizes?