2

I am trying to activate a background image in my custom CSS in Wordpress.

I have pasted it in, but when I inspect the element in Chrome. Back slashes have been added in front and on the end of the url. Meaning the image will not display.

Why are these being added? here is the patch and shown below what is added:

background-image: url(\"wp-content/uploads/2016/01/my-logo-backgroundurl.png\");

Also does the same when I put the full url path in background-image: url("http://example.com/wp-content/uploads/2016/01/my-logo-backgroundurl.png");

@media (max-width: 768px) and (min-width: 475px)
#header-logo-image {
position: relative;
top: -10px;
left: 0;
background-image: url("wp-content/uploads/2016/01/my-logo-backgroundurl.png");
width: 250px;
height: 100px;
background-repeat: no-repeat;
margin: 0 auto;
}
pnumbers
  • 55
  • 1
  • 7
  • 1
    Sounds like something is trying to escape the quote marks you have used. Are you using the right ones..because it doesn't look like it? – Paulie_D Jan 14 '16 at 12:34
  • Related ? - http://stackoverflow.com/questions/2034575/which-type-of-quotes-we-should-use-in-css-background-url-single-doubl/2034587#2034587 – Paulie_D Jan 14 '16 at 12:35
  • I have tried it with " and ' and without and with all space, all of them result in a \ in front and end of url. – pnumbers Jan 14 '16 at 12:42
  • Try it without any quotes...if that doesn't work...you'll have to dig through your WP installation and see what's doing it. Try the WP forums too. - https://css-tricks.com/introduction-to-wordpress-front-end-security-escaping-the-things/ – Paulie_D Jan 14 '16 at 12:44
  • 1
    It's worth noting that the media query is incorrect and is missing wrapping braces. – Paulie_D Jan 14 '16 at 13:06

2 Answers2

3

I know its over a year and a half later, but I had this same problem and when I did a google search this was the page was the first entry. I fixed this by removing the quotes. This should work:

background-image: url(wp-content/uploads/2016/01/my-logo-backgroundurl.png)
Matthew Verstraete
  • 6,335
  • 22
  • 67
  • 123
Tom C
  • 31
  • 3
0

I don't have enough reputation to comment directry, so I write to here. As @Paulie_D says, it can be fixed like this:

@media (max-width: 768px) and (min-width: 475px) {
  #header-logo-image {
    position: relative;
    top: -10px;
    left: 0;
    background-image: url("wp-content/uploads/2016/01/my-logo-backgroundurl.png");
    width: 250px;
    height: 100px;
    background-repeat: no-repeat;
    margin: 0 auto;
  }
}

If you want to use @media Rule, I guess this might be helpful. CSS3 @media Rule

tkhm
  • 860
  • 2
  • 10
  • 30