Advertisement
decembre

CSS - BACKGROUND v.1

May 8th, 2016
195
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.15 KB | None | 0 0
  1.  
  2.  
  3. ============================
  4. ======== CSS - BACKGROUND v.1 - POSTé
  5. ============================
  6.  
  7. ============================
  8. RED eteint
  9. background: indianred !important;
  10. RED Tomate
  11. background: tomato !important;
  12. JAUNE eteint
  13. background: khaki !important;
  14.  
  15.  
  16. background: orange !important;
  17. background: cyan !important;
  18. ============================
  19. ======== BACKGROUND - STRIPED
  20. == http://anton.kovalyov.net/p/zebra-table-css/
  21. striped backgrounds to their tables. Seriously, this is what people are using:
  22.  
  23. background-image:
  24. repeating-linear-gradient(white, white 25px, hotpink 25px, hotpink 50px);
  25. ============================
  26. ======== BACKGROUND - MOZ ADDON - STRIP YELLOW BROWN BACKGROUN:
  27. == https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/?src=collection&collection_id=534c7891-700f-40e9-8cfa-ba02d483241c
  28. background: url("https://addons.cdn.mozilla.net/media/img/impala/warning-bg.png?b726031") repeat scroll 0 0 transparent;
  29. background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%) repeat scroll 0 0%, -moz-repeating-linear-gradient(-45deg, #F0B500, #F0B500 7px, #FFD000 7px, #FFD000 14px) repeat scroll 0 0 transparent;
  30.  
  31. ============================
  32. ======== BACKGROUND Blueprint (TWEAK GRAY) - codepen.io
  33. == http://codepen.io/larsbeck/pen/Ikbqx
  34.  
  35. @namespace url(http://www.w3.org/1999/xhtml);
  36.  
  37. @-moz-document domain("codepen.io") {
  38.  
  39.  
  40. /* TEST - BACKGROUND Blueprint - codepen.io ==== */
  41. body {
  42. display: inline-block ! important;
  43. position: absolute ! important;
  44. width: 100% ! important;
  45. height: 100% ! important;
  46. /* GRID */
  47. background: radial-gradient(circle, rgba(255, 255, 255, .3), transparent),linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),linear-gradient(90deg,rgba(255, 255, 255, .5) 1px, transparent 1px),linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px),linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px) ! important;
  48.  
  49. /* BACKGROUND BLUE PRINT = (rgb(0, 100, 150) */
  50. /* background-color: rgb(0, 100, 150) ! important;*/
  51.  
  52. /* BACKGROUND GRAY = #D8D8D9 or rgb(216, 216, 217) */
  53. background-color: #D8D8D9 ! important;
  54. background-color: rgb(216, 216, 217) ! important;
  55.  
  56. background-size: cover,5rem 5rem ,5rem 5rem,1rem 1rem,1rem 1rem ! important;
  57. background-position: 50% 50% ! important;
  58. box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5) ! important;
  59. z-index: 5000000 ! important;
  60. }
  61. /* TEST - Blueprint - codepen.io ==== */
  62.  
  63. }
  64. ============================
  65. ======== BACKGROUND GRADIEN - DARK BLUE -
  66. == http://userstyles.org/styles/45888/userstyles-dark-n-blue-version-ii
  67.  
  68. header, button, input[type="submit"],
  69. input[type="file"] > input[type="button"],
  70. #new-setting input[type="button"],
  71. #bottomNavClose:after,
  72. a.BigButton {
  73. background: -moz-linear-gradient(center top , #454E5F 48%, #262A31 49%, #0F0F0E 85%, #303A5D) repeat scroll 0 0 transparent !important;
  74. font-weight: bold !important;
  75. text-shadow: 1px 1px 1px #000000 !important;
  76. }
  77. ============================
  78. ======== BACKGROUND PATERNS - Lined paper , by Sarah Backhouse
  79. == http://lea.verou.me/css3patterns/#
  80. == http://lea.verou.me/css3patterns/#lined-paper
  81. background-color: #fff;
  82. background-image:
  83. linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
  84. linear-gradient(#eee .1em, transparent .1em);
  85. background-size: 100% 1.2em;
  86.  
  87. Enhancing with CSS3
  88.  
  89. All the applications included in this article could be further enhanced
  90. to take advantage of present-day CSS3 implementations.
  91.  
  92. Using border-radius, rgba, and transforms, and CSS3 multiple background images
  93. in tandem with pseudo-elements can produce even more complex presentations that
  94. I hope to include in a future article.
  95. Currently there is no browser support for the use of CSS3 transitions or animations on pseudo-elements.
  96. In the future: CSS3 pseudo-elements
  97.  
  98. The proposed extensions to pseudo-elements in the CSS3 Generated and Replaced Content Module
  99. include the addition of nested pseudo-elements (::before::before),
  100. multiple pseudo-elements (::after(2)),
  101. wrapping pseudo-elements (::outside),
  102. and the ability to insert pseudo-elements into later parts of the document (::alternate).
  103.  
  104. These changes would provide a near limitless number, and arrangement,
  105. of pseudo-elements for all sorts of complex effects and presentations using just one element.
  106.  
  107. ============================
  108. ======== BACKGROUND PATERNS - Horizontal stripes
  109. == http://lea.verou.me/css3patterns/#
  110. == http://lea.verou.me/css3patterns/#horizontal-stripes
  111. background-color: gray;
  112. background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
  113. background-size: 50px 50px;
  114.  
  115. Example code: fluid faux columns
  116.  
  117. Another application is creating equal height fluid columns without images or extra nested containers.
  118.  
  119. The HTML base is very simple. I’ve used specific classes on each child div rather
  120. than relying on CSS 2.1 selectors that IE6 does not support. If you don’t require IE6 support you don’t actually need the classes.
  121.  
  122. <div id="faux">
  123. <div class="main">[content]</div>
  124. <div class="supp1">[content]</div>
  125. <div class="supp2">[content]</div>
  126. </div>
  127.  
  128. The percentage-width container is once again relatively positioned and a positive z-index is set.
  129. Applying overflow:hidden gets the element to wrap its floated children and will hide the overflowing pseudo-elements.
  130. The background colour will provide the colour for one of the columns.
  131.  
  132. #faux {
  133. position:relative;
  134. z-index:1;
  135. width:80%;
  136. margin:0 auto;
  137. overflow:hidden;
  138. background:#ffaf00;
  139. }
  140.  
  141. By using relative positioning on the child div‘s you can also control
  142. the order of the columns independently of their source order.
  143.  
  144. #faux div {
  145. position:relative;
  146. float:left;
  147. width:30%;
  148. }
  149.  
  150. #faux .main {left:35%}
  151. #faux .supp1 {left:-28.5%}
  152. #faux .supp2 {left:8.5%}
  153.  
  154. The other two full-height columns are produced by creating, sizing,
  155. and positioning pseudo-elements with backgrounds.
  156. These backgrounds can be (repeating) images if the design requires.
  157.  
  158. #faux:before,
  159. #faux:after {
  160. content:"";
  161. position:absolute;
  162. z-index:-1;
  163. top:0;
  164. right:0;
  165. bottom:0;
  166. left:33.333%;
  167. background:#f9b6ff;
  168. }
  169.  
  170. #faux:after {
  171. left:66.667%;
  172. background:#79daff;
  173. }
  174.  
  175. ============================
  176. ======== MULTIPLE BACKGROUNDS AND BORDERS WITH CSS 2.1
  177. == http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
  178. Using CSS 2.1 pseudo-elements to provide up to 3 background canvases,
  179. 2 fixed-size presentational images, and multiple complex borders for a single HTML element.
  180. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required.
  181.  
  182. Demo: Multiple Backgrounds with CSS 2.1
  183. Demo: Multiple Borders with CSS 2.1
  184.  
  185. Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.
  186. How does it work?
  187.  
  188. Essentially, you create pseudo-elements using CSS (:before and :after)
  189. and treat them similarly to how you would treat HTML elements nested within your target element.
  190. But they have distinct benefits — beyond semantics — over the use of nested HTML elements.
  191.  
  192. To provide multiple backgrounds and/or borders, the pseudo-elements are pushed behind the content layer
  193. and pinned to the desired points of the HTML element using absolute positioning.
  194.  
  195.  
  196. ============================
  197. ======== MULTIPLE BACKGROUNDS
  198. == http://www.tutorialsavvy.com/2013/01/css3-multiple-backgrounds.html
  199. Indian Flag (Css3 Multi Background):-
  200.  
  201. <!DOCTYPE html >
  202. <html>
  203. <head>
  204. <title>Indian Falg (Using CSS3 Multiple Background Demo)</title>
  205. <style>
  206. .flag-container{
  207. display: block;
  208. margin: 1em;
  209. padding: 1em;
  210. background-image: url(orange.bmp), url(chakra.bmp),url(green.bmp);
  211. background-repeat: repeat-x, no-repeat,repeat-x;
  212. background-position: left top, center center, left bottom;
  213. border :1px solid grey;
  214. padding: 5px;
  215. height:400px;
  216. width:600px;
  217. padding-top: 10px;
  218. color : green;
  219. font-weight: bold;
  220. }
  221. </style>
  222. </head>
  223. <body>
  224. <div class="flag-container">
  225. </div>
  226. </body>
  227. </html>
  228.  
  229.  
  230. ============================
  231. ======== BACKGROUND == SETTING PADDING ON BACKGROUND IMAGES
  232. == http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level/
  233.  
  234. Since background images don’t create a new CSS box you can’t directly set padding on them.
  235. What you want to do is use the background-position property
  236. on the background image to create the same effect.
  237.  
  238. background-position {top-value left-value}
  239.  
  240. Top values can be top, center, or bottom and Left values can be left, center, or bottom
  241.  
  242. Both can also take values in % or px or any other measurement.
  243. So to create 5px of padding around a background image you would use:
  244.  
  245. {background-position: 5px 5px
  246.  
  247.  
  248.  
  249. ============================
  250. ======== BACKGROUND == STRETCHING A BACKGROUND Image
  251. == http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level/
  252.  
  253. To create a background image that can expand and contract with it’s containing element
  254. you want to create an image larger than needed, large enough to accommodate
  255. the largest possible size of the containing element.
  256. Then use the background-position property to center the background image
  257.  
  258. {background-position: 50% 50%}
  259.  
  260. The above will center your background image in the containing element.
  261. The image will grow and shrink to fit the size of the containing element
  262. and always be centered. You’ll want to make sure the center of the image
  263. contains the most important part of the image since only the center is guaranteed to visibly show.
  264.  
  265. ============================
  266. ======== BACKGROUND-CLIP = Transparent Borders with
  267. == http://css-tricks.com/transparent-borders-with-background-clip/
  268.  
  269. You might think it would be as simple as this:
  270.  
  271. #lightbox {
  272. background: white;
  273. border: 20px solid rgba(0,0,0,0.3);
  274. }
  275.  
  276. However, setting a transparent border on an element will reveal
  277. the elements own background underneath the border.
  278. the borders use RGBa to be transparent, but they appear solid gray
  279. because they are only revealing the solid white background of itself below.
  280.  
  281. Fortunately there is a CSS3 property to save us!
  282. BACKGROUND-CLIP and specify which portion
  283. of the box model should be utilized to display the background.
  284. It cuts off the background at the specified portion of the box.
  285.  
  286. 3 VALUES and vendor prefixes do get involved.
  287.  
  288. BORDER-BOX
  289. -moz-background-clip: border; /* Firefox 3.6 */
  290. -webkit-background-clip: border; /* Safari 4? Chrome 6? */
  291. background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
  292.  
  293. PADDING-BOX
  294. -moz-background-clip: padding; /* Firefox 3.6 */
  295. -webkit-background-clip: padding; /* Safari 4? Chrome 6? */
  296. background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
  297.  
  298. CONTENT-BOX
  299. -moz-background-clip: content; /* Firefox 3.6 */
  300. -webkit-background-clip: content; /* Safari 4? Chrome 6? */
  301. background-clip: content-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
  302.  
  303. }
  304.  
  305. ============================
  306. ======== BACKGROUND == Multiple Backgrounds and CSS Gradients.
  307. == http://snook.ca/archives/html_and_css/multiple-bg-css-gradients
  308. == http://snook.ca/pages/demo/bg-image
  309.  
  310. - BASE DEMO:
  311. background: url(/img/acceldom.jpg) 10px 10px no-repeat;
  312.  
  313. - Only one background-size value :
  314. background: url(/img/acceldo 10px 10px nom.jpg)-repeat;
  315. background-size: 50%;
  316. -o-background-size: 50%;
  317. -webkit-background-size: 50%;
  318. -moz-background-size: 50%;
  319.  
  320. - Multiple Backgrounds
  321. When declaring background size for multiple backgrounds,
  322. the declarations are separated by commas just like with background-image.
  323.  
  324. background-image: url(…), url(…);
  325. background-size: 10px 100px, 5px 5px
  326.  
  327. - background-size: contain :
  328. Cover will make sure that the background image covers the element.
  329.  
  330. background: url(/img/acceldom.jpg) 10px 10px no-repeat;
  331. background-size: contain;
  332. -o-background-size: contain;
  333. -webkit-background-size: contain;
  334. -moz-background-size: contain;
  335.  
  336. - Background-size: cover :
  337. Contain makes sure that the entire background image is visible within the element.
  338.  
  339. background: url(/img/acceldom.jpg) 10px 10px no-repeat;
  340. background-size: cover;
  341. -o-background-size: cover;
  342. -webkit-background-size: cover;
  343. -moz-background-size: cover;
  344.  
  345. - Gradients
  346. background: url(/img/acceldom.jpg) 10px 10px no-repeat;
  347. background:
  348. url(/img/acceldom.jpg) 10px 10px no-repeat,
  349. -webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat,
  350. -webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat;
  351. background:
  352. url(/img/acceldom.jpg) 10px 10px no-repeat,
  353. -moz-linear-gradient(#EEF, rgba(0,0,0,1)) 300px 50px no-repeat,
  354. -moz-linear-gradient(#EFE, rgba(0,0,0,1)) 0 0 no-repeat;
  355.  
  356.  
  357. ============================
  358. ======== BACKGROUND == Background url for TUMBLR
  359. == http://forum.userstyles.org/discussion/34648/my-style-isnt-working-any-ideas
  360. The background URL links to a web page, not to an image. Fix the URL.
  361. The background image is a bazillion times bigger than the box you're putting it in.
  362. Either set background-size to resize it, or use a smaller image.
  363. You're replacing a background image, not an IMG element.
  364. Just set a new background, and resize and reposition the element if necessary. (I don't think that it is.)
  365.  
  366. Here's the result:
  367.  
  368. @-moz-document url-prefix('http://www.tumblr.com/') {
  369. #header #inbox_button a {
  370. /* change the size of the button */
  371. /*height: 30px !important; width: 30px !important;*/
  372.  
  373. /* change the position of the button */
  374. /*top: 5px !important; left: 0 !important; */
  375.  
  376. /* change the background image, center it, and scale it to fit inside the box */
  377. background: center url('http://i1342.photobucket.com/albums/o761/AugustRainn/zz_zpsa0c79559.png') no-repeat !important;
  378. background-size: contain !important;
  379. }
  380. }
  381.  
  382. (The rest of it looked like panic and desperation, so I removed it.)
  383. One more thing: background-position is !important in Tumblr's own style, and your selector (#inbox_button a) is less specific than Tumblr's selector (#header #inbox_button a). In Chrome (but not Firefox) that means Tumblr continues to set background-position but not the other background properties (which aren't !important in Tumblr's style) [fig]. Your image is being displayed, but it's 35px to the left of the button, entirely outside the boundaries of the button itself.
  384.  
  385. The code above has been revised to work with Chrome, too.
  386.  
  387. ============================
  388. ======== BACKGROUND == MULTIPLE BACKGROUNDS
  389. ==http://www.css3.info/preview/multiple-backgrounds/
  390. Example:
  391. background-image: url(sheep.png), url(betweengrassandsky.png);
  392. The the first value in the list represents the top layer (closest to the user),
  393. with subsequent layers rendered behind successively.
  394.  
  395. The Syntax:
  396. background-image: <bg-image> [ , <bg-image> ]*
  397. <bg-image> = <image> | none
  398. Note: a value of ‘none’ still generates a layer.
  399.  
  400. #example1 {
  401. width: 500px;
  402. height: 250px;
  403. background-image: url(sheep.png), url(betweengrassandsky.png);
  404. background-position: center bottom, left top;
  405. background-repeat: no-repeat;
  406. }
  407.  
  408. ==Specifying multiple backgrounds using the individual background properties
  409. ==Multiple background images are specified using a comma-separated list of values for the background-image property, with each value generating a separate ‘background layer’. The the first value in the list represents the top layer (closest to the user), with subsequent layers rendered behind successively.
  410. The Syntax:
  411. background-image: <bg-image> [ , <bg-image> ]*
  412. <bg-image> = <image> | none
  413. Note: a value of ‘none’ still generates a layer.
  414.  
  415. Example:
  416. background-image: url(sheep.png),
  417. url(betweengrassandsky.png);
  418. ==A comma separated list is also used for the other background properties:
  419. background-repeat,
  420. background-attachment,
  421. background-position,
  422. background-clip,
  423. background-origin
  424. background-size.
  425.  
  426. Example:
  427. background-position: center bottom, left top;
  428. Specifying multiple backgrounds using the ‘background’ shorthand property
  429.  
  430. ==Multiple backgrounds can also be specified using the background shorthand property.
  431. The Syntax:
  432. background: [ <bg-layer> , ]* <final-bg-layer>
  433. <bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
  434. <final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>
  435. Note: background-color is only permitted in the final background layer.
  436. Example:
  437. background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;
  438.  
  439. ============================
  440. ======== BACKGROUND === BACKGROUND-SIZE + VENDOR-PREFIXES
  441. ==http://net.tutsplus.com/tutorials/html-css-techniques/10-css3-properties-you-need-to-be-familiar-with/
  442. Allow for resizable background images.
  443. background: url(path/to/image.jpg) no-repeat;
  444. background-size: 100% 100%;
  445. Take up all available space.
  446. ==example, what if we wanted a particular image to take up the entire background of the body element,
  447. regardless of the browser window’s width?
  448. body, html { height: 100%; }
  449. body {
  450. background: url(path/to/image.jpg) no-repeat;
  451. background-size: 100% 100%;
  452. }
  453. The background-size vendor-prefixes for older browsers :
  454. body {
  455. background: url(path/to/image.jpg) no-repeat;
  456. -moz-background-size: 100% 100%;
  457. -o-background-size: 100% 100%;
  458. -webkit-background-size: 100% 100%;
  459. background-size: 100% 100%;
  460. }
  461.  
  462. ============================
  463. ======== BACKGROUND === BACKGROUND-CLIP === -moz-background-clip
  464. ==http://www.css3create.com/background-clip
  465. Spécifier les limites de rendu du fond d’un élément.
  466. 3 valeurs possibles :
  467. border-box : le fond est étendu aux limites extérieures de la bordure (mais reste dessous)
  468. padding-box : le fond est étendu aux limites extérieures du padding
  469. content-box : le fond est étendu aux limites extérieures du contenu (aux limites intérieures du padding ?)
  470. ==(Firefox) utilise -moz-background-clip et les anciennes valeurs border ou padding.
  471.  
  472. =========== BACKGROUND == PLUSIEURS IMAGES DE FOND (,)
  473. == http://www.siteduzero.com/tutoriel-3-13533-la-couleur-et-le-fond.html
  474. Il est possible de donner plusieurs images de fond à un élément.
  475. Pour cela, il suffit de séparer les déclarations par une virgule (,) comme ceci :
  476. == background: url("soleil.png") fixed no-repeat top right, url("neige.png") fixed;
  477.  
  478. ============================
  479. ======== BACKGROUND TRANSPARENCE et RGBa /OPACITY (rgba(255, 0, 0, 0.5)) >> "canal alpha" = 0.5
  480. == http://www.siteduzero.com/tutoriel-3-13533-la-couleur-et-le-fond.html
  481. La notation RGBa
  482. Si vous appliquez la propriété opacity à un élément de la page,
  483. tout le contenu de cet élément sera rendu transparent
  484. (même les images, les autres blocs à l'intérieur, etc.).
  485. Si vous voulez juste rendre la couleur de fond transparente,
  486. utilisez plutôt la notation RGBa.
  487. Jouer avec la transparence : la notation RGBa.
  488. Il s'agit en fait de la notation RGB que nous avons vue précédemment, mais avec un quatrième paramètre :
  489. le niveau de transparence (appelé "canal alpha"). De la même façon, avec une valeur de 1,
  490. le fond est complètement opaque. Avec une valeur inférieure à 1, il est transparent :
  491. background-color: rgba(255, 0, 0, 0.5); /* Fond rouge à moitié transparent */
  492. Vous pouvez obtenir exactement le même effet qu'avec opacity
  493. juste en jouant avec la notation RGBa, essayez !
  494. Pour les anciens navigateurs, il est recommandé d'indiquer la notation RGB classique en plus de RGBa.
  495. Le fond ne sera alors pas transparent pour ces navigateurs, mais au moins il y aura bien une couleur de fond. ;)
  496. {
  497. background-color: rgb(255,0,0); /* Pour les anciens navigateurs */
  498. background-color: rgba(255,0,0,0.5); /* Pour les navigateurs plus récents */
  499. }
  500.  
  501. ============================
  502. ======== BACKGROUND-ATTACHMENT: FIXED
  503. == EXAMPLE == http://www.csszengarden.com/?cssfile=189/189.css
  504. == http://www.impressivewebs.com/css-the-good-parts/
  505. Fixed Elements and Backgrounds
  506.  
  507. I think it’s safe to say this one was popularized by the granddaddy of all CSS galleries, css Zen Garden.
  508. Two of my favourites on there include Retro Theater (which scrolls credits like on a movie screen around fixed elements)
  509. and Mozart (which uses background-attachment: fixed to fix the background in place while the page scrolls).
  510.  
  511. I definitely think fixed backgrounds are not used enough nowadays and can open up a lot of creative possibilities.
  512.  
  513.  
  514.  
  515.  
  516.  
  517. ============================
  518. ======== BACKGROUND-REPEAT : no-repeat.
  519. == http://westciv.com/style_master/academy/hands_on_tutorial/10.creative_images.html
  520. To make the image only appear once
  521. background-repeat: no-repeat;
  522.  
  523. == BACKGROUND-POSITION PROPERTY
  524.  
  525. The background-position property : 2 values:
  526. the first for where you want the image to be horizontally,
  527. the second for where it will be vertically.
  528. You can use the length values :
  529.  
  530. background-position: 50px 100px
  531.  
  532. will place the left of the image 50px from the left of the element,
  533. and the top edge of the image 100px from the top edge of the element.
  534.  
  535. There are also keyword values. You can use any combination of the following:
  536.  
  537. TOP
  538. BOTTOM
  539. LEFT
  540. RIGHT
  541. CENTER
  542.  
  543. examples:
  544. background-position: CENTER CENTER - places the image right in the center of the element, both horizontally and vertically
  545. background-position: TOP LEFT - places the image in the top left corner
  546. background-position: RIGHT BOTTOM - places the image in the bottom right corner
  547.  
  548. BACKGROUND-POSITION : length values, to #inner-image so that inner-image.jpg appears 198 pixels
  549. from the left edge of the element,
  550. but flush with its top. Where have we seen that 198 pixels before?
  551. To place the image 198 pixels from the left and flush with the top
  552.  
  553. 1. set horizontal to 198px
  554. 2. set vertical to 0px
  555.  
  556. #inner-image {
  557. background-position: 198px 0px;
  558. }
  559.  
  560. Now, the need for the next thing we do might not be immediately apparent, though I think you'll agree when you've done it that the whole design is a lot more dynamic. Remember those keyword values above, especially center? If you think about it, where the actual center is will change according to the width of the page. So, if you set the horizontal component of background-position to center, as the page width changes, the center will move, and so the image will move. Remember too that this image is repeating as well, so what will happen is that background-position will specify where the first instance of the image appears, and then all the rest tile out from there.
  561. Exercise 46
  562.  
  563. BACKGROUND-POSITION property, with keyword values, to #outer-image so that outer-image.jpg tiles from the middle of the top of the element.
  564.  
  565. To place the image in the center at the top :
  566. 1. set horizontal to center
  567. 2. set vertical to top
  568.  
  569. #outer-image {
  570. background-position: center top;
  571. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement