Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] How to get a background image show thru background color (http://forum.bytesforall.com/showthread.php?t=1280)

juggledad Apr 15, 2009 03:14 PM

[SOLVED] How to get a background image show thru background color
 
Ok, I'm still trying to get the header image change every N seconds. I got NextGen slideshow to show up by editing header.php but I couldn't get it to replace the header image, it shows on top or below depending on where I put the code and I couldn't get the blog title on top of it..

So I took another route. I found a java code snippet that will loop images from an array and I put it in HTML/CSS inserts --> HTML Inserts: Header (see code below) and added an 'onload="runBGSlideShow()" to teh HTML Inserts: Body Tag. Then I creaded a transparent gif, the height and width of the header and put that as the onl inage in the images/header folder.

Then I changed the 'Body, Text & Links -> Body Style' to have a :
background: #;

Wow, this works...almost. The image shows thru, but it is located at x=0 y=0 so it is offset from where the header should go and if I change the background to an actual color, the image is covered up. Sigh, so close and et so far... Any hints? (see http://zenofmud.org for example)

--------------
code snippet
--------------

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// (C) 2001 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header

// =======================================
// set the following variables
// =======================================

// Set speed (milliseconds)
var speed = 7000

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'http://zenofmud.org/wordpress/wp-content/gallery/header_images/zom01.jpg'
Pic[1] = 'http://zenofmud.org/wordpress/wp-content/gallery/header_images/zom02.jpg'
Pic[2] = 'http://zenofmud.org/wordpress/wp-content/gallery/header_images/zom03.jpg'

// do not edit anything below this line

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runBGSlideShow(){
if (document.body){
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runBGSlideShow()', speed)
}
}
// End -->
</script>
<style>
body{
background-repeat: no-repeat;
background-position: 200 100;
}
</style>

Flynn Apr 15, 2009 08:28 PM

You could try to replace

HTML Code:

    document.body.background = Pic[j];
with

HTML Code:

document.getElementById('imagecontainer').style.background = Pic[j];
and in bfa_header_config.php

change

PHP Code:

$header_image '<div class="header-image-container" 

to

PHP Code:

$header_image '<div id="imagecontainer" class="header-image-container" 


juggledad Apr 16, 2009 11:33 AM

Flynn, thank you, you pointed me in the right direction. I had to change my array entries to
Pic[0] = 'url(http://zenofmud.org/wordpress/wp-con...ages/zom01.jpg) no-repeat 50% 0%'
and I am able to get it working.

What happens now is that every 10 seconds (I upped the delay) the header image rotates to a new one!!

I'll write the whole procedure up and submit it later today when I get home, then, with my new found knowledge, I'll try to play with the Nextgen slideshow again (I like the smooth dissolves.

Flynn, thank you once again!!

juggledad Apr 18, 2009 06:03 AM

ok, I've solved this and posted a 'how to' in post http://forum.bytesforall.com/showthread.php?t=1307
you can see the results at http://zenofmud.org


All times are GMT -6. The time now is 02:26 AM.

Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.