Member Avatar for davy_yg

Hello,

I am looking for html codes to change the css background. Is the following codes correct?

index.html

<div id="demos">
    <div id="slideshow" class="pics">
        <img style="background-image: url('../images/indonusa1.jpg');">
        <img style="background-image: url('../images/indonusa2.jpg');">
        <img style="background-image: url('../images/indonusa3.jpg');">  

    </div>
    <ul id="nav">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>   
    </ul>
</div>

Thanks before.

  • 3 Contributors
  • 3 Replies
  • 226 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by EvolutionFallen
Member Avatar for flashhtml5

Unfortunately, your code will not automatically change the image as you desire. Additionally, your use of the background-image property is not correct within an <img> tag. Usually, people use the background-image in a container element like <div> or <body>.

If you want to design a slideshow, check this out using pure CSS Click Here. Or else, you will have to use JavaScript to do the image transitions.

Edited by flashhtml5 because: typo
Member Avatar for davy_yg

The above codes do actually work. I have this on top of it:

<script type="text/javascript">
$('#slideshow').cycle({ 
    fx:     'fade', 
    speed:   900, 
    timeout: 10000, 
    pager:  '#nav', 
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#nav li:eq(' + idx + ') a'; 
    } 
});
</script>

I only have one problem the image size is not adjustable to all screen size. I only wonder how gateway create it's background. I did tried changing it's screen resolution and it works in different screen resolution.

Mind does not. The image start shifting to the right if I make the screen resolution smaller.

Member Avatar for EvolutionFallen

(X)HTML documentation states that the <img> tag requires a non-empty src attribute. I'm not sure why you are using background-image when you can just use <img> as it's meant to be used.

If you open up the Gateway page in Firefox and start inspecting some elements you can see what they're doing: They have two separate main divs. One is just for the background images -- it has 3 divs inside it each with its own <img>, and the page's JavaScript cycles which <img> is displayed. This div and the images inside it are set large enough to take up the whole screen. The second main div is for the rest of the page's content.

Using CSS, Gateway has taken the divs out of the normal flow of a site's blocks (using position: absolute). By setting a z-index for the content div, they make the slideshow div appear behind it, which makes it look like a background image.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.