I am using a carousel to show images but cant fix image to cover background using an unordered list

StackOverflow https://stackoverflow.com/questions/23346058

Question

I have managed to create a carousel for images using html5, css3 and Jquery. Unfortunately I can not figure out the simple task of getting the images to fill the background entirely. They rotate but are all different sizes. I have changed it so much that I have got in a muddle, can anyone help?

CSS

.wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
    padding-top: 0px;
}

.slider {

    overflow: hidden;
}

.slider li {

    margin: 0 auto;
    list-style: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none; 
}

HTML

<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Gallery</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-2.6.2.min.js"></script>
</head>

<body>

<div class="wrapper">
<ul class="slider">
  <li><img src="after_front.jpg"/></li>
  <li><img src="after_scenicView.jpg"/></li>
  <li><img src="after_lib.jpg"/></li>
  <li><img src="after_mac.jpg"/></li>
  <li><img src="after_gym.jpg"/></li>
  <li><img src="after_lounge.jpg"/></li>
</ul>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js">  <\/script>')</script>
<script src="js/main.js"></script>
</body>
</html>

Any advice would be appreciated! Complete novice here. Thank you.

Was it helpful?

Solution

There are two things that might be the issue. The first may be that your li is not filling the area of the .slider list. You can add height: 100% and width: 100% to the list items see if that fixes the issue. The other problem might be that your browser doesn't support background-size: cover. If that is the case you can try the proprietary browser tags for it:

.slider li {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size:100% 100%;      
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
        (src='image/path/name.png',sizingMethod='scale');
}

If that doesn't fix the issue, you can always go the route of putting the images in the HTML as DOM elements. You can then just write your CSS to say `'width: 100%' and they will always fill the parent width. This does lead to some issues with centering the image, but it will get the job done!

Based on your HTML update

The problem is that the property background-size: cover only works if you define the image using the background-image: url(../path/to/file.jpg). Since the images are DOM elements, they are not considered backgrounds, rather they are just block level elements. You could either rewrite your CSS to handle HTML images or you can change your HTML to this:

<ul class="slider">
    <li style="background-image: url('after_front.jpg');"></li>
    <li style="background-image: url('after_scenicView.jpg');"></li>
    <li style="background-image: url('after_lib.jpg');"></li>
    <li style="background-image: url('after_mac.jpg');"></li>
    <li style="background-image: url('after_gym.jpg');"></li>
    <li style="background-image: url('after_lounge.jpg');"></li>
</ul>

The paths to your images might not be right, so you should check to make sure that you aren't getting 404 errors on them. Also, since they are not DOM elements anymore, you will have to define a height in your CSS.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top