CODEWITHSUNDEEP
htmlcss
Filip Fahlström
Filip Fahlström

Reputation: 3

Strange image swap error on website

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

Answers (3)

Somosfeer
Somosfeer

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

t.niese
t.niese

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

Rushikumar
Rushikumar

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

  1. Download the image (provided it's downloadable from legal standpoint) onto your local machine
  2. Place it in your project folder---in an appropriate location
  3. Modify background-image in CSS to point to the local image

Upvotes: 0

Related Questions