Problem adding a transparent button over a background image

1

Hello guys,

I’m trying to put a transparent button over the background but it doesn’t work, I’ve tried putting backgound-color: transparent; but it becomes grey. then I’ve put the background-image: with the same image as the body background, no success as well.

best regards.

Paulo.

project - portfolio

2

Hey, I think what you need is: background-color: rgba(*, *, *, *).

3

hi BenGitter,

thanks for your answer… but it didn’t worked :confused: . it doesn’t became transparent I don’t know why.

4

You have a typo in your CSS - you’re using backgound-color instead of background-color (missing an r). If you fix the typo and use transparent it works fine.

1 Like
5

@PauloZumach You did indeed make a typo as @mtroiani said. But you will also have to replace the *'s with some values. rgba() takes 4 parameters: 1. amount of red (0-255) 2. amount of green (0-255) 3. amount of blue (0-255) 4. opacity (0-1, decimal values). http://www.w3schools.com/css/css3_colors.asp

1 Like
6

Yes, fix the typo and then set it to be transparent (background-color: transparent;), no need for the rgba format.

1 Like
7

@PauloZumach If you need the background to be totally transparent it might be easier to remove the button wrapper. Simply using <h6> and setting .font{cursor: pointer} would be enough.

8

Thank you all of you guys; you’re the BEST!!!

It’s working now!!! :wink::four_leaf_clover::grin: The main problem was exactly the typo, thank you again and sorry for being so dumb :D… I’m just starting in this language.

All the best.

Paulo.