embed php in css

Question

im not sure how to ask this so im just gonna say it. i have the following:

<style type="text/css">
 div.background
   {
   width:300px;
   height:120px;
   background:url(<?php
    echo '<img src="img/ships/ship_'.$user_ship['shipclass'].'_tn.jpg" />'
    ?>) repeat;
   border:2px solid black;
   }
 div.transbox
   {
   width:200px;
   height:100px;
   margin:30px 50px;
   background-color:#ffffff;
   border:1px solid black;
   opacity:0.6;
   filter:alpha(opacity=60); /* For IE8 and earlier */
   }
 div.transbox p
   {
   margin:30px 40px;
   font-weight:bold;
   color:#000000;
   }
 </style>
 </head>

 <body>

 <div class="background">
 <div class="transbox">
 <p>This is some text that is placed in the transparent box.
 This is some text that is placed in the transparent box.
 This is some text that is placed in the transparent box.

 </p>
 </div>
 </div>

where:

<?php
        echo '<img src="img/ships/ship_'.$user_ship['shipclass'].'_tn.jpg" />'
        ?>

it displays, or should i say, its supposed to display an image based to what a user has selected and some text on top of the image. Obviously it doesnt work. my question is, Can i call php from within css embedded in a php page?.... if not is there a workaround? Thank you for reading.

Is your page being interpreted as PHP? (Apparently not.) What's the file extension? — deceze
– deceze ♦, Commented Nov 2, 2011 at 8:30
To answer your question, yes, as long as it is a php file, this code should work. What error do you get? — rgin
– rgin, Commented Nov 2, 2011 at 8:31

hsz · Accepted Answer · 2011-11-02 08:31:30Z

6

It does not work not because of any PHP here, but mainly because of your syntax. You cannot inject HTML code into CSS:

background:url(<img src="img/ships/ship_'.$user_ship['shipclass'].'_tn.jpg" />) repeat;

It will never works. Valid syntax below:

background:url('img/ships/ship_xxx_tn.jpg') repeat;

However if you want to generate CSS document with PHP, you have to change file's extension to .php. Then server will regard it as PHP file and executes code:

background:url('img/ships/ship_<?php echo $user_ship['shipclass']; ?>_tn.jpg') repeat;

answered Nov 2, 2011 at 8:31

hsz

153k63 gold badges268 silver badges320 bronze badges

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

4 Comments

user631756 Over a year ago

the file is called from a php page. it works. thank you sir. :)

hsz Over a year ago

It means nothing. Stylesheet still has to have .php extension.

user631756 Over a year ago

im calling everything from the php page, background:url('img/ships/ship_<?php echo $user_ship['shipclass']; ?>_tn.jpg') repeat; works. :)

hsz Over a year ago

Sorry, I didn't understood. I'm glad I could help.

Axel Isouard · Accepted Answer · 2011-11-02 08:33:49Z

1

By taking a look at your code, I think there's a problem, sorry if I don't know a lot about css but this line disturbs me :

background:url(<?php
    echo '<img src="img/ships/ship_'.$user_ship['shipclass'].'_tn.jpg" />'
?>)

It would look like this :

background:url(<img src="img/ships/ship_shipclass_tn.jpg" />)

Shouldn't it be :

background:url(<?php
    echo 'img/ships/ship_'.$user_ship['shipclass'].'_tn.jpg'
?>)

??

Regards

answered Nov 2, 2011 at 8:33

Axel Isouard

1,5061 gold badge24 silver badges39 bronze badges

2 Comments

rgin Over a year ago

can't believe I missed that. this should clear things up here.

user631756 Over a year ago

i know axel, im tring to call an image using php inside css, the above answer is valid. thank you HSZ

xdazz · Accepted Answer · 2011-11-02 08:33:54Z

1

You don't need the img tag in the css.

background:url(<?php echo '"img/ships/ship_'.$user_ship['shipclass'].'_tn.jpg"'?>) repeat;

answered Nov 2, 2011 at 8:33

xdazz

161k38 gold badges255 silver badges278 bronze badges

Comments

Rukmi Patel · Accepted Answer · 2011-11-02 08:46:29Z

you can not use img tag in background:url();

here is the code that will work fine..

<?php 
 $image_name = 'Blue.jpg';
?>
<style type="text/css">
 div.background
 {
   width:300px;
   height:120px;
   border:2px solid black;
   background:url(<?php echo $image_name;?>);
 }
 div.transbox
 {
   width:200px;
   height:100px;
   margin:30px 50px;
   background-color:#ffffff;
   border:1px solid black;
   opacity:0.6;
   filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
   margin:30px 40px;
   font-weight:bold;
   color:#000000;
}
</style>
</head>

<body>

  <div class="background">
  <div class="transbox">
  <p>This is some text that is placed in the transparent box.
     This is some text that is placed in the transparent box.
     This is some text that is placed in the transparent box.

  </p>
  </div>
  </div>
</body>

Collectives™ on Stack Overflow

embed php in css

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related