Override CSS with PHP doesn't show same result

Question

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;
        }
    }
}
?>

What's the (HTML) output of the php implementation? Is it different from the static CSS implementation? — Eduardo Escobar
– Eduardo Escobar, Commented Jan 4, 2016 at 21:43
also, if you had error reporting on you would notice that this is throwing an error for the missing semicolon that should be behind it.. getHeroImage() — I wrestled a bear once.
– I wrestled a bear once., Commented Jan 4, 2016 at 21:50
U need to terminate yur php line or use short code as my other mate said. — devpro
– devpro, Commented Jan 4, 2016 at 21:54
The thing that is confusing me is that your css code shouldn't cause it to scale no matter what you do to generate the path. Your css definition will just set the background image to not repeat and position it in the center horizontally and vertically. By default, background images don't scale. You need to set the background-size property. Read this. — Cave Johnson
– Cave Johnson, Commented Jan 4, 2016 at 22:30

dotcommer · Accepted Answer · 2016-01-04 22:43:02Z

1

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!

answered Jan 4, 2016 at 22:43

dotcommer

1911 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dotcommer Over a year ago

Oh... looks like I can't set this as the answer for another two days because I answered my own question? Come on S.O. Thats silly.

Cave Johnson Over a year ago

One thing to note is you should be able to do what you were trying to do (override just the background-image). But you have to include the base css code earlier in your document. That is why it is called cascading style sheets.

Cave Johnson · Accepted Answer · 2016-01-04 22:58:08Z

1

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>

answered Jan 4, 2016 at 22:58

Cave Johnson

6,8905 gold badges44 silver badges62 bronze badges

1 Comment

dotcommer Over a year ago

Ah, I see. Thanks for the clarification.

Dillon Burnett · Accepted Answer · 2016-01-05 00:33:39Z

<?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.

Collectives™ on Stack Overflow

Override CSS with PHP doesn't show same result

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related