How do I change a Button's background image using CSS?

  • EDIT: When the game has been exported, the Button's background image is correctly viewed. The problem is only when previewing in Construct 3! Any ideas why it happens? Thank you in advance! :)

    Hello,

    I'm trying to customize the look of a Button using CSS. In particular, I want to replace the button image with a custom one. Here's what I am doing:

    1. Create a buttons.css file included in the project
    2. Write only this rule in buttons.css: #button { background: url(button.png) no-repeat; }
    3. Import a button.png image as another included file
    4. Create an instance of a Button object with ID "button"
    5. At start of layout, use the Browser object's Load stylesheet from "buttons.css" action
    6. When I play the game, the button's image is not the default one anymore, but it is a white square image, instead of the provided button.png image.

    Any advices? Other CSS rules, such as "background-color: red;" work correctly, so the problem only seems to be with background image. Also, I managed to make the buttons.css work outside of Construct 3, so it should be syntatically correct I think.

    Thank you in advance for your help! :)

    EDIT: When the game has been exported, the Button's background image is correctly viewed. The problem is only when previewing in Construct 3! Any ideas why it happens? Thank you in advance! :)

    Tagged:

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I'm guessing it can't access the image, because in preview it's in the "files" folder. Try changing to url(files/button.png)

    Why don't you make the button with a sprite? It's so much easier!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)