How can I convert an absolute file path to one CSS can use?


Tags: php,css,wordpress,filepath,glob

Problem :

I'm trying to display a randomly-chosen background image on a WordPress site. My strategy is to inline the style attribute of the <html> element, like so:

<html style="background:#e8e6da url(<?php
$bg_imgs = glob(get_template_directory().'/backgrounds/*.jpg');
shuffle($bg_imgs);
echo $bg_imgs[0]; ?>) left top fixed">

On my local server, this outputs

<html style="background:#e8e6da url(C:\xampp\htdocs\mysite/wp-content/themes/my_theme/backgrounds/paper2.jpg) left top fixed">

...which the browser doesn't like because it's asking to fetch a local resource. Even if this wouldn't be a problem once the site is live, I only need a relative path to the image file.

So I was about to mess with using substr() to chop off the unneeded part of the path, but I can't be sure, depending on where the site is deployed, what get_template_directory() will return. I don't want to hard-code anything that might vary.

What's the best strategy for returning a random image path relative to the site URL? I'm happy to ditch the above if there's something better.



Solution :

You could try getting the document root and chopping it off the beginning of your full path:

$docRoot_len = strlen($_SERVER['DOCUMENT_ROOT']);
$bg_imgs = glob(get_template_directory().'/backgrounds/*.jpg');
shuffle($bg_imgs);
echo substr($bg_imgs[0], $docRoot_len);

I know this is not foolproof - it's just an idea.


    CSS Howto..

    How to apply css class to a based on respective $value in a of that row in a repeat region

    How to use CSS :not() properly?

    How to do fallback for browser-specific css expressions

    css how to make two div side by side

    Simple CSS layout - how can I achieve this layout, and make it scale easily?

    how to get the cssText of external style?

    how to center UL in my page?

    How do I select every other div class element using just CSS (no js)

    How make input element take up available space next to a fixed width element?

    IOs Cordova long-press shows text-select magnifying glass even with text-selection disabled, how to remove?

    Ribbon and stars - How to get this done without an image file?

    How use Append Jquery

    How to get at Apache Wicket PropertyColumn data to dynamically change CSS class based on content?

    How to determine when document has loaded after loading external css

    How to test CSS selector performance?

    how to add items into a CSS based text rotator (similar to news ticker)

    How to make images to go out of the div when width is over the max-width?

    How do you measure the height of a HTML element scaled with CSS3 transform?

    Symfony2: How to link CSS to HTML part?

    How to make a responsive text inside a bootstrap button

    How to make all images look same

    How to make the hover attributes stays when it is clicked/active?

    asp.net mvc view css not showing as expected

    Font is missing glyphs for specific language - how can I utilize css fallback in this case?

    How do I prevent jQuery from resetting all my CSS?

    How to create generic CSS class with input parameter

    How to prevent CSS in dynamically added HTML content from overriding my JSP's CSS content?

    JS manipulation on CSS and how it result on page rendering

    How to set an auto minimum width on column with css?

    How to style a GtkLabel with CSS?