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.
| |
|
Welcome to KnowledgeSutra - Dear Guest 
, Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply
w/o Sign-Up!
| |
0
11 replies to this topic
#3
-
- [MODERATOR]
-
- 5,040 posts
Insert Custom Title Here
- Gender:Not Telling
- Location:Linux, DOS and Windows…the good, the bad and the ugly
- myCENT:81.07
-
Posted 21 January 2006 - 11:25 PM
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..._background.asp
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..._background.asp
#4
-
- Kontributors
-
- 1,161 posts
- Location:Brisbane, QLD
Posted 22 January 2006 - 08:16 AM
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.
#5
-
- Kontributors
-
- 282 posts
Super Member
- Location:Wanatos
- Interests:Multimedia Arts and Technologies =)
Posted 24 January 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!
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!
#7
-
- Kontributors
-
- 1,161 posts
- Location:Brisbane, QLD
Posted 24 January 2006 - 10:31 PM
Lozbo, on Jan 25 2006, 05:20 AM, said:
I didnt know you could set % or pixels when positioning a background
#8
-
- Kontributors
-
- 282 posts
Super Member
- Location:Wanatos
- Interests:Multimedia Arts and Technologies =)
Posted 25 January 2006 - 01:34 AM
moldboy, on Jan 24 2006, 01:23 PM, said:
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.
I hope you understand me...
)
#10
-
- Kontributors
-
- 5,876 posts
Hail Caesar!
- Interests:Trap17 Free Web Hosting, No Ads
Posted 02 March 2010 - 05:48 PM
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 DaveReply to this topic
1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users
