Hello,
I’m trying to show a different background image in each header pages with css.
In a first site i did with Kirby, I used the selector plugin to choose an image in the admin panel and add it in the html via css background. But for this one, I don’t need to have the possiblity to change it and would do it via css file.
I thought this time to use <?php echo css('@auto')?> and add a specific css file per templates, but I don’t know how to do for the subpages of the templates.
How would you do to change header background in each page?
Sorry for my english, hope you can anderstand me.
Thank you.
I’m not quite sure I understand correctly. Do you want a different header image for each page or only for the main pages or per different template?
Depending on which option you want to implement, you could use a class in your body tag, e.g.
$page->template() or $page->uid() and then address the header in your css via the class name of the body tag. For the subpages of a specific template you could then use $page->parent()->template().
I wouldn’t use a separate css file just for the header.
Hello Texnixe, thank you for your comment.
Yes, I would try to add a different class in each header (or each body) templates and sub-pages templates.
You can do something like this;
<body id="<?php echo $page->id(); ?>"> ... </body>
This will return the unique ID of that specific page;
<body id="homepage"> ... </body>
In CSS you can alter the headers-background like this;
body#contact .header {background-image:url("another-image-here.png");}
body#projects .header {background-image:url("guess-what.png");}```
****
Or simply upload an header-image, using a syntax like this;
1. header_image-homepage.jpg
2. header_image-contact.jpg
3. header_image-projects.jpg
And then you can solve it with inline CSS, like;
```<div class="header" style="background-image:url('header_image-<?php echo $page->id(); ?>.jpg');"></div>```
Hello dMOTION, Thank you for your comment,
I would prefer to not use style in the html.
And your first suggestion with the ID seems to be the one I was looking for (and anderstable for me 
)
Thank you again, very helpful.
It’s always better to prevent inline CSS 
Using the $page->id(); as ID on your body-tag gives every page an unique body-wrapper.
You can use that later on for page-specific styling;
body#about {color:green;}
body#projects {color:blue;}```
There is also a ```$page->uid()``` but I do not know the difference between them (they give the same result).
A more Kirby-ish way is the following:
-
Add a file named background.jpg to every page that uses a custom background.
-
Put the following into your header snippet or template:
<?php if($background = $page->image('background.jpg')): ?>
<style>
.whatever {
background-image: url(<?php echo $background->url(); ?>);
}
</style>
<?php endif; ?>
$page->uid() returns the “folder name” without sorting number and $page->id() returns the URI of the page including parent pages. But since it contains slashes, you can’t use that for HTML IDs out of the box. You can however replace the slashes with safe characters like dashes.
This solution looks cool, indeed - but you have to write the CSS in the HTML-page, which is not always good practice (caching issues, etc…).
Off course you can write a dynamic stylesheet;
- Create a file, called style.php.
- Embed it in the header, like you do with a normal stylesheet.
- Write down all the variables in the first part of style.php.
- Change the header mime-type of the .php file to .css (use a php-code to do this).
- You’re done.
That way you have a perfect external CSS with dynamic variables included 
Thank you again, this very helpful for me. I’m very not familiar with php 
Do you think creating a dynamic stylesheet is the better solution ?
I never did it, but if it is the good solution, I’ ll try to do it this way.
Hi lukasbestle,
Yes your solution looks very nice also. Thank you.
And adding style (specially for header) in head seems good for me.
Thank you again
If you really want dynamic file-names and the power of variables, check out this snippet;
##HTML - index.php##
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<link rel=“stylesheet” type=“text/css” href=“style.php”>
</head>
<body>
<p>Guess what <b>color</b> I am…</p>
<script src=“script.php”></script>
</body>
</html>
##CSS - style.php##
<?php
header(‘Content-type: text/css’);
$color = ‘f00’;
?>
b {
color : #<?php echo $color; ?>;
}
##JS - script.js##
<?php
header(‘Content-type: text/javascript’);
$msg = ‘hello, world!’;
?>
document.write("<i><?php echo $msg; ?></i>"+" (from Javascript)");
…off course this has nothing to do with Kirby, but you can use / parse Kirby variables to both javascript and stylesheet with it.
Ok, I’ll try some tests with dynamic style, but honnestly, this is an other level than mine
Thank you.
I don’t recommend creating an external style sheet. Because then you will have caching issues. By including the CSS overrides in the HTML, you make sure that the CSS only applies to the current page. This is best-practise.
I’m using a cache-parameter for my assets… they change, when the asset is modified.
But it depends on your usercase, I think…
While testing performance with https://gtmetrix.com/ I always get a bad-point when CSS is not in the asset 
These performance tests are simply not real-world. They don’t understand that the inline CSS code is specific to the page and can’t be outsourced into a general stylesheet. It’s much slower (until HTTP/2 arrives) to request another resource than to simply include the three lines of CSS in the HTML code.
You mean, well, on every request? Because the file you are talking about is dynamic. 
Guess we’re going off topic…
The parameter is simply a hash of the modified-file-time… it only changes, when the file is modified (ergo, changed) on the server.
I’m not using this with .php-css files…
Some clients pay for getting “a better score in GMetrix” - I can explain them that this score is not 100% perfect, but sometimes it’s hard to explain… some of them believe in numbers, not facts…