Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2012
    Thanked 0 Times in 0 Posts

    *need help with a crossfading background (5 images)*

    Hi there everyone,

    I have a basic structure to the website i'm working on, but there's one thing I am having some difficulty with (probably fairly basic to you, but i'm having trouble figuring it out). Any help would be greatly appreciated (i've uploaded the files to the link below where you can download them so you can see the page, code, images, etc). Here's what I need help with in completing so I can move forward with the other pages of the site:

    1. I have a background image in place on the site (it's a round gradient that transitions from dark blue in the middle to black). I've saved other versions of the background to the "images" folder (different colors), and I want the background to crossfade to a new color every 8-10 seconds or so. I'm not sure how to do this at all, so any help in figuring this out would be awesome!

    Link to files: http://ge.tt/8fj9Ipi/v/0

    Any help with this would be greatly appreciated!!


    * {margin:0; padding:0;} /* << Most important in every website */
    .imageborder{border:6px solid #333;}
    /*** END */
    /* Navigation */
    nav {position:relative; top:-1px;}
    nav ul {padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/margin: 0;text-align: right; //set value to "left", "center", or "right"*/}
    nav ul li{z-index:9999;letter-spacing:0;word-spacing:1px;font-family:"Arial Black";font-size:125%;color:#fff;display:inline;}
    nav ul li {margin-right:10px; margin-left:10px;}
    nav ul li a {
    color: #494949;
    padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
    margin-right: 20px; /*spacing between each menu link*/
    text-decoration: none;
    border-bottom: 3px solid white; /*bottom border is 3px*/
    nav ul li a:hover, .underlinemenu ul li a.selected{
    border-bottom-color: black;
    /* Bio */
    span.bio-p {width:360px; text-align:left; z-index:-1; height:100px;}
    div.main-pic.bio {}
    div.b-img {}
    span.bio-p p {width:400px; font-size:13px;position:relative; top:105px;}
    .bioHead {position:relative;top:90px; left:-50px; width:600px;display:block; background: url(../images/bio-head.png) no-repeat; height: 120px; margin:0 auto;}
    .bioHead {background-size:600px 100px;}
    .bioHead {}
    span.bio-p a {display:inline; float:left; z-index:99999;}
    .transition {position:relative; top:120px;}
    /*** END */
    .group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    .group { display: inline-block; clear: both; }
    /*** END */
    #container {min-height:100%;position:relative;}
    /*Header Social */
    a#fb{background:url(../images/fb.png) no-repeat;display:block;height:32px;width:32px;background-color:transparent;position:absolute;right:20%;top:10px;}
    a#yt{background:url(../images/yt.png) no-repeat;display:block;height:32px;width:32px;background-color:transparent;position:absolute;right:17%;top:10px;}
    /*** END */
    /* Top Titles */
    span.top {margin:0 auto;}
    .top-titles h1 {font-size: 4.5em;margin: -17px 0 -3px;color: #C90;}
    p.bottom {margin:0 0 0 15px;}
    .top-titles { display:inline-block; margin:0 auto 0 auto;position: relative;top: -22px;font-family: "Arial Black", Gadget, sans-serif;}
    /*** END */
    /* Video */
    .video iframe{width:600px;height:400px;margin-bottom:-5px; z-index:99; display:inline-block; }
    .awards {-webkit-border-radius: 0px 0px 28px 28px;-moz-border-radius: 0px 0px 28px 28px;border-radius: 0px 0px 28px 28px;}
    .awards {width:600px;height:150px;background:url(../images/awards.png)no-repeat;background-size:600px 150px;margin:0 auto 0 auto;}
    .bio {position:relative; left:-105px;}
    /*** END */
    /* Logo's */
    div.top-logo{height:67px;width:57px;background:url(../images/petelogo.png)no-repeat;background-size:60px 50px;z-index:11;position:absolute;left:24%;top:0; z-index:-1;}
    div.pete-right{height:500px;width:300px;background:url(../images/petelogo.png)no-repeat;background-size:300px 250px;position:absolute;right:9%;top:36%; display:block;}
    div.pete-left{height:500px;width:300px;background:url(../images/petelogo.png)no-repeat;background-size:300px 250px;position:absolute;left:9%;top:36%;}
    /*** END */
    #main-content {width:100%;height:100%;}
    #guts {width:670px; margin:0 auto 0 auto; color:#fff;}
    /* Other */
    #main-content{margin-top: 0;z-index: 99;margin: 0 auto;}
    #papercontent{width:100%;text-align:middle;font-family:Helvetica;font-size:150%;color:#fff;margin:80px auto 0;padding:0 0 120px;}
    #footer, .push {height: 4em; width:100%; height:40px; background-color:#C90;}
    a:link,a:visited,.header1 a:link,.header1 a:visited,.header2 a:link,.header2 a:visited{color:#fff;text-decoration:none;}
    a:hover,a:active,.header1 a:hover,.header1 a:active{color:#000;text-decoration:none;}
    .header2 a:hover,.header2 a:active{color:#C90;text-decoration:none;}
    #footer > p:first-child {
        float: left;
        text-align: left;
        width: 33.3%; }
    #footer > p:nth-child(2) {
        float: left;
        text-align: center;
        width: 33.4%; }
    #footer > p:last-child {
        float: right;
        text-align: right;
        width: 33.3%; }
    	/* facebook */
    .facebook{padding-left: 100px;
    margin-top: -37px;}

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<meta name="description" content="This site shows the positive and negatives to electronic reading versus the traditional method, and the context that surrounds the emergence of new technologies - a context that matters to us" />
    	<meta name="author" content="tempz">
    	<meta name="keywords" content="Electronic, Reading, Print, Text, e-Book, Kindle, Impact, Effects, Libraries, Books, Bookstores, Nicholas, Carr, Bookless, Online, Memory" />
    <title> Elvis Tribute Artist: Pete Paquette </title>
    <!-- Pete, Paquette, Elvis -->
    	<link rel="stylesheet" href="css/main.css?ver=12122012"/>
    <!--[if IE]> 
    	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>   
    	<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
    	<script type='text/javascript' src='js/dynamicpage.js'></script>
    	<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    <div id="container">
    	<div id="header">
    		<div class="top-logo"></div>
    				<ul class="group">
    					<li><a href="index.html">Home</a></li>
    					<li><a href="bio.html">Bio</a></li>
    					<li><a href="about.html">Tour Dates</a></li>
    					<li><a href="#">Multimedia</a></li>
    					<li><a href="#">Sign Up</a></li>
    					<li><a href="#">Contact Us</a></li>
    			<a id="yt" href="youtubehere"></a>
    			<a id="fb" href="fbhere"></a>
    	<div id="page-wrap">
    		<div class="pete-left"></div>
    	<div id="main-content">
    		<div id="guts">
    			<div class="top-titles">
    				<span class="top">ELVIS TRIBUTE ARTIST</span>
    				<h1>PETE PAQUETTE</h1>
    				<p class="bottom">Canada's top Elvis Tribute Artist and recipient of numerous awards</p>
    			<div class="video">	
    				<iframe width="900" height="500" src="http://www.youtube.com/embed/XWqBRTKNhGM?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>
    			<div class="awards">
    			<div class="facebook">
    				<iframe src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/pages/The-Official-Pete-Paquette-Fan-Club/263124813762333?fref=ts"
            scrolling="no" frameborder="0"
            style="border:none; width:450px; height:80px; color:#fff"></iframe>
    		<div class="pete-right"></div>
    	<div class="push"></div>
    	<div id="footer">
    			<p>First section, first line of text<br /> Second line of text</p>
    			<p>Second section, first line of text<br /> Second line of text</p>
    			<p>Third section, first line of text<br /> Second line of text</p>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!-- Hosting24 Analytics Code -->
    <script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
    <!-- End Of Analytics Code -->

  2. #2
    New Coder
    Join Date
    May 2013
    Thanked 1 Time in 1 Post
    im not sure what you mean by 'crossfade' -- do you mean something that goes in and out?

  3. #3
    New Coder
    Join Date
    Oct 2012
    Thanked 0 Times in 0 Posts
    @css4kitten sorry about the confusing wording! But that's exactly what I mean. Basically there's already a background image already there, and I essentially want it to fade out and have another color fade in for the background (by crossfade, I was referring to say for example the original background has a 6 second fade out. At the 3 second mark of that I would like the next color to begin fading in). Hopefully that makes more sense, if you need some more clarification just let me know.


  4. #4
    New Coder
    Join Date
    May 2013
    Thanked 1 Time in 1 Post


    im sure someone who knows what they are doing will be here shortiely to help you =) -- but im guessing this will cover it --http://blog.alexmaccaw.com/css-transitions


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts