Reputation: 3
I have no idea how this is not working.
This is the image I try to add to my website:
background-image:
radial-gradient( circle at 50% 50%, rgba( 0,0,0,0.46 ), rgba( 0,0,0, 0.88 ) ),
url( 'https://picsum.photos/1600/1400/?image=630' );
From the beginning it looked like this:
background-image:
radial-gradient( circle at 50% 50%, rgba( 0,0,0,0.46 ), rgba( 0,0,0,0.88 ) ),
url( 'http://unsplash.it/1600/1400?random=9' );
Still I get this random picture when I doesn't even have the code anywhhere?
Inspect element when I'm in chrome(can't find my new code):
background-image:
radial-gradient( circle at 50% 50%, rgba( 0,0,0,0.46 ), rgba( 0,0,0,0.88 ) ),
url( http://unsplash.it/1600/1400?random=9 );
www.filipfahlstrom.se is the website if you want to check aswell.
I'm 100% sure it's the theme.css and I have saved the file and uploaded it to the domain.
Upvotes: 0
Views: 86
Reputation: 72
You question is too vague to get a solid answer. Which file are you calling background-image:radial...ect from?. How is not working, it the code simply not showing up or is it throwing an error in the console?
Here are some common errors of this issue.
-If that file is not showing up in then you are not calling your css file correctly.
-Try adding !important to your css which may have a conflict with your theme.css
-Hard reload browser and clear cache.
-Often when I make very small changes to my code and re-upload it to my server, it can take up to a few minutes for the server to realize the change and update it to reflect the changes when being served.
-Simplify, try rendering the images, before adding the extra styles. Once it renders, then get it to render externally, then add css to it.
Upvotes: 1
Reputation: 40882
The image is shown correctly here. The problem on your side is most likely that the old theme.css
is still in the browser cache.
The theme.css
file is send with a Cache-Control:max-age=3600, public
header. As of that the browser is free to load the file from cache for the next 3600
seconds before it does a check if the file has changed.
In Chrome you can see this in the Network
tab of the developer tools, there you can see (from memory cache)
in the Size
column when it is loaded from cache.
While developing a website you can avoid this problem by checking the Disable cache
checkbox in the Network
tab of the developer tools.
Or use cmd shift r to do a force reload.
Upvotes: 0
Reputation: 1812
Take a look at the actual background URL: http://unsplash.it/1600/1400?random=9
Each time you are loading your page, it gives you a random image (don't refresh the page... instead, go to the same URL again to see it give a different image) --- this is because you are providing a URL of a page and not that of an image.
Here's what I recommend--
background-image
in CSS to point to the local imageUpvotes: 0