Is there a way to mix CSS and PHP? - php

Question

I'm working on a wordpress theme, and i want to have a custom header background. I used to use add_theme_support('custom-header); function that wordpress offers, it works but not the way i want it to. I want to have a background-image instead of an img. I made a function called header_background_callout() and i added a section, setting and control. the function works and outputs the background url that the user chooses through the customize section in wordpress. Is there a way that i can do something like this in css? : background-image: url(<?php echo wp_get_attachment_url(<?php get_theme_mod()); ?>);
Thanks in advance.

Answer 1

try this. echo " backgroud-img = 'url('get_theme_mod()')' ";

Answer 2

You can add inline styles to your theme using wp_add_inline_style:
<?php wp_add_inline_style( $handle, $data ); ?>
where $data is the CSS you want to include in your theme. This way you can have your php variables loaded as CSS for your website.

Answer 3

Yes kind off.
I made my css file a php file and because of that I can do as you say
background-image: url(<?php echo get_theme_mod(); ?>); // I suppose you need to echo the mod?
In the HTML you use it like;
<Link rel="stylesheet" type="text/css" href="style.php">
Edit you may need to change the header of the php file to a css file by:
<?php header("content-type: text/css; charset: UTF-8"); ?>

Answer 4

I found this easy way and it works the best:
In your Index.php file add:
<?php
function bg_img_alt() {
if(get_theme_mod('vibe_hero_background_setting') > 0) {
return wp_get_attachment_url(get_theme_mod('vibe_hero_background_setting'));
}else{
return get_template_directory_uri() . '/img/bg.jpeg';
}
}
?>
<style type="text/css">
background: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)), url(<?php echo bg_img_alt(); ?>);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
</style>