WordPress.org

Ready to get started?Download WordPress

Forums

Change multiple background images in CSS with custom fields (1 post)

  1. pulledin
    Member
    Posted 3 years ago #

    I am in a situation where I need to be able to change 4 Background Images using CUSTOM FIELDS that have been put in the CSS.

    I'm not sure if this is possible, but I imagine it's something many people are going to be looking for, and after many searches (and attempts), I could not find a suitable answer in existence, hence the forum post.

    /*------
      IMAGES
      ------*/
    #images {
    	display: block;
    	height: 0px;
    	width: 0px;
    	z-index: 1;
    	}
    #images div {
    	background-attachment: fixed;
    	height: 0px;
    	width: 0px;
    	}
    #images #bg_1 {
    	background-image: url(/images/bg/1-2.jpg);
    	background-position: 50% 10%;
    	}
    #images #bg_2 {
    	background-image: url(/images/bg/2-2.jpg);
    	background-position: 50% 0%;
    	}
    #images #bg_3 {
    	background-image: url(/images/bg/3.jpg);
    	background-position: center;
    	}
    #images #bg_4 {
    	background-image: url(/images/bg/4.jpg);
    	background-position: 50% 70%;
    	}

    I'm calling 2 Jquery scripts in the header ..... (which are not the problem)

    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.scrollTo.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.localscroll.js"></script>

    That allow sliding/navigating from one area of the page to another, and site/page functionality relies on the being able to change the BG images to be POST specific.

    Using the LOCAL SCROLL script and the SCROLL TO script in the HEADER.PHP....

    <script type="text/javascript">
    //<![CDATA[
    
        $(document).ready(function(){
                    jQuery.event.add(window, "load", resizeFrame);
                    jQuery.event.add(window, "resize", resizeFrame);
    
                    function resizeFrame()
                    {
                            var h = $(window).height();
                            var w = $(window).width();
                            var z = $("#tci").height();
                            var x = $("#listing").height();
                            var y = $("#peter").height();
    
                            if (h < 700) {
                                    $("#bg_1").css("height", 800);
                                    $("#bg_2").css("height", 864);
                                    $("#bg_3").css("height", 900);
                                    $("#bg_4").css("height", 800);
    
                                    $("#a").css("margin-top", 800 - z - 64);
                                    $("#b").css("margin-top", (((1600) - x) - y) + 27);
                            }
                            else {
                                    $("#bg_1").css("height", h);
                                    $("#bg_2").css("height", h + 64);
                                    $("#bg_3").css("height", h + 100);
                                    $("#bg_4").css("height", h);
    
                                    $("#a").css("margin-top", h - z - 64);
                                    $("#b").css("margin-top", (((h + h) - x) - y) + 27);
                            }
    
                            if (w < 1096) {
                                    $(".bg_block").css("width", 1096);
                            }
                            else {
                                    $(".bg_block").css("width", w);
                            }
    
                                    $(".bg_block").css("background-position");
    
                    }
        });
      //]]>
      </script>
      <script type="text/javascript">
    //<![CDATA[
    
        $(document).ready(function(){
    
                            $.localScroll({
                               axis:'y',
                               queue:true //one axis at a time
                            });
    
        });
      //]]>
      </script>
      <script type="text/javascript">
    //<![CDATA[
    
            // uses jquery fade
            function killIt(item){
                    $('#'+item).fadeOut(1000);
            }
      //]]>
      </script>
      <!--END OLD 99999999->
    
    </head>
    <body>
    
    <div id="images">
        <div class="bg_block" id="bg_1"></div>
    
        <div class="bg_block" id="bg_2"></div>
    
        <div class="bg_block" id="bg_3"></div>
    
        <div class="bg_block" id="bg_4"></div>
      </div>

    I call the functionality in.....

    Then in my SINGLE.PHP ....

    <?php get_header(); ?>
    
    <div id="content">
    
    <div id="images">
        <div class="bg_block" id="bg_1"></div>
    
        <div class="bg_block" id="bg_2"></div>
    
        <div class="bg_block" id="bg_3"></div>
    
        <div class="bg_block" id="bg_4"></div>
      </div>

    I'm lost ... Any suggestions would be greatly appreciated.... I'm pretty sure I'm using too much code... Thank You.

Topic Closed

This topic has been closed to new replies.

About this Topic