CODEWITHSUNDEEP
csswordpress
Bojana Šekeljić
Bojana Šekeljić

Reputation: 1056

Adding background image in css with get_option() in wordpress

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>

<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

Upvotes: 1

Views: 586

Answers (3)

Andrew Grothe
Andrew Grothe

Reputation: 2374

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.

Upvotes: 0

Bojana Šekeljić
Bojana Šekeljić

Reputation: 1056

just removed <![CDATA[]]> and works fine

Upvotes: 0

Bilal
Bilal

Reputation: 2673

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.

Upvotes: 1

Related Questions