浮动图像保留为背景-CSS

Question

I have this html:

<style>
#todo{
display:table;
border:1px solid #000;
}

.divimg{
float: left; 
height: 100px; 
margin-right: 0px; 
margin-bottom: 0px;
}
</style>

<div id=todo>
<img class=divimg src=https://40.media.tumblr.com/2292c0583894cd27ef887ca431e4cc40/tumblr_mkjw8oi7vb1s5jt7zo1_500.jpg></img>
<img class=divimg src=http://36.media.tumblr.com/tumblr_m6pvhwHP2O1rp9ko0o1_500.jpg></img>
<img class=divimg src=http://data.whicdn.com/images/48891103/tumblr_mghlgh66It1r0i9t4o1_500_large.png></img>
<img class=divimg src=http://www.ladylaike.com.br/blog/wp-content/uploads/2014/01/beach-summer-tumblr.jpg></img>
<img class=divimg src=https://41.media.tumblr.com/bdc50942adb5463db541bc77fcecede2/tumblr_n5mkb0CXlV1s7s4cuo2_500.jpg></img>
<img class=divimg src=https://40.media.tumblr.com/2292c0583894cd27ef887ca431e4cc40/tumblr_mkjw8oi7vb1s5jt7zo1_500.jpg></img>
<img class=divimg src=http://36.media.tumblr.com/tumblr_m6pvhwHP2O1rp9ko0o1_500.jpg></img>
</div>

https://jsfiddle.net/v5wj21c5/

my problem is, I want the same result as I have in this, but with images in background, not as img tag. Is it possible? how can i do that?

Answer 1

I don't think you can add multiple-image on background with floating attribute.

But you can create 2 div with position:absolute CSS attribute. The background div with z-index:1; and the content div with z-index:2

Like that : https://jsfiddle.net/qxo8q2hn/2/

Answer 2

Use a div tag instead of an img tag. Change the display to inline-block and control their size with background-size.

<div id=todo>
    <div class='div-img1 divimg'></div>
    <div class='div-img1 divimg'></div>
    <div class='div-img1 divimg'></div>
    <div class='div-img1 divimg'></div>
    <div class='div-img2 divimg'></div>
</div>

...

<style>
#todo{


border:1px solid #000;
}

.divimg{
display:inline-block;
height: 100px; 
width:100px;
background-size:100px 100px;
margin-right: 0px; 
margin-bottom: 0px;
}

.div-img1 {
    background-image:url('https://40.media.tumblr.com/2292c0583894cd27ef887ca431e4cc40/tumblr_mkjw8oi7vb1s5jt7zo1_500.jpg');
}

.div-img2 {
    background-image:url('http://36.media.tumblr.com/tumblr_m6pvhwHP2O1rp9ko0o1_500.jpg');
}

</style>

https://jsfiddle.net/v5wj21c5/22/

Answer 3

Since you know how wide you want the images you could do multiple background images and just set the distance, but you'd have to give the div some height and width otherwise it will just collapse

div {
    height: 300px;
    width: 300px;
    background-image: url(“https://40.media.tumblr.com/2292c0583894cd27ef887ca431e4cc40/tumblr_mkjw8oi7vb1s5jt7zo1_500.jpg”), url(“http://36.media.tumblr.com/tumblr_m6pvhwHP2O1rp9ko0o1_500.jpg”), url(“http://data.whicdn.com/images/48891103/tumblr_mghlgh66It1r0i9t4o1_500_large.png”);
    background-size: 100px auto, 100px auto, 100px auto;
    background-position: 0 0, 100px 0, 200px 0;
    background-repeat: no-repeat;    
}

here's a fiddle

Answer 4

You can use multiple background images as a css-property with background-image:url(...), url(...), ... .

Example HTML:

<div id="todo">
    Example Text.
    Example Text.
    Example Text.
    Example Text.
</div>

With CSS (3 of your images):

#todo {
    margin:5px;
    padding:50px 0px 0px 0px;
    border:1px solid black;
    height:500px; 
    width:1000px;
    background-repeat:no-repeat;
    background-image:url("https://40.media.tumblr.com/2292c0583894cd27ef887ca431e4cc40/tumblr_mkjw8oi7vb1s5jt7zo1_500.jpg"),
        url("http://36.media.tumblr.com/tumblr_m6pvhwHP2O1rp9ko0o1_500.jpg"),
        url("http://data.whicdn.com/images/48891103/tumblr_mghlgh66It1r0i9t4o1_500_large.png");
    background-size:50px 50px;
    background-position:0px 0px, 50px 0px, 100px 0px;
}

See altered jsfiddle for the result. Works in Chrome and Firefox for me.