Search code examples
cssbackground-position

CSS strange behavior for background-position

I have this CSS to show a water mark inside a div:

background-image: url("../Images/Watermark02.png") !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

the behavior is shown in the below image, can somebody help me and tell me what is missing to get it to work on Chrome just like FF?

enter image description here

Solution

  • You can fix this by removing background-attachment: fixed. The "fixed" value is relative to the screen, not the you have the background image inside of. Granted it's possible this is due to something else, but I will need to see the rest of your CSS/HTML.

    background-attachment: fixed; /* Remove this */

    I've set up a jsfiddle for you here: http://jsfiddle.net/HkBh4/