Jump to content
xisto Community
Sign in to follow this  
Amezis

Centering Background Image In Css

Recommended Posts

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

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

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

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

Share this post


Link to post
Share on other sites

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

<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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.