How would I add a transparent image over an image?

HTML & CSS
21

It’s not necessary, but say how you can do that though. That seems like a neat feature to add.

22

It looks like you are letting imgur host your images, so you will need to upload that image to imgur. Of course it will not work as a local image. :smile: fiddle can’t see it on your PC.

23

How were you able to add on more transparency to the image?

24

25

I have no idea. I imagine that’s a JavaScript question. :slight_smile:

I have to reboot my computer. It has slowed down to a crawl slower than a sloth.

26

I used GIMP. A free graphics editor. It was easy.

1 Like
27

Should I be adding background-color transparent to the code?

background-color: transparent;

.image:after{
   content:"";   
   position:absolute; 
   left:0;
   top:0;
   right:0;
   bottom:0;
   background-image:url(https://i.imgur.com/2LpbNW9.png);  
   background-repeat:no-repeat; 
   background-size:24.5% Auto; 
   background-position:50% 50%;
28

Should I also be using border-radius: 50px; on there too?

29

No. It would serve no purpose that I can see.

30

If I remove

background: url('http://i.imgur.com/8Q43QcA.png');

I could do this: background-color: blue;

.image:after{
content:“”;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background-color: blue;
background-image:url(https://i.imgur.com/2LpbNW9.png);
background-repeat:no-repeat;
background-size:24.5% Auto;
background-position:50% 50%;

31

never mind, no I wouldn’t.

32

with background color blue.

33

Should I be using border-radius: 50px; on the transparent image too?

34

No. It is not necessary.

35

As long as the image has it then it’s fine. ok.

I was looking at how facebook does theirs.

._530- {
    background-image: url(https://www.facebook.com/rsrc.php/v3/yl/r/_TagwYyN7GS.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 0 0;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    height: 80px;
    margin: -40px 0 0 -40px;
    outline: none;
    padding: 0;
    width: 80px;
}
36

How are you reading that code? Are you using Firebug or a dev tool? or did you download their CSS file?

I mention the dev tool because most dev tools that I’ve seen will list the default properties and values “by default” so the reader can confirm their state, not because the properties have been declared in the CSS.

1 Like
37

Inspect element on firefox.

38

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwalmart%2Fvideos%2F10155073073734236%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

39

facebook has probably NOT assigned {background-color:transparent} to the container with the image. FF is just giving you the state.

40

This is the code from directly on facebook.

Only border radius is on there, and no transparent color.

 background-repeat: no-repeat;
    background-size: auto;
    background-position: 0 0;
    border-radius: 50%;
    cursor: pointer;
    height: 72px;
    left: 50%;
    margin: -36px 0 0 -36px;
    position: absolute;
    top: 50%;
    width: 72px;
}
1 Like