homepage Welcome to WebmasterWorld Guest from 54.227.67.175
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
How to move body background to specific XY?
toplisek




msg:4356286
 2:22 pm on Aug 29, 2011 (gmt 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?

 

penders




msg:4356294
 2:52 pm on Aug 29, 2011 (gmt 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;
toplisek




msg:4356318
 3:40 pm on Aug 29, 2011 (gmt 0)

So, no-repeat center 200px transparent; will be automatic Y not as X?

Paul_o_b




msg:4356325
 3:55 pm on Aug 29, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved