Reputation: 3183
In a webpage I am building, a few images are returning 404 errors, but the direct link to the images load them fine. The same file path. The permissions for the images are 755 so that shouldn't be a problem.
I'm linking to them in inline css, which I will fix, but like so:
<div class="swiper-slide" style="background-image: url(t.jpg;" data-year="2012">
and the image https://irfandesign.com/t.jpg loads fine. the live version of the site can be found at https://irfandesign.com/dev.html
Any ideas why the images are not loading? The one that is, is an absolute url unlink the relative urls these are.
Upvotes: 1
Views: 1715
Reputation: 2077
You just got a very small (but really messy) syntax error. Your browser is trying to fix it by closing what you forgot to, but it ends up looking for the image named t.jpg;
.
Remember url()
is a CSS's function, so:
selector {
background: url('..............');
/* if you open --^ ^---- you must close */
}
Your style
attribute has the following value:
background-image: url(t.jpg;
/* it opens ---------^ ^---- but never closes... */
So, your smart (but not that much) browser tries to close it for you, causing it to end up as:
background-image: url(t.jpg;);
/* ^---- your browser trying to close it */
Here is how your property should look:
body { /* <-- Use your own selector */
background-image: url('https://irfandesign.com/t.jpg');
background-size: cover;
}
Ignore background-size property, it's just for visualization.
Upvotes: 1
Reputation: 5492
If you look closely at the URL for the images it is looking for https://.../t.jpg;
Upvotes: 0