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


  #1  
Old Apr 15, 2009, 03:14 PM
juggledad's Avatar
juggledad
 
23,560 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
--------------

<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>
  #2  
Old Apr 15, 2009, 08:28 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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" 
  #3  
Old Apr 16, 2009, 11:33 AM
juggledad's Avatar
juggledad
 
23,560 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!!
  #4  
Old Apr 18, 2009, 06:03 AM
juggledad's Avatar
juggledad
 
23,560 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

Bookmarks

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 08:36 PM
[SOLVED] [SOLVED] Background image not showing up WebWeaver Atahualpa 3 Wordpress theme 2 May 28, 2009 06:39 PM
Fixed width site. Different page background color from body color? blueprairie Forum How-To 1 Mar 20, 2009 09:55 PM
[SOLVED] Transparency blend with background image mjelinek Atahualpa 3 Wordpress theme 4 Mar 8, 2009 01:26 PM
Changing repeated background image forces each page to reload background doctorrobert Atahualpa 3 Wordpress theme 8 Feb 15, 2009 07:36 AM


All times are GMT -6. The time now is 10:24 PM.


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