echo php in an inline css background-image deletes '/' in url

Question

Ive read through some of the other topics but i couldnt find a solution that worked. But someway the the url shows up as http:="" mysite.com="" wp-content="" uploads="" 2015="" 08="" matchups-1.png")

This is the code I'm using. How do I prevent it from adding the extra "" and spaces?

<div style="background-image: url("<?php echo $bgimage; ?>"); background-position:cover;"></div>

I've tried to code like this, but this didnt work:

<div style="background-image: url(\'<?php echo $bgimage; ?>\'); background-position:cover;"></div>

as some answers suggested but still I'm either doing something wrong or it doesn't work. Can anyone tell me a solution? thanks.

Vural · Accepted Answer · 2016-09-05 12:09:01Z

5

You can simply use

<div style="background-image: url('<?php echo $bgimage; ?>'); background-position:cover;"></div>

or

<div style="background-image: url(<?php echo $bgimage; ?>); background-position:cover;"></div>

quotes are not necessary in an url

answered Sep 5, 2016 at 12:09

Vural

8,75611 gold badges43 silver badges58 bronze badges

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

Comments

JSchirrmacher · Accepted Answer · 2016-09-05 11:55:53Z

3

The problem is the double quote " character you use for url(). Just try without or with a single quote instead.

<div style="background-image: url(<?php echo $bgimage; ?>); background-position:cover;"></div>

answered Sep 5, 2016 at 11:55

JSchirrmacher

3,3692 gold badges22 silver badges31 bronze badges

Comments

Jignesh M. Mehta · Accepted Answer · 2016-09-05 12:09:08Z

2

you should solve it with 3 ways..

put this in the

<style type="text/css">
    .logo {
    background: url(<?php echo $img_url; ?>);
    }
    </style>

Or you can simply use the inline style attribute and define the background-image.
```
<div style="background-image: url(<?php echo $img_url; ?>);">
```
or With the use of JQuery

<input type="text" class="imgcntnt" />
    <script type="text/javascript">
        var input_image = $('input.imgcntnt').val();
        $('body').css('background', 'url(' + input_image + ')');
  </script>

answered Sep 5, 2016 at 12:09

Jignesh M. Mehta

9242 gold badges12 silver badges28 bronze badges

Collectives™ on Stack Overflow

echo php in an inline css background-image deletes '/' in url

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related