Take the 2-minute tour ×

I'm creating a website with a full image background, and I have a number of images I want to lay over the top, but if I align the images so they look good on my resoultion anyone with a smaller screen or bigger instantly the images look like they were just ploop'd ontop.

Heres my example - http://www.xronn.co.uk/avatar

Do you know of methods I can use so images will be standing on parts of the background for all screens, or atleast so they look decent.


share|improve this question

closed as not a real question by Sparky, vzwick, Alex Coplan, Jack, Frank van Puffelen Dec 17 '12 at 22:08


Media queries and position: fixed? –  BenM Dec 17 '12 at 18:15
Do you have a specific programming question? –  Sparky Dec 17 '12 at 18:18

1 Answer 1

To display an HTML element at a specific position you can use a positionning method called absolute positionning. This is done by setting the position CSS property to absolute. In cases such as yours, it's better than to hack the natura html flow with margin and float attributes, which are not meant to serve this kind of purposes.

This enables you to use the top, left, right and bottom to absolute. These four attributes specify the distance between an edge of the element and the same edge of it's reference. The reference is the nearest ancestor which position is relative or absolute.

You can specify values of these attributes in px, em, %, etc...

Of course, you will not specify more that 2 attributes of left, width and right for obvious reasons, and the same for top, height and bottom.

In your case, it might be good to specify the bottom attributes and left or right with percentages.

share|improve this answer
