Question

Using CSS, how can I display an image behind some text and also offset it on both the X and Y axis?

I have a design that is 950px wide, so I’m wanting want this image to remain ‘in sync’ with the rest of the header by placing it in a container that is centered and also 950px wide.

My problem is that instead of the image being ‘a layer behind’ the header text, it is instead displaying the image in full and pushing the rest of the contents down.

Any help is greatly appreciated.

IMAGE ADDED FOR CLARIFICATION

Thanks,
Andy.

Answer 1

use Percentage values in your background positions in your css

.divName {
   background-position: 50%;

}

or using words like top or bottom …

See the full list of values here

UPDATE;

use the image as a background image instead of inline html image

<div class='content'>
    <p> Some content</p>
    <p> More content</p>
    .... even more content ...
</div>

Now the css:

div.content {
   background-image: url('image path');
   background-position: 50%;
}

This way the image will always be behind the content, and it will be in the center of the div.