CSS - BACKGROUND v.1

============================
========  CSS - BACKGROUND v.1 - POSTé
============================

============================
RED eteint
background: indianred !important;
RED Tomate
background: tomato !important;
JAUNE eteint
background: khaki !important;


background: orange !important;
background: cyan !important;
============================
======== BACKGROUND - STRIPED
== http://anton.kovalyov.net/p/zebra-table-css/
 striped backgrounds to their tables. Seriously, this is what people are using:

background-image:
  repeating-linear-gradient(white, white 25px, hotpink 25px, hotpink 50px);
============================
======== BACKGROUND - MOZ ADDON - STRIP YELLOW BROWN BACKGROUN:
== https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/?src=collection&collection_id=534c7891-700f-40e9-8cfa-ba02d483241c
    background: url("https://addons.cdn.mozilla.net/media/img/impala/warning-bg.png?b726031") repeat scroll 0 0 transparent;
    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;

============================
======== BACKGROUND Blueprint (TWEAK GRAY) - codepen.io
== http://codepen.io/larsbeck/pen/Ikbqx

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("codepen.io") {


/* TEST - BACKGROUND Blueprint - codepen.io ==== */
body {
        display: inline-block ! important;
        position: absolute ! important;
        width: 100% ! important;
        height: 100% ! important;
/* GRID */
	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;

/* BACKGROUND BLUE PRINT = (rgb(0, 100, 150) */
/*	background-color: rgb(0, 100, 150) ! important;*/

/* BACKGROUND GRAY = #D8D8D9 or rgb(216, 216, 217) */
	background-color: #D8D8D9  ! important;
	background-color: rgb(216, 216, 217) ! important;

	background-size: cover,5rem 5rem ,5rem 5rem,1rem 1rem,1rem 1rem  ! important;
	background-position: 50% 50% ! important;
	box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5) ! important;
z-index: 5000000 ! important;
}
/* TEST - Blueprint - codepen.io ==== */

}
============================
======== BACKGROUND GRADIEN - DARK BLUE -
== http://userstyles.org/styles/45888/userstyles-dark-n-blue-version-ii

header, button, input[type="submit"],
input[type="file"] > input[type="button"],
#new-setting input[type="button"],
#bottomNavClose:after,
a.BigButton {
    background: -moz-linear-gradient(center top , #454E5F 48%, #262A31 49%, #0F0F0E 85%, #303A5D) repeat scroll 0 0 transparent !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 1px #000000 !important;
}
============================
======== BACKGROUND PATERNS - Lined paper , by Sarah Backhouse
== http://lea.verou.me/css3patterns/#
== http://lea.verou.me/css3patterns/#lined-paper
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;

Enhancing with CSS3

All the applications included in this article could be further enhanced
to take advantage of present-day CSS3 implementations.

Using border-radius, rgba, and transforms, and CSS3 multiple background images
in tandem with pseudo-elements can produce even more complex presentations that
I hope to include in a future article.
Currently there is no browser support for the use of CSS3 transitions or animations on pseudo-elements.
In the future: CSS3 pseudo-elements

The proposed extensions to pseudo-elements in the CSS3 Generated and Replaced Content Module
include the addition of nested pseudo-elements (::before::before),
multiple pseudo-elements (::after(2)),
wrapping pseudo-elements (::outside),
and the ability to insert pseudo-elements into later parts of the document (::alternate).

These changes would provide a near limitless number, and arrangement,
of pseudo-elements for all sorts of complex effects and presentations using just one element.

============================
======== BACKGROUND PATERNS - Horizontal stripes
== http://lea.verou.me/css3patterns/#
== http://lea.verou.me/css3patterns/#horizontal-stripes
background-color: gray;
background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px 50px;

Example code: fluid faux columns

Another application is creating equal height fluid columns without images or extra nested containers.

The HTML base is very simple. I’ve used specific classes on each child div rather
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.

<div id="faux">
   <div class="main">[content]</div>
   <div class="supp1">[content]</div>
   <div class="supp2">[content]</div>
</div>

The percentage-width container is once again relatively positioned and a positive z-index is set.
Applying overflow:hidden gets the element to wrap its floated children and will hide the overflowing pseudo-elements.
The background colour will provide the colour for one of the columns.

#faux {
   position:relative;
   z-index:1;
   width:80%;
   margin:0 auto;
   overflow:hidden;
   background:#ffaf00;
}

By using relative positioning on the child div‘s you can also control
the order of the columns independently of their source order.

