Change multiple background images in CSS with custom fields

  • 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.

  • The topic ‘Change multiple background images in CSS with custom fields’ is closed to new replies.