[Resolved] Header Background Images

[w8krf]

When I was using another theme before I found yours, which is much better, in my opinion, I was able to have several header background images which would randomly change when a new page was accessed. I only see the capability to have one image in your theme. Would it be possible to do what I want in GeneratePress? I have purchased the add-on package and am having a ball customizing but I do not see any way of having multiple header images.

Thanks.

Carl Rimmer
http://www.w8krf.net

[Tom]

Hi there,

This topic might be helpful: https://generatepress.com/forums/topic/random-rotate-header-logo-per-page-view/

That will work with actual images in the header though. If you want to use background images, you could do something like this in the wp_head hook in “Appearance > GP Hooks”:

<?php
$headers = array(
	'http://yourwebsite.com/URL/TO/header1.jpg',
	'http://yourwebsite.com/URL/TO/header2.jpg',
	'http://yourwebsite.com/URL/TO/header3.jpg',
	'http://yourwebsite.com/URL/TO/header4.jpg',
);

$random = $headers[ rand( 0, count( $headers ) -1 ) ];
?>
<style>
	.site-header{background-image:url('<?php echo $random; ?>');}
</style>

Be sure to check “Execute PHP” 🙂

[w8krf]

That worked. Excellent. Thank you.

[Tom]

You’re welcome 🙂

[Mo]

Hi Tom,
How would that script you provided in the solution provided in Reply 176194 for rotating header images be adapted to random generated page backgrounds?

I’ve used the GP Hooks before but as usual the PHP confounds me.

I’m assuming that $headers would need to be replaced with something.

.site-header would be replaced by “body”?

Haven’t used GP for a while and had some pleasant surprises activating it for my latest build.

Thank you.
Mo

[Mo]

Hye Tom,
Disregard my last request as I think the coding modification has been solved.
If there are any unforseen issues I’ll start a new post.
Thanks,
Mo

[Tom]

Glad you got it sorted 🙂

[Joseph]

Hello, That script works wonders but it also shows on my main page which has a video header. the video overwrites it but it looks messy.

I used this css to style it out but to no avail.
.page-id-17 .site-header {background-image:display:none!important;}

Here is what I am talking about.
http://www.freedomfactor.org/staging/

Thanks in advance!!

[Tom]

What about it looks messy? While it’s loading?

[Joseph]

While loading on the main page, it shows the backgrounds I’ve added to the script then quickly changes to the video. Each time the main page is loaded it will show the scripted background then change to the video. It was mentioned to us from our client and I was just wanting to stop the display of the script on that particular page (main page) by using either css or gphooks (display:none)
All the other pages work great.

Thanks,

[Tom]

You could try this:

.home .site-header {
    background-image: none;
}

[Joseph]

Thank you sir, that did the trick. Much appreciated!!

[Tom]

You’re welcome 🙂

[Talya]

HEY,
Sorry for barging into this discussion – I’ve tried the random background images, did it yesterday and worked like a charm. Wanted to add another image and since then can’t make it to work again, this is my code:

<link href="https://fonts.googleapis.com/css?family=Alef|Heebo|Secular+One|Suez+One" rel="stylesheet">

<?php
$headers = array(
	'http://chubeza.com/newsletter/wp-content/uploads/2009/12/header_lettuce.jpg',
	'http://chubeza.com/newsletter/wp-content/uploads/2009/12/field.jpg',
	'http://chubeza.com/newsletter/wp-content/uploads/2006/04/corn.jpg',
	'http://chubeza.com/newsletter/wp-content/uploads/2010/07/red.jpg',
	'http://chubeza.com/newsletter/wp-content/uploads/2009/12/rainbow.jpg’,
	'http://chubeza.com/newsletter/wp-content/uploads/2009/12/header_04.jpg',
);

$random = $headers[ rand( 0, count( $headers ) -1 ) ];
?>
<style>
	.site-header{background-image:url('<?php echo $random; ?>');}
</style>

What am I doing wrong?
the website is http://chubeza.com/
Thanks!

[Tom]

Looks like you have a “curly” quote after rainbow.jpg – try replacing that with a straight quote like the others.

[Author]

Posts