I am building a responsive wordpress theme that allows for a custom banner image to be uploaded to each page. However, because of the responsive nature of the theme I need to set the images as background images using css to achieve the right effect. But, I do not want to throw random css styling into my html markup. Is there any to pull the image url from within the page template and drop it into a css file dynamically?

I found an example of what I am looking to do here but without the slider functionality.: http://emporiumpies.com/

It seems they are hard coding the images in the css file, but that is the visual effect I am going for. I just need to figure out how to tie this into the wordpress CMS.

Any help would be greatly appreciated! Thank you!

  • Your issue here is that PHP is server-side, and CSS is client-side. So basically, the webserver is running the PHP and creating the HTML (markup), then sending it back to your computer (the client), where the CSS is applied. Because of this, it's difficult to make pure CSS dynamic. You can perhaps look a jQuery, but I'd suggest some research to see if you really want to go down that route.
    – David Gard
    Mar 15, 2013 at 16:39
  • Thanks for the response! I have been doing a lot of research on different options for this and while I could write a jQuery script to do this, it would still most likely involve adding css inline. So I decided to just have php write the one line of inline css I need and call it done. Thanks for the help!
    – yoxalld
    Mar 18, 2013 at 15:44
  • Always best to stick to PHP if you can. I know it doesn't look the neatest, but to be honest it's often easier than messing around with jQuery, and it means that your page will always look the way that you want it to, even if someone has JS turned off in their browser.
    – David Gard
    Mar 18, 2013 at 17:04
  • What should I do to 'answer' this question? Thanks!
    – yoxalld
    Mar 20, 2013 at 14:12
  • I decided to just have php write the one line of inline css I need and call it done. Haven't you answered that yourself?
    – David Gard
    Mar 20, 2013 at 14:18

1 Answer 1


The best way I found to solve this issue was to have PHP write the CSS styling I needed in-line. I know it is not best practice in terms of maintainability as it might be confusing to someone else coming into the project later on.

However, it was a personal site so I will be the only one updating it. And it was the simplest solution to accomplish my needs. Hopefully there will be some kind of standards compliant solution to this in the future but for now this was the best I could come up with.

  • <img> tags can be given a width property via css - why do you need to set the images as background images using css? Mar 20, 2013 at 17:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.