0

how can i apply the same Backgrond image position for my image in different desktop devices?

This is the page where there is the background image : http://tommywebdesigner.com/Vision%20General.html

Here my code:

#vision {
background-attachment: fixed;
background-image: url("/img/lapedrera.jpeg");
background-position: 85% 62%;
box-shadow: 2px 1px 6px 0 #888888 inset;
height: 350px;
margin-top: 35px;
width: 100%;

}

If you have a look by this tool http://quirktools.com and paste the url, you see that in different desktop devices the background-image change the position, how can i make my image having the same position as background-image in different desktop devices?

Hope the explanation is clear

Koala7
  • 1,340
  • 7
  • 41
  • 83

1 Answers1

0

I'm not sure, if I understand your question correctly. If you want the image to display the same area regardless of how much you scroll down, you'll have to remove this attribute:

background-attachment: fixed;

Martin
  • 2,302
  • 2
  • 30
  • 42
  • 1
    You can set the to: background-position: center 1115px; Then you can keep the background-attachment: fixed; – Martin Sep 08 '12 at 18:05
  • Ok, cool it seems working right, could you explain me the meaning of that? thanks a lot – Koala7 Sep 08 '12 at 18:10
  • 1
    You set the background-position to a percentage value. That measures the size of the visiting browser. The center value tells the image display centered inside the div element. The 1115px tells where on the y-axis to start showing the image. In this way, you're able to make it look the same in different screen resolutions. – Martin Sep 08 '12 at 18:13