 Fixed Background Image, Just little reminder |
|
|
|
|
  |
 Oct 4 2005, 05:04 AM
Post
#1
|
|
|
Member [Level 1]  Group: Members Posts: 52 Joined: 17-July 05 From: hong kong Member No.: 9,520  |
Easy teahnic, post the following codes between <head>and </head>
QUOTE <style type="text/css"> <!-- body{background-image: url(under.gif); background-repeat:no-repeat; background-attachment : fixed; background-position: 10% 20%;} --> </style> For red colour, change it to your image's location. For green colour, it is used to set horizontal and vertical position of background image. I hope it can help you. 
|
 |
 
|
|
Oct 4 2005, 05:25 AM
Post
#2
|
|
|
Group: Members Posts: 1,161 Joined: 9-May 05 From: Brisbane, QLD Member No.: 6,818 |
Be aware that background-attachment: fixed only works on the body tag in IE. Other browsers support it for all elements.
A better way to do what you've done is with shorthand CSS: CODE body { background: url(under.gif) no-repeat fixed 10% 20%; } You can also use other values for your horizontal & vertical dimensions like pixels and ems. |
|
|
|
|
Oct 4 2005, 05:53 AM
Post
#3
|
|
|
Member [Level 1] Group: Members Posts: 52 Joined: 17-July 05 From: hong kong Member No.: 9,520 |
QUOTE(Tyssen @ Oct 4 2005, 01:25 PM) Be aware that background-attachment: fixed only works on the body tag in IE. Other browsers support it for all elements. A better way to do what you've done is with shorthand CSS: CODE body { background: url(under.gif) no-repeat fixed 10% 20%; } You can also use other values for your horizontal & vertical dimensions like pixels and ems.  O!! thanks a lot. I dont know that can use CSS. It is shorter than my code. I add this to my library website now 
|
|
|
|
|
Oct 4 2005, 03:03 PM
Post
#4
|
|
|
Trap Grand Marshal Member Group: Members Posts: 1,205 Joined: 25-March 05 Member No.: 4,883 |
As Tyssen has noted about the compatibility with IE, I'll take this chance to say that having CSS on webpages can be cool and easy management of the look and feel of the webpages. However, CSS can also cause huge and major compatibility problems and errors on different browsers. Fortunately, Firefox browser is able to respond quite close to IE, but still a little issue if you have been noticing and developing webpages for long.
Unfortunately, Opera and other browsers appear quite differently from Firefox and IE. Developing HTML webpages has been easy for me. Instead of javascripts, CSS is the real headache when I view my developed pages on different browsers as they need to look identical on different browsers to be of industrial standard. I took alot of time of this compatibility issue. Definately I'm not going to ignore the look and feel for Opera users and focus on Firefox and IE. The alternative method that Tyssen pointed is a very good example for the compatibility issue. Another one is the iframe transparency, which Opera doesn't follow the CSS methods that Firefox and IE does. Worst still, the usages for the CSS 2, a next generation of CSS, where multimedia can be added, from images to flash, audio to video, to provide the worst case compatibility issue. My point to we developers out there is to download different browsers and test your webpages on them before publishing on the Internet. I bet you wouldn't want visitors using different browsers to leave a bad impression on your site if the looks are not as what you expected.. Happy developing.. |
|
|
|
|
Oct 4 2005, 07:24 PM
Post
#5
|
|
|
A computer once beat me at chess, but it was no match for me at kick boxing.  Group: [MODERATOR] Posts: 4,077 Joined: 24-July 05 From: Linix, DOS and Windows…the good, the bad and the ugly Member No.: 9,787  |
And how to add opacity to the above code listing?
Is opacity an issue between browsers as well? I try to test using IE, Firefox and Opera to get 'similar' pages. Because of the browser compatibility issues they will never be 'the same', so I don't even try. |
|
|
|
|
Oct 4 2005, 10:48 PM
Post
#6
|
|
|
Group: Members Posts: 1,161 Joined: 9-May 05 From: Brisbane, QLD Member No.: 6,818 |
Opera doesn't currently support opacity.
|
|
|
|
|
Oct 6 2005, 10:53 PM
Post
#7
|
|
|
Member [Level 1] Group: Members Posts: 63 Joined: 3-October 05 Member No.: 12,515 |
I think that an easy fix to this issue would be to write a jscript that determines the browser type and have a different stylesheet for each browser.
|
|
|
|
|
Oct 6 2005, 11:32 PM
Post
#8
|
|
|
Group: Members Posts: 1,161 Joined: 9-May 05 From: Brisbane, QLD Member No.: 6,818 |
QUOTE(Re_Atum @ Oct 7 2005, 08:53 AM) I think that an easy fix to this issue would be to write a jscript that determines the browser type and have a different stylesheet for each browser. For the most part, it's only IE that won't do the things you want it to or displays stuff differently (incorrectly) from other browsers. You can use IE conditional comments in your HTML to serve up different styles for IE which means your site won't look broken for people who have javascript turned off. |
|
|
|
|
Oct 8 2005, 12:08 AM
Post
#9
|
|
|
Super Member Group: Members Posts: 282 Joined: 1-September 05 From: Wanatos Member No.: 11,382 |
What are those IE conditional comments? You mean for CSS?
I usually dont like the back ground fixed, but if when you have the right image or design, it can look pretty cool... |