CODEWITHSUNDEEP
cssbackgroundbackground-imagecenter
Verbatus
Verbatus

Reputation: 963

CSS background image positioning

I have a problem with whom I can not cope. Probably the answer is somewhere on the forum but I do not know how to find it.

I have main DIV container aligned to centre. My page has one solid background color but there is a part of the page that must be a background image.

Right part of the image is normal page and left part should be in the background (left top corner of the browser viewport). I dont know how to put an image in the background at exact position and make browser ignore it (no scroll bars etc.). I could put this background image in main DIV container but then how can i center the page properly and make browser treat it as background?

Updated:

------------------------
|     |---------|      |
| xxxxxxx       |      | 
|   xxxx        |      |
|     |         |      |
|     |         |      |
|     |  Page   |      |
|     |         |      |

outer frame is browser viewport
inner frame is my centered page (main DIV)
xxxx - is an image

I had to cut the image in half so one part is included in main DIV conteiner and other should be on the background part of the site. So my question is how can I put an image in the background so it always stays in the same place next to its main DIV part (regardles of the browser viewport size the image should be treated as part of the background - no scrollbars, ignored when pade is centered)

Sorry for my english (I wrote it with the help of google translate)

Upvotes: 0

Views: 623

Answers (1)

Kevin Lynch
Kevin Lynch

Reputation: 24713

This will center the background image

body
{ 
background-image:url('image.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

This will position the background image in the top left of the browser

body
{ 
background-image:url('image.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top; 
}

Upvotes: 2

Related Questions