Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] How to get a background image show thru background color

Old Apr 15, 2009, 02:14 PM
juggledad's Avatar
23,616 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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


<!-- 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 -->
background-repeat: no-repeat;
background-position: 200 100;
Old Apr 15, 2009, 07:28 PM
Flynn's Avatar
3,768 posts · Oct 2008
Munich, Germany
You could try to replace

HTML Code:
    document.body.background = Pic[j];

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


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

PHP Code:
$header_image '<div id="imagecontainer" class="header-image-container" 
Old Apr 16, 2009, 10:33 AM
juggledad's Avatar
23,616 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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!!
Old Apr 18, 2009, 05:03 AM
juggledad's Avatar
23,616 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Even default background image doesn't show up - can you help? ftf79 Page & Category Menu Bars 2 Jun 29, 2009 07:36 PM
[SOLVED] [SOLVED] Background image not showing up WebWeaver Atahualpa 3 Wordpress theme 2 May 28, 2009 05:39 PM
Fixed width site. Different page background color from body color? blueprairie Forum How-To 1 Mar 20, 2009 08:55 PM
[SOLVED] Transparency blend with background image mjelinek Atahualpa 3 Wordpress theme 4 Mar 8, 2009 12:26 PM
Changing repeated background image forces each page to reload background doctorrobert Atahualpa 3 Wordpress theme 8 Feb 15, 2009 06:36 AM

All times are GMT -6. The time now is 04:08 AM.

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