CODEWITHSUNDEEP
css
Claudiu Creanga
Claudiu Creanga

Reputation: 8366

CSS multiple backgrounds issue

Why is this not working? How should I change it?

JSfiddle

<div id="slider" class="middle">
</div>
#slider{
height:467px;
background:#eeeeee url(cercuri.png) no-repeat left top, url(cercuri2.png) no-repeat right top;
}

As you can see, I want a background-color and two images, one to the left and one to the right.

Upvotes: 2

Views: 162

Answers (4)

Matty Matt
Matty Matt

Reputation: 23

Try:

#slider{
    height:467px;    
    background: url('http://lorempixel.com/400/200/'), 
                url('http://lorempixel.com/400/200/');
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
    background-color: #eeeeee;
}

Upvotes: 0

Gurkan İlleez
Gurkan İlleez

Reputation: 1573

<div id="slider" class="middle">
    <div id="slider1" style="float:left;width:50%;display:inline-block"></div>
    <div id="slider2" style="float:left;width:50%;display:inline-block"></div>
</div>

#slider{
    height:467px;
}
#slider1{
    height:467px;
background:#eeeeee url(http://icons.iconarchive.com/icons/icons-land/vista-style-emoticons/256/Study-icon.png) no-repeat left top
}
#slider2{
 background:#eeeeee  url(http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png) no-repeat right top;   
height:467px;
}

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

Put the bg color ins the second call:

#slider{
    height:467px;
    background:url(http://lorempixel.com/400/200/) no-repeat left top, #eee url(http://lorempixel.com/400/200/) no-repeat right top ;
}

Upvotes: 2

Devin
Devin

Reputation: 7720

remove the color and leave it like this (sorry, I used my own images since you had your images at localhost)

#slider{
height:467px;
background-color:#eee;
background: url(http://c.dryicons.com/files/graphics_previews/sunset_landscape.jpg) no-repeat left top,  url(http://media-cdn.tripadvisor.com/media/photo-s/01/e4/f8/e6/another-view-of-landscape.jpg) no-repeat right top;

}

you can see fiddle here

Upvotes: 1

Related Questions