1

I am having some trouble.

Website: http://laserhoofs.ninja/

Problem: I am using Enfold theme on my Wordpress site. Here I am trying to have a section with an image background. The image is hosted on Amazon Web Services S3 and then linked to Wordpress automatically. This works fine just inserting an image, but doesn't work when used as a background. The CSS says 'invalid property value' for image-background.

Code:

element.style { background-repeat: no-repeat; background-image: url(http://s3-eu-central-1.amazonaws.com/itsoncraft/Team Generous 2015/BACKGROUNDS/20150521112027/lighthouse_day-1500x906.jpg); background-attachment: scroll; background-position: top right; }

When I try to use a random image link from the web, it works fine. So I assume the problem lies in AWS S3 settings. I have found a relevant solution from this post, but it hasn't worked:

S3 - Access-Control-Allow-Origin Header

How do I get the image backgrounds to work? I am hosting my images on AWS because I will have many TB of material, so just hosting the images on Wordpress media library isn't a solution.

Thanks

Community
  • 1
  • 1
user18375
  • 43
  • 1
  • 5

1 Answers1

0

You should replace the space in your image url path with %20.

Should be like this:

element {
  background-repeat: no-repeat; 
  background: url(http://s3-eu-central-1.amazonaws.com/itsoncraft/Team%20Generous%202015/BACKGROUNDS/20150521112027/lighthouse_day-1500x906.jpg);
  background-attachment: scroll; 
  background-position: top right;
}

Fiddle

Robin Carlo Catacutan
  • 13,249
  • 11
  • 52
  • 85