Adding background image in css with get_option() in wordpress

3 Views

I am building simple scroller and admin should paste the link to the image in the admin panel and that image should output as a background of slide div. I have set up the options for this, and links are being saved to the database I just don’t know how to add it to the style rules.

I have included the following code to the <head></head>

Read More
<style type="text/css">
<![CDATA[]]>
#slide_1 {
background-image: url('<?php echo get_option('slide_1'); ?>');
background-repeat: no-repeat;
}
]]></style>

In firebug the url is being displayed in the <head></head> but the style is not applied, and #slide_1 doesn’t have any rules applied to it.

Is there any other way of doing this?

Many thanks in advance

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. May be there is a CSS background rule is being applied forcefully. You can try using inline style. Like.

    <div id="slide_1" style="background: url('<?php echo get_option("slide_1");?>') no-repeat;">
.....
</div>

    Another thing I have noticed that in css rule background-image: url('<?php echo get_option('slide_1'); ?>'); you are using single quotes in php and also in css. This is producing a conflict. Try using background-image: url('<?php echo get_option("slide_1"); ?>'); double quotes.

  2. Try removing the [CDATA]. If your page is getting parsed as HTML instead of XHTML it probably won’t recongize the styles.

    For further reading, wikipedia states:

    CDATA sections in XHTML documents are liable to be parsed differently
    by web browsers if they render the document as HTML, since HTML
    parsers do not recognise the CDATA start and end markers, nor do they
    recognise HTML entity references such as < within tags.