You can define CSS declarations only for Mozilla Firefox by using the following scheme:
<style type="text/css"> @-moz-document url-prefix() { html { background: url('https://developer.mozilla.org/@api/deki/files/274/=Moz_ffx_openStandards_1680x1050.jpg') no-repeat; } } </style>
To center an image properly in a HTML page you have to make it a block element. This can be done with CSS like this:
HTML:
<img id="logo" src="images/timer.png" />
CSS:
#logo{ display: block; margin: 0 auto; }
In a production site you always want to have minified and obfuscated code (i.e. CSS and JavaScript files) so that the file content is as small as possible because this will save bandwidth and loading time. The best known and easiest tool for this is the YUI Compressor from Yahoo!.
In a Java Enterprise application, the YUI Compressor can be integrated very easy with Maven. All you need is the Maven Minify Plugin. That’s how to use it: …weiterlesen
#header { width: 100%; height: 142px; background-image: url('./images/header.png'); background-repeat: no-repeat; background-position: 50% 100%; }
Here you can see how to mirror a background image with some cool new CSS3 attributes:
1 2 3 4 5 6 7 8 9 10 11 12 13 | #background { background-image: url('./images/myBackground.png'); width: 1024px; height: 768px; /* Mirror the background image */ -webkit-transform: scaleX(-1); -khtml-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } |
Ein Code sagt mehr als tausend Worte:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Centering a Div horizontally and vertically</title> <style type="text/css"> html { background-color: black; } body { width: 100%; height: 100%; position: static; /* don't make it relative! */ } #centered { position: absolute; height: 396px; width: 400px; margin: -198px 0px 0px -200px; /* 50% height, 0px, 0px, 50% width */ top: 50%; left: 50%; background-color: violet; border: 1px solid white; } </style> </head> <body> <div id="centered"></div> </body> </html> |
0