CODEWITHSUNDEEP
phpcss
dotcommer
dotcommer

Reputation: 171

Override CSS with PHP doesn't show same result

I just noticed this weird thing. So I have a master CSS document, and I'm overriding one section in it with a PHP variable that I include at the beginning of my index.php to dynamically change a background image based on whats in a folder on the server.

In typical CSS I have this:

.fullscreen{
    background: url('./Hero_Image/image01.jpg') no-repeat center center; 
}

And I have a nice, full-screen image background for the .fullscreen class section that is scaled appropriately for the browser window and scales as the window is resized.

However, when I try to make this dynamic, using php and overriding like so:

<?php
    include '_SiteResources/php/loadHeroImage.php'; //<< note:  output is basically an echo of the URL of the first file in a folder
?>

<head>
    <style type="text/css">
        .fullscreen{ background: url('<?php getHeroImage(); ?>') no-repeat center center;}
    </style>
</head>

I'm noticing overriding using PHP isn't showing the same result. Yes, its also fullscreen, but I'm noticing it also doesn't scale as the window scales, like the original CSS implementation; it seems to display scaled up, and doesn't scale with the browser window.

Why is that?

Here's the code for loadHeroImage.php per request:

<?php
function getHeroImage(){

    $h = opendir('./Hero_Image/'); //Open the current directory
    while (false !== ($heroImage = readdir($h))) {
        if($heroImage != '.' && $heroImage != '..') { //Skips over . and ..
            $heroFileInfo = pathinfo($heroImage);
            $heroImagePath = $heroFileInfo['dirname'];
            $heroImageBase = $heroFileInfo['basename'];
            // $heroImageFullPath = $heroImagePath.$heroImageBase;
            echo './Hero_Image/'.$heroImageBase.' ';
            break;
        }
    }
}
?>

Upvotes: 0

Views: 81

Answers (3)

Dillon Burnett
Dillon Burnett

Reputation: 503

<?php include("asdkfasdf.php");?>
<head>
    <style type="text/css">
        .fullscreen{background: url('asdfasdf.jpg');}
    </style>
</head>
<div class="fullscreen">asfdasdf</div>
</body>
<?php 
    if($imageCSS !== null || $imageCSS !== ''){
        echo '<style type="text/css">
             .fullscreen{background: url(\''.$imageCSS.'\');}
             </style>';
    }
?>
</html>

asadfasdf.php
<?php
function getHeroImage(){

$h = opendir('./Hero_Image/'); //Open the current directory
    while (false !== ($heroImage = readdir($h))) {
        if($heroImage != '.' && $heroImage != '..') {
            $heroFileInfo = pathinfo($heroImage);
            $heroImagePath = $heroFileInfo['dirname'];
            $heroImageBase = $heroFileInfo['basename'];
            // $heroImageFullPath = $heroImagePath.$heroImageBase;
            $imageCSS = './Hero_Image/'.$heroImageBase.' ';
            break;
        }
    }
}
?>

i don't recommend having php on the bottom, but this works. You shouldn't be echoing out a whole page that space. include the page, and echo only the link.

Upvotes: 0

Cave Johnson
Cave Johnson

Reputation: 6778

I know you found the answer to your problem but I just wanted to expand on my comment to your answer.

You should be able to override just the background-image. You just have to include the base css declaration and then override just the background-image in another declaration.

For example:

<head>
    <style type="text/css">
        /* Base css code */
        .fullscreen {
            height: 100%;
            width: 100%;
            background-color: #212121; 
            background: url('http://pathToImage.jpg') no-repeat center center; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            position: relative;
            box-shadow: 0px 10px 45px #000000;
        }

        /* Override the background image */
        .fullscreen{ 
            background: url('<?php getHeroImage(); ?>') no-repeat center center;
        }
    </style>
</head>

Upvotes: 1

dotcommer
dotcommer

Reputation: 171

Ok, I managed to figure out my issue thanks to some hints from @jkon and @EduardoEscobar.

When overriding my CSS in the <head> tag, I thought I would only need to override the one command that I was changing, but it seems I needed to also include the rest of the other CSS commands.

In my CSS, my .fullscreen class looked like this:

.fullscreen {
    height: 100%;
    width: 100%;
    background-color: #212121; 
    background: url('http://pathToImage.jpg') no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    box-shadow: 0px 10px 45px #000000;
}

and in my index.php <head> tag, I was overriding just the background URL with PHP like so:

<head>
    <style type="text/css">
        .fullscreen{ background: url('<?php getHeroImage(); ?>') no-repeat center center;}
    </style>
</head>

But what I should have been doing was including all the other CSS code. This is what ended up getting the same result as just my CSS hardcoded URL:

<style type="text/css">
    .fullscreen{ background: url('<?php getHeroImage(); ?>') no-repeat center center;
                background-size: cover;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                position: relative;
                box-shadow: 0px 10px 45px #000000;
                height: 100%;
                width: 100%;
                background-color: #212121; 
                }
</style>

Thanks everyone for your feedback and help! I really appreciate it!

Upvotes: 1

Related Questions