[SOLVED] How to place an image behind a div tag

HTML & CSS
1
------------------------------------------------------------ How do I place an image behind a div tag? I'm using inline, so that's the code I'm going to need. https://jsfiddle.net/szmn61u6/3/ 
<img src="http://i.imgur.com/mWeNKqj.png" style="border-radius:50px;">


<div style="width: 50px; height: 50px; background-color:#00a0b0; color:#000000; border-top-left-radius:50px;"></div>

<div style="margin: -50px 0 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000; "></div>

<div style="margin: -50px 0 0 108px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></div>

<div style="margin: -50px 0 0 162px; width: 50px; height: 50px; background-color:#eb6841;color:#000000; "></div>

<div style="margin: -50px 0 0 216px; width: 50px; height: 50px;background-color:#edc951;color:#000000; border-top-right-radius:50px; "></div>

<div style="width:0;" onclick="myObject=document.getElementById('myObj'); 
myObject.style.display='block'; this.style.display='none'">

<div style="margin:0 0 -24px;width: 260px;height:18px;border-radius:50px;background-image: linear-gradient(  to right,  #000000 83px,#0059dd 83px, #0059dd 86px,  #000000 86px,  #000000 174px, #0059dd 174px, #0059dd 177px,  #000000 177px  );border: 3px solid #0059dd;"></div>

<button style="display:block; border:none;cursor: pointer;background-color:transparent;width:266px;height:24px;" onclick="document.getElementById('player').volume=1.0;player.paused ? player.play() :player.pause()"></button>
2

Not like that.

Is the image supposed to be a background - if so then it belongs in the CSS file and not in the HTML at all.

3

If it is a background image (purely decorative), then as @felgall says you should not include it as an <img> tag at all. This tells you all you need to know:

If it is not purely decorative, then you need to explain what it is you’re trying to achieve, so we can advise on the best method to use. Post a sketch or screen-shot, if it helps.

4

I did it.
<div style="background-image: url(); width:266px; height:340px; border-radius:50px;"></div>

5

If you worked that out by yourself from the reference, then well done.

As a general rule, when you find a solution to your problem, it’s good to post it in the topic, as you have done. Much less helpful is your habit of editing the first post to include the correct code, as it makes the thread confusing for anybody reading it later. Please don’t do that; keep the solution in its own post.

BTW, if the image in your JS Fiddle is the actual image you intend to use, rather than just a placeholder for the purposes of this exercise, then you shouldn’t be using an image at all; better to set a background colour.

4 Likes
7

@asasass: please stop deleting posts after other members have replied to them. It is yet another thing which makes your topics hard to follow and of little use to anybody else.

4 Likes
10

ok…

11

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