#faux div {
   position:relative;
   float:left;
   width:30%;
}

#faux .main {left:35%}
#faux .supp1 {left:-28.5%}
#faux .supp2 {left:8.5%}

The other two full-height columns are produced by creating, sizing,
and positioning pseudo-elements with backgrounds.
These backgrounds can be (repeating) images if the design requires.

#faux:before,
#faux:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   right:0;
   bottom:0;
   left:33.333%;
   background:#f9b6ff;
}

#faux:after {
   left:66.667%;
   background:#79daff;
}

============================
======== MULTIPLE BACKGROUNDS AND BORDERS WITH CSS 2.1
== http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Using CSS 2.1 pseudo-elements to provide up to 3 background canvases,
2 fixed-size presentational images, and multiple complex borders for a single HTML element.
This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required.

    Demo: Multiple Backgrounds with CSS 2.1
    Demo: Multiple Borders with CSS 2.1

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.
How does it work?

Essentially, you create pseudo-elements using CSS (:before and :after)
and treat them similarly to how you would treat HTML elements nested within your target element.
But they have distinct benefits — beyond semantics — over the use of nested HTML elements.

To provide multiple backgrounds and/or borders, the pseudo-elements are pushed behind the content layer
and pinned to the desired points of the HTML element using absolute positioning.


============================
======== MULTIPLE BACKGROUNDS
== http://www.tutorialsavvy.com/2013/01/css3-multiple-backgrounds.html
 Indian Flag (Css3 Multi Background):-

<!DOCTYPE html >
<html>
   <head>
      <title>Indian Falg (Using CSS3 Multiple Background Demo)</title>
      <style>
         .flag-container{
         display: block;
         margin: 1em;
         padding: 1em;
         background-image: url(orange.bmp), url(chakra.bmp),url(green.bmp);
         background-repeat: repeat-x, no-repeat,repeat-x;
         background-position: left top, center center, left bottom;
         border :1px solid grey;
         padding: 5px;
         height:400px;
         width:600px;
         padding-top: 10px;
         color : green;
         font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div class="flag-container">
      </div>
   </body>
</html>


============================
======== BACKGROUND == SETTING PADDING ON BACKGROUND IMAGES
== http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level/

Since background images don’t create a new CSS box you can’t directly set padding on them.
What you want to do is use the background-position property
on the background image to create the same effect.

background-position {top-value left-value}

Top values can be top, center, or bottom and Left values can be left, center, or bottom

Both can also take values in % or px or any other measurement.
So to create 5px of padding around a background image you would use:

{background-position: 5px 5px



============================
======== BACKGROUND == STRETCHING A BACKGROUND Image
== http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level/

To create a background image that can expand and contract with it’s containing element
you want to create an image larger than needed, large enough to accommodate
the largest possible size of the containing element.
Then use the background-position property to center the background image

{background-position: 50% 50%}

The above will center your background image in the containing element.
The image will grow and shrink to fit the size of the containing element
and always be centered. You’ll want to make sure the center of the image
contains the most important part of the image since only the center is guaranteed to visibly show.

============================
======== BACKGROUND-CLIP = Transparent Borders with
== http://css-tricks.com/transparent-borders-with-background-clip/

You might think it would be as simple as this:

#lightbox {
   background: white;
   border: 20px solid rgba(0,0,0,0.3);
}

However, setting a transparent border on an element will reveal
the elements own background underneath the border.
the borders use RGBa to be transparent, but they appear solid gray
because they are only revealing the solid white background of itself below.

Fortunately there is a CSS3 property to save us!
BACKGROUND-CLIP and  specify which portion
of the box model should be utilized to display the background.
It cuts off the background at the specified portion of the box.

3 VALUES  and vendor prefixes do get involved.

BORDER-BOX
	-moz-background-clip: border;     /* Firefox 3.6 */
	-webkit-background-clip: border;  /* Safari 4? Chrome 6? */
	background-clip: border-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

PADDING-BOX
	-moz-background-clip: padding;     /* Firefox 3.6 */
	-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
	background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

CONTENT-BOX
	-moz-background-clip: content;     /* Firefox 3.6 */
	-webkit-background-clip: content;  /* Safari 4? Chrome 6? */
	background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

}

============================
======== BACKGROUND == Multiple Backgrounds and CSS Gradients.
== http://snook.ca/archives/html_and_css/multiple-bg-css-gradients
== http://snook.ca/pages/demo/bg-image

