Back slashes being added to background-url in browser

1 Views

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.

Read More

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;
}
Post Views: 1

Related posts

2 comments

  1. 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)

  2. 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

Comments are closed.