Centering Background Image In Css

Amezis

Jan 21 2006, 09:14 PM

Well, the title says what I need. Basically, I want a background image that can be used in the body or inside a div (or table), which is centered.

Comment/Reply (w/o sign-up)

moldboy

Jan 21 2006, 11:14 PM

I believe

CODE

background-position: center center;

shoulde do it.

Comment/Reply (w/o sign-up)

jlhaslip

Jan 21 2006, 11:25 PM

To insert a centred background Image, use this in your body definition inside a linked or @import css file:

HTML

body { background-image: url(named_image.gif/jpg/png); background-position: center;}

To include the same information inside the Html file instead of the css file, use:

HTML

At least that's what the book tells me to do.
I believe IE has a few quirks with respect to background Images in anything besides the body, so if you or your clients are using IE to view background Images, there may be some problems doing so.

The above html will centre the image on the 'page'. If the page is longer than the viewport, it may not display properly, if you want to center it at the top of the page and keep it 'fixed' to the top of the page even when you scroll, add the top and fixed properties as below:

HTML

body
{
background-image: url('named_image.gif/jpg/png');
background-repeat: no-repeat; background-position: center top fixed;
}

For reference, use this link: http://www.w3schools.com/css/css_background.asp

Comment/Reply (w/o sign-up)

Tyssen

Jan 22 2006, 08:16 AM

You can simplify it further by doing this:

HTML

body
{
background: url('named_image.gif/jpg/png') no-repeat center top fixed;
}

Keep in mind that for IE, only the body can accept 'fixed' properties. Also, if you wanted to a background image centred horizontally and vertically, it would be background-position: center center. Or it could be background-position: 50% 50%. Or if you knew the exact size of the container it was going into background-position: XXpx XXpx.

Comment/Reply (w/o sign-up)

Lozbo

Jan 24 2006, 07:20 PM

Alright Tyssen! You are indeed a CSS guro hehe, I didnt know you could set % or pixels when positioning a background, thanx!

I would also recommend Amezis to use a background color, so that that while the page loads the image, it still shows the main color of the image you are using. Depending on the image, this might not always be a good idea but if you make a coupple of tests you would see what i mean...

Good luck!

Comment/Reply (w/o sign-up)

moldboy

Jan 24 2006, 07:23 PM

Good point, if your image is a stary night (aka black) and you are writing in yellow, before the image loads the yellow text will be hard to read.

Comment/Reply (w/o sign-up)

Tyssen

Jan 24 2006, 10:31 PM

QUOTE(Lozbo @ Jan 25 2006, 05:20 AM)

I didnt know you could set % or pixels when positioning a background

You can also mix them up - you can have pixels for one value and % for another (although I don't think it works as well if you're using words and values together, e.g. center 50%).

Comment/Reply (w/o sign-up)

Lozbo

Jan 25 2006, 01:34 AM

QUOTE(moldboy @ Jan 24 2006, 01:23 PM)

Good point, if your image is a stary night (aka black) and you are writing in yellow, before the image loads the yellow text will be hard to read.

Yes moldboy, that was exactly what I mean, whatever you have in front of it, will become visible before the image loads, but as i said, this might not be always the best idea, like for example, when you are using the background as a trick to fix a problem with some layouts with floated columns, in order to get visually different background colours between the menu and the main content (with a menu floated to the right, for example) you need to put an image to repeat vertically (the image could be 1px height, and the width should be exactly the same width as the container, lets say 700px, so we will have 500 px red and 200 px blue, so the menu will look like it has a blue bg-color and the content a red one.

I hope you understand me...

Comment/Reply (w/o sign-up)

Amezis

Jan 26 2006, 06:18 PM

Thanks alot

By the way, I also have a background color. But thanks for the code, especially to you Tyssen (the CSS guru

)

Comment/Reply (w/o sign-up)