Trying to update header image in CSS file - not updating!

HTML & CSS
1

I’m trying to remove the “Message Boards” graphic in my header: https://www.sports-central.org/images/screenshot.jpg

The image referenced is: https://www.sports-central.org/img/columnsNav.png

We changed that image to remove the Message Boards part (so it’s just plain gray background) and I updated my master.css file so all references point to: /img/columnsNav2023.png

But when I visit my site, the Message Boards part is STILL there. I’ve tried clearing caches, tried on multiple browsers, multiple computers, multiple locations and Internet connections. My web host in Romania says he doesn’t see the Message Boards part, but I do and others in my family do.

Any ideas how to fix this? Here is my master.css file that references this image: /css/master.css (just type in domain name as above, I can’t link it here due to this site’s restrictions)

There’s no logical explanation why this image is showing when we’ve updated the image AND gone as far as changed the image name and all references to it. How can it still be showing? I’ve been trying to fix this for months. Put me out of my misery!

Thank you.

2

When I visited this link…

https://www.sports-central.org

…this is what I saw…

sports-central
sports-central1026×221 26.8 KB

3

That’s what I’m supposed to see, but don’t. How is that possible? This issue is happening on multiple computers, multiple browsers, and I even called a family member 40 minutes away on a different ISP and they confirmed the Message Boards graphic is there. This has been this way for over a month and I can’t figure it out.

4

Well you have this

@media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  #columnsNavLinks {
    background: transparent url(../img/SportsCentral_nav_bar@3x.png) no-repeat;
    background-size: auto;
    height: 42px;
    margin: 0;
    position: relative;
    width: 940px;
    background-size: 100% 100%;
  }
}

start at 990 of your CSS then you have this
at further up in your CSS -

#columnsNavLinks {
  background: transparent url(../img/columnsNav2023.png) no-repeat;
    background-size: auto;
  height: 42px;
  margin: 0;
  position: relative;
  width: 940px;
}

I think the key is the word transparent if it works like anything like Photoshop that could be causing the problem? Though to be honest never really worked with transparent in CSS as I always have done that with png images. :person_shrugging:

5

You did not remove the message boards text from the higher resolution image (SportsCentral_nav_bar@3x.png) that gets used on high-dpi devices.

6

Could it be a cache issue?
You have probably visited the site before and you browser may cache the CSS and use that cache on subsequent visits.
A first time visitor will see the up to date CSS, not a cache of an earlier version.

1 Like
7

The image is triggered by the pixel-ratio media query as already mentioned in a couple of posts.

Screen Shot 2023-11-15 at 17.51.24
Screen Shot 2023-11-15 at 17.51.241023×480 91.3 KB

So depending on whether the criteria is met then you will get the above images.