Welcome to WebmasterWorld Guest from 54.144.243.34

Forum Moderators: not2easy

How to move body background to specific XY?

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

WebmasterWorld Senior Member 5+ Year Member



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)

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



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)

WebmasterWorld Senior Member 5+ Year Member



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

10+ Year Member



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 :)
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month