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.

Reply

I believe
shoulde do it.

Reply

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



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



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:



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

 

 

 

Reply

You can simplify it further by doing this:


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.

Reply

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!

Reply

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.

Reply

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%).

Reply

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...

Reply

Thanks alot

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

Reply