0

I have a content slider which spans the full length of the screen. I have set its width as 100%. The problem is that the images inside the content div are getting repeated. The size of images are 600*300. The page should be compatible to all the screen resolutions. How can I solve this?

enter image description here

Css Codes

#slider, #slider div.sliderInner {
width:100%;height:250px;/* Must be the same size as the slider images */}

#slider {
background:black url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto; /*center-aligned*/
transform: translate3d(0,0,0);}

Html Codes

<div id="slider">
<img src="images/image-slider-1.jpg" alt="" />
<img src="images/image-slider-2.jpg" alt="" />
<img src="images/image-slider-3.jpg" alt="" />
<img src="images/image-slider-4.jpg" alt="" />
<img src="images/image-slider-5.jpg" alt="" />
</div>
Vercas
  • 8,931
  • 15
  • 66
  • 106
Zain
  • 285
  • 2
  • 7
  • 23

1 Answers1

0

If you are placing images using css then use background-repeate:no-repeat;

use 1 dive for each of your image. like

<div id="slider">

<div id="firstImg"><img src="" alt="" width="600" height="300" /></div>
<div id="secondImg"><img src="" alt="" width="600" height="300" /></div>
<div id="thirdImg"><img src="" alt="" width="600" height="300" /></div>
<div id="fourthImg"><img src="" alt="" width="600" height="300" /></div>
<div id="fifthImg"><img src="" alt="" width="600" height="300" /></div>

</div>

and put some ids to your each div in which images hold. see my update example.

CSS

#slider {
width: 100%;
position: relative;
}

#firstImg {
float: left;
width: auto;
}

#secondImg {
float: left;
width: auto;
}
#thirdImg {
    float: left;
    width: auto;
}

#fourthImg {
    float: left;
    width: auto;
}

#fifthImg {
    float: left;
    width: auto;
}
  • and show me your code , or I cannot help you further without any of your code. –  Dec 06 '13 at 14:47
  • give me some more css code about your images inside the `#slider` –  Dec 06 '13 at 15:17