using css, how to position image so when resizing window, image will not move


Tags: css,image,positioning

Problem :

i was wondering if anyone could help me with css. ive been stuck on using background-attachment:fixed;

it just doesn't seem to work. im basically trying to make an image a link, but i don't want it to scroll so i made it into a bg image. i have...

<a href="/contents/selection" title= "Manage selection." id="f-logo" style="background-image:url({{STATIC_URL}}images/flowsTab_normal.png);background-attachment:fixed;background-repeat:no-repeat;display:block; height: 90px;width: 130px;"> </a>

when i take out background-attachment:fixed, i see the image, but once i put it in, it disappears. i deliberately left out text between the anchor tags so the image is like a clickable link : D

ive been super stuck. help would be much appreciated. thanks! css syntax is confusing...



Solution :

Simply add a character to your anchor tag. A non breaking space will do the trick.

See my example on the very useful tool, jsfiddle.net.


    CSS Howto..

    How do I constraint an animation using only CSS and HTML?

    how to remove elements in document fragment after append

    How to let the users style a web component with their own CSS?

    c# cassette - how to create different css bundles for different pages

    How would I change the code to work with a table instead of body? [closed]

    How to reduce space between unordered list and its previous element(center)?

    CSS selector for showing descendants doesn't work properly

    how to make a left aligned navigation with dropdown elements

    How can CSS translate elements away from one point?

    how to add css padding for button such that it is consistent with column width?

    How can i inherit properties from the css id rule to the css class?

    how to make website more user friendly for mobile users [closed]

    How to set just a percentage of a color in CSS?

    Changing my web-font in css caused a my old font-size values defined in “em” to be inaccurate. How to fix it?

    How to keep the footer docked at the bottom of the page considering following structure? [duplicate]

    How to inherit css from grandparent tag? [duplicate]

    How to add a class to a bar using jQuery?

    How to center an absolutely positioned item in CSS

    how to avoid overlapping of text

    How do I make the link in the back div clickable

    How to visually position image before heading element

    How to create a Page Header (an Image) for print using css

    How to convert a HTML/CSS template to haml/sass template? [closed]

    How to display a box of color beside a table row using CSS?

    how to interactively toggle CSS sheets(s) on a webpage for testing/learning purposes?

    Simple CSS: How to fix display:inline issue

    How to shrink wrap floating content?

    Tab content not showing up

    CSS How to properly replace links by button background

    How to make pagination's circle of slider using CSS only?