Welcome to WebmasterWorld Guest from 54.146.46.195

Forum Moderators: not2easy

Message Too Old, No Replies

How to move body background to specific XY?

     
2:22 pm on Aug 29, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 1006
votes: 0


I have body background as following:
html, body{
background: url(../images/homepage/body1f.gif) no-repeat center 200px transparent;
height: 100%;
}

How to move body background to specific XY?Is 200px vertical and horizontal?
2:52 pm on Aug 29, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


background: url(../images/homepage/body1f.gif) no-repeat center 200px transparent;


X = center
Y = 200px

Also, I think you need to specify the background-color (ie. transparent) first in the background shorthand property (or may be the browsers cope?). eg...

background: transparent url(../images/homepage/body1f.gif) no-repeat 100px 200px;
3:40 pm on Aug 29, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 1006
votes: 0


So, no-repeat center 200px transparent; will be automatic Y not as X?
3:55 pm on Aug 29, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


The first value is horizontal and the second value is vertical. So "center 200px" will be the same as "50% 200px".

Which means that the point that is 50% along the horizontal axis of the image will be placed at the 50% horizontal position of the element it is placed in thus aligning it horizontally central. The second value "200px" is the vertical and will place the image down from the top of the element by 200px.

When using keywords only then browsers can work out the position so it doesn't matter what order you use them in (e.g. "top left" or "left top" will both work) but it is still better to state them with horizontal fist followed by vertical.

You do not need to add transparent (unless over-riding a previous setting) because that is the default and will just be like stating the obvious :)