Amezis 0 Report post Posted January 21, 2006 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. Share this post Link to post Share on other sites
moldboy 0 Report post Posted January 21, 2006 I believe background-position: center center; shoulde do it. Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted January 21, 2006 To insert a centred background Image, use this in your body definition inside a linked or @import css file: 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: <body style="background-image: url(named_image.gif/jpg/png); background-position: center;"> 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: 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 Share this post Link to post Share on other sites
Tyssen 0 Report post Posted January 22, 2006 You can simplify it further by doing this: Â 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. Share this post Link to post Share on other sites
Lozbo 0 Report post Posted January 24, 2006 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! Share this post Link to post Share on other sites
moldboy 0 Report post Posted January 24, 2006 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. Share this post Link to post Share on other sites
Tyssen 0 Report post Posted January 24, 2006 I didnt know you could set % or pixels when positioning a backgroundYou 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%). Share this post Link to post Share on other sites
Lozbo 0 Report post Posted January 25, 2006 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. 223715[/snapback] 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... Share this post Link to post Share on other sites
Amezis 0 Report post Posted January 26, 2006 Thanks alot By the way, I also have a background color. But thanks for the code, especially to you Tyssen (the CSS guru ) Share this post Link to post Share on other sites
iGuest 3 Report post Posted March 2, 2010 Is there a CSS script for changing backgrounds on webpages (i.e. slideshows)?Centering Background Image In Css I have a homepage 'profile page' on Singsnap.Com, a karaoke community site. One can load on the profile comment area HTML webcode to design and customize each user's page to their liking. Due to problems with malicious and resource-intensive javascript code on people's pages, they have disabled the use of javascript, but will still allow the use of CSS and DHTML. I am a digital artist who wants to use my art images as backgrounds on my webpage, as a full-page background slideshow beneath all other web content, images cycling through my art images. Is this possible to do in CSS or DHTML, or can javascript code be embedded in CSS so the process can be enabled yet not disabled by the server as javascript? I thank you for your looking into this for me.-question by Coconut Dave Share this post Link to post Share on other sites
vinods 0 Report post Posted March 1, 2011 (edited) <html><head><title></title></head><body><table border=1><tr><center><img src=""></center></tr></table></body></html> use the above code to display the image in center position in the table. Edited May 21, 2012 by moderator (see edit history) Share this post Link to post Share on other sites
hozeyzachary 0 Report post Posted October 22, 2011 <html><head><title></title></head><body><table border=1><tr><center><img src=""></center></tr></table></body></html>use the above code to display the image in center position in the table. the best way to do it is to have the div#mainWRAP margin left & right to auto. but you must specify the width of the intended website(#mainWRAP) else it wont work.have the #mainWRAP as the main container to place all codes in it.but if you want to individually centered an image you have to put a div inside a div and set the outer div to relative position with height and width specified and set the inner div to absolute position with again the width and height as well and set in the absolute left position to 50% and left margin to half of the size of the inner div eg. inner div width is 500px so you set it to -250px. do the same for vertical centering if need be.goodluck!p/s: to move the outer div around the page, use the top & left of relative positioning. Share this post Link to post Share on other sites
