Jump to content

Passing Image Field URL to CSS


jasonelise1983
 Share

Recommended Posts

So I'm new to this. But i'm trying to set up a site, and I want to have a different background image for every page. My plan was to put an image field on on every page in the template and then pass that image url to the background-image style for that page. Maybe there is an easier way to do it, but it seemed like a good place to start. Anyone have any advice on how to do what I'm saying or to do something similar. Thanks

Link to comment
Share on other sites

Hi jasonelise1983,

Welcome to ProcessWire.

I think it is better to do this with CSS. Set a different ID for each page using your template file. E.g.

<body id ="<?php echo $page->name;?>"> 

You can then target those IDs with your CSS. Just make sure you choose a PW field that will return a value that will form a valid HTML ID.

Link to comment
Share on other sites

That solution doesn't scale, if client adds new page each day...

I would add new image field called background image, set it to have only one image and then add this to template file:

<style>

body {

background: url(<?= $page->background_image->url ?>;

}

</style>

(written in mobile)

  • Like 4
Link to comment
Share on other sites

Apeisa... that is exactly what i wanted. That's perfect. I'll try that out and see if it works. 

Kongondo, That was my initial plan too... was base everything on the body id, and pass the page name to it. But it was the scalability i was thinking didn't work. Thanks for your input though. ProcessWire is a dream to work with so far.

Link to comment
Share on other sites

  • 1 year later...
<?
$topleft = $page->topleft_header;

?>

<div<?php echo " style='background-image: url(" . $topleft->url . "); " ?>>

Can't make it right...what is the problem here..

any solution here....

thanks in advance.....

Edited by LostKobrakai
Please do not just paste code as text
Link to comment
Share on other sites

  • 2 years later...
On 4.5.2015 at 10:15 AM, naldrocks98 said:

<?
$topleft = $page->topleft_header;

?>

<div<?php echo " style='background-image: url(" . $topleft->url . "); " ?>>

Can't make it right...what is the problem here..

any solution here....

thanks in advance.....

I think there is a missing '

<div<?php echo " style='background-image: url(" . $topleft->url . ")'; " ?>>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...