Setting a background image in a div, position options

Question

I know how to set a background in a div like:

background: url(/images/image.gif) no-repeat top right;

Sometimes I need more fine grained control, other than say top, center or bottom.

I have seen people using 'em' in the position section, what is that doing?

Answer 1

See w3schools' explanation of background-position. Instead of general terms, you can also use percentages or other CSS units of measurement to set an x- or y-offset. em is a unit that refers to the font size for the current element, but you can also use px for pixel offset.

Answer 2

Keep in mind the em is a RELATIVE size - so a 1em is a relative to my container and NOT actual size. A 1, is a 1em based on my browsers default.

So a parent (say .parent) class with a 1em and a child with a 0.75em would be .75 of the parent. A grandchild of that parent with 0.5em would be 0.5em of the 0.75, or approx 0.375 of the original 1em and not 0.5 of that original.

I don't use .px - it is easier to start, but when you need to change everything, you need to change it everywhere - so if you change the 1em to a 1.25em, it also changes the child and grandchild nested within those.

for a concrete example, if I put a margin-top: 0.5em; in a CSS, I am saying to put half the height of my current font as the top margin.

.px - pixels which change depending on the monitor setting and has origins in screen resolution. .pt - is point, which means that on a printed page, 72 point is approx 1 inch - it has origins in printed material. % has origins in well, percentage, and I find it more difficult to manage long term. em has origins in markup.

Most browsers have 12pt (point) font as the base (if I remember correctly), which is 1em, which is - an unknown number of pixels really. SO, off the cuff if I remember .625em is approx 10pt, so if I set the body to .625em, then my .5em below that is 5 point in size, 2em below the body would be 20 point and so forth.

EDIT: my math bites at the end of the day :) so 10/12 is .8333 - so we need .8333 not .625, but you get the idea.

Answer 3

Gradients can be controlled by

background:#fff url(images/vertical_sliced_image.gif) repeat-y;

or

background:#fff url(images/horizontal_sliced_image.gif) repeat-x;

You can slice 1px height or 1px width (Gradient image) and repeat it in the background horizontally or vertically...

hope this helps