- BASE DEMO:
background: url(/img/acceldom.jpg) 10px 10px no-repeat;

- Only one background-size value :
background: url(/img/acceldo 10px 10px nom.jpg)-repeat;
background-size: 50%;
-o-background-size: 50%;
-webkit-background-size: 50%;
-moz-background-size: 50%;

- Multiple Backgrounds
When declaring background size for multiple backgrounds,
the declarations are separated by commas just like with background-image.

background-image: url(…), url(…);
background-size: 10px 100px, 5px 5px

- background-size: contain :
 Cover will make sure that the background image covers the element.

background: url(/img/acceldom.jpg) 10px 10px no-repeat;
background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;

- Background-size: cover :
Contain makes sure that the entire background image is visible within the element.

background: url(/img/acceldom.jpg) 10px 10px no-repeat;
background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;

- Gradients
background: url(/img/acceldom.jpg) 10px 10px no-repeat;
background:
	url(/img/acceldom.jpg) 10px 10px no-repeat,
	-webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat,
	-webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat;
background:
	url(/img/acceldom.jpg) 10px 10px no-repeat,
	-moz-linear-gradient(#EEF, rgba(0,0,0,1)) 300px 50px no-repeat,
	-moz-linear-gradient(#EFE, rgba(0,0,0,1)) 0 0 no-repeat;


============================
======== BACKGROUND == Background url for TUMBLR
== http://forum.userstyles.org/discussion/34648/my-style-isnt-working-any-ideas
    The background URL links to a web page, not to an image. Fix the URL.
    The background image is a bazillion times bigger than the box you're putting it in.
	Either set background-size to resize it, or use a smaller image.
    You're replacing a background image, not an IMG element.
	Just set a new background, and resize and reposition the element if necessary. (I don't think that it is.)

Here's the result:

@-moz-document url-prefix('http://www.tumblr.com/') {
  #header #inbox_button a {
    /* change the size of the button */
    /*height: 30px !important; width: 30px !important;*/

    /* change the position of the button */
    /*top: 5px !important; left: 0 !important; */

    /* change the background image, center it, and scale it to fit inside the box */
    background: center url('http://i1342.photobucket.com/albums/o761/AugustRainn/zz_zpsa0c79559.png') no-repeat !important;
    background-size: contain !important;
  }
}

(The rest of it looked like panic and desperation, so I removed it.)
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.

The code above has been revised to work with Chrome, too.

============================
======== BACKGROUND == MULTIPLE BACKGROUNDS
==http://www.css3.info/preview/multiple-backgrounds/
Example:
background-image: url(sheep.png), url(betweengrassandsky.png);
The the first value in the list represents the top layer (closest to the user),
with subsequent layers rendered behind successively.

The Syntax:
background-image: <bg-image> [ , <bg-image> ]*
<bg-image> = <image> | none
Note: a value of ‘none’ still generates a layer.

#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

==Specifying multiple backgrounds using the individual background properties
==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.
The Syntax:
background-image: <bg-image> [ , <bg-image> ]*
<bg-image> = <image> | none
Note: a value of ‘none’ still generates a layer.

Example:
background-image: url(sheep.png),
url(betweengrassandsky.png);
==A comma separated list is also used for the other background properties:
 background-repeat,
 background-attachment,
 background-position,
 background-clip,
 background-origin
 background-size.

Example:
background-position: center bottom, left top;
Specifying multiple backgrounds using the ‘background’ shorthand property

==Multiple backgrounds can also be specified using the background shorthand property.
The Syntax:
background: [ <bg-layer> , ]* <final-bg-layer>
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>
Note: background-color is only permitted in the final background layer.
Example:
background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;

============================
======== BACKGROUND === BACKGROUND-SIZE + VENDOR-PREFIXES
==http://net.tutsplus.com/tutorials/html-css-techniques/10-css3-properties-you-need-to-be-familiar-with/
Allow for resizable background images.
background: url(path/to/image.jpg) no-repeat;
background-size: 100% 100%;
Take up all available space.
==example, what if we wanted a particular image to take up the entire background of the body element,
 regardless of the browser window’s width?
body, html { height: 100%; }
body {
     background: url(path/to/image.jpg) no-repeat;
     background-size: 100% 100%;
}
The background-size vendor-prefixes for older browsers :
body {
 background: url(path/to/image.jpg) no-repeat;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;
}

============================
======== BACKGROUND === BACKGROUND-CLIP === -moz-background-clip
==http://www.css3create.com/background-clip
Spécifier les limites de rendu du fond d’un élément.
3 valeurs possibles :
    border-box : le fond est étendu aux limites extérieures de la bordure (mais reste dessous)
    padding-box : le fond est étendu aux limites extérieures du padding
    content-box : le fond est étendu aux limites extérieures du contenu (aux limites intérieures du padding ?)
==(Firefox) utilise -moz-background-clip et les anciennes valeurs border ou padding.

=========== BACKGROUND == PLUSIEURS IMAGES DE FOND (,)
== http://www.siteduzero.com/tutoriel-3-13533-la-couleur-et-le-fond.html
Il est possible de donner plusieurs images de fond à un élément.
 Pour cela, il suffit de séparer les déclarations par une virgule (,) comme ceci :
== background: url("soleil.png") fixed no-repeat top right, url("neige.png") fixed;

============================
======== BACKGROUND TRANSPARENCE et RGBa /OPACITY (rgba(255, 0, 0, 0.5)) >> "canal alpha" = 0.5
== http://www.siteduzero.com/tutoriel-3-13533-la-couleur-et-le-fond.html
La notation RGBa
Si vous appliquez la propriété opacity à un élément de la page,
 tout le contenu de cet élément sera rendu transparent
 (même les images, les autres blocs à l'intérieur, etc.).
 Si vous voulez juste rendre la couleur de fond transparente,
 utilisez plutôt la notation RGBa.
Jouer avec la transparence : la notation RGBa.
 Il s'agit en fait de la notation RGB que nous avons vue précédemment, mais avec un quatrième paramètre :
 le niveau de transparence (appelé "canal alpha"). De la même façon, avec une valeur de 1,
 le fond est complètement opaque. Avec une valeur inférieure à 1, il est transparent :
    background-color: rgba(255, 0, 0, 0.5); /* Fond rouge à moitié transparent */
Vous pouvez obtenir exactement le même effet qu'avec opacity
juste en jouant avec la notation RGBa, essayez !
Pour les anciens navigateurs, il est recommandé d'indiquer la notation RGB classique en plus de RGBa.
Le fond ne sera alors pas transparent pour ces navigateurs, mais au moins il y aura bien une couleur de fond. ;)
{
    background-color: rgb(255,0,0); /* Pour les anciens navigateurs */
    background-color: rgba(255,0,0,0.5); /* Pour les navigateurs plus récents */
}

============================
======== BACKGROUND-ATTACHMENT: FIXED
== EXAMPLE == http://www.csszengarden.com/?cssfile=189/189.css
== http://www.impressivewebs.com/css-the-good-parts/
Fixed Elements and Backgrounds

I think it’s safe to say this one was popularized by the granddaddy of all CSS galleries, css Zen Garden.
Two of my favourites on there include Retro Theater (which scrolls credits like on a movie screen around fixed elements)
and Mozart (which uses background-attachment: fixed to fix the background in place while the page scrolls).

I definitely think fixed backgrounds are not used enough nowadays and can open up a lot of creative possibilities.





============================
======== BACKGROUND-REPEAT : no-repeat.
== http://westciv.com/style_master/academy/hands_on_tutorial/10.creative_images.html
To make the image only appear once
background-repeat: no-repeat;

== BACKGROUND-POSITION PROPERTY

The background-position property : 2 values:
the first for where you want the image to be horizontally,
the second for where it will be vertically.
You can use the length values :

background-position: 50px 100px

will place the left of the image 50px from the left of the element,
and the top edge of the image 100px from the top edge of the element.

There are also keyword values. You can use any combination of the following:

    TOP
    BOTTOM
    LEFT
    RIGHT
    CENTER

examples:
    background-position: CENTER CENTER - places the image right in the center of the element, both horizontally and vertically
    background-position: TOP LEFT - places the image in the top left corner
    background-position: RIGHT BOTTOM - places the image in the bottom right corner

BACKGROUND-POSITION : length values, to #inner-image so that inner-image.jpg appears 198 pixels
from the left edge of the element,
but flush with its top. Where have we seen that 198 pixels before?
To place the image 198 pixels from the left and flush with the top

1. set horizontal to 198px
2. set vertical to 0px

#inner-image {
background-position: 198px 0px;
}

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.
Exercise 46

BACKGROUND-POSITION property, with keyword values, to #outer-image so that outer-image.jpg tiles from the middle of the top of the element.

To place the image in the center at the top :
1. set horizontal to center
2. set vertical to top

#outer-image {
background-position: center top;
}