Google Chrome A:Visited Background Image Not Working

Does Chrome have issue with setting a:visited css properties?

Instead, use the following:

a {
   background-color: white;
}

a:visited{
    background-color: red;
}

For security reasons -- specifically, in order to prevent history sniffing -- Chrome limits very strictly what can be done using the :visited selector.

Google chrome a:visited background image not working

Same problem here.
Changing background-position in a CSS Sprite on a:visited is working for me in Firefox 3.6 but not in Chrome 6.

But probably soon it will stop working in Firefox too. (maybe for FF 4?)

It's a privacy problem, and you can read here a Mozilla article about it (March 2010) http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/
And the bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=147777#c160

I think only possible solution is to use creatively the background-color instead of images.

Why doesn't this a:visited css style work?

Actually, this has nothing to do with case sensitivity. This is a security feature. The functionality of :visited pseudoclass has been restricted in many modern browsers (Fx4, IE9, Chrome) to prevent CSS exploit: read about it here.

Nowadays, getComputedStyle() in these browsers usually returns values for visited links as if they weren't visited. However, I can simply imagine circumventing of that: using font-weight for visited links, the element's width changes so browsers that would allow changing font-weight for :visited links wouldn't actually fix the security hole.

You can see there are some specific things browsers do to protect against this:

• The window.getComputedStyle method, and similar functions such as element.querySelector, will always return values indicating that a user has never visited any of the links on a page.
• If you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited.
• In rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.

Thus, there's no workaround for this issue.

background-image: for :visited links?

Your code is correct according to most specifications. However, many browsers consider background images on visited links a potential violation of user's privacy, so they do not allow it.

Observe this example:

<p><a href="/unvisited">Unvisited link</a></p>

<p><a href="http://jsfiddle.net/">Visited Link</a></p>

<style>
a {
  background:red url("http://placekitten.com/100/101?image=2") center center no-repeat;
  display: block;
  height: 200px;
  width: 200px;
  overflow: hidden;
  text-align: center;
  background-color: red;
}

a:visited {
  background:blue url("http://placekitten.com/100/100?image=1") center center no-repeat;
}
</style>

(Also at http://jsfiddle.net/Yq5GY/1/). Firefox ignores the background image declaration for visited links, and never displays the solo kitten. You can do some differentiation with background color. It's bad usability to rely on images alone, anyhow.

background images showing on chrome but no other browser

First of all, thank you everyone who tried to help, but I've just had moment of enlightenment and solved this problem. still don't know answer why it was working on Chrome, but managed to make it work properly on other browsers now.
What i did:

1. Added "style="background-image: url(''); " as inline style on my html object.
2. Changed url on js function to = img/img_" + rnd + ".jpg . Because it goes from html file. My previous url basically was looking for imgages outside of project folder.

Again, thanks everyone who tried to help.

chrome not showing background image in parent div tag

Have you tried putting quotes around the image's url?

#maindiv
{
    width:55%;
    background-image:url('F:/sem5/web tech/13sand.jpg');
    overflow:hidden;
}

Why would my background image show up in Chrome but not in IE?

The only thing that I can think of that could be causing this is that the JPEG file is in CMYK format rather than JPG. IE can't digest CMYK images.

I think a layout issue might be more probable, though. Are you 100% sure the DIV is stretching to where you expect it to stretch? What happens if you set a background colour?

Why won't my visited link have a background color?

The background-color on a:visited only seems to work (as Dave said above, in FF, Chrome and Safari) if the normal a has a background-color, either explicitly defined or through inherit (the direct parent must actually have a background-color for this to be true).

Obviously it is not ideal to have to define a background-color for a all the time, as the site may have a background image.

CSS bug..?

---

Related Topics