PHPascal.com

PHPAscal rouge2 (Version bleu)


Optimisation CSS Accessibilité Ergonomie Référencement php HTML SQL
  PHPascal a 144 articles


Recherche


cheap nike nfl jerseysWholesale cheap nfl jerseyscheap jerseys online from chinacheap nfl jerseys free shippingwholesale nba jerseysWholesale cheap nhl jerseyscheap nhl jerseys onlinecheap nba basketball jerseys

Valid HTML 5

Optimisation / CSS / Intégration optimisé d'un fond d'écran en CSS3

Intégration optimisé d'un backgound image - CSS3

Pour ceux qui on des images a mettre en background ou des texture plus complexe qui ne se répète pas voici une solution d'intégration pour diminuer la taille volumineuse d'un gros background (1920x1200 pixel).

Voici un exemple de background full (378k)

fond écran full 1920x1200 programmation web css3

Pour réduire cette image de font d'écran très grande on peux si le site le permet enlever l'image pour la parti du site ou on a une boite de contenu qui vient cacher ce background.

Image avec blanc pour l'espace du contenu de la page (109k)

Background site optimiser

Par contre avec ce nouveau background optimisé on ne peux pas le répéter pour le site en hauteur ni en largeur. Pour ce faire on va créé un deuxième background plus simple qui pourra ce répété.

Pour faire ce fond d'écran qui ce répète et qui a un dégrader de couleur ou une texture spécial un truc pour le répéter en hauteur est de copier un bout du background en pleine largeur et avec une petite hauteur. Avec ce background en créé un de double hauteur avec une parti qui est l'inverse verticalement pour faire une répétition parfaite de haut en bas.

Exemple photoshop de répétition de background en hauteur:

exemple répétition fond d'écran

Image background répété (24k)

background petit simple

 

Avec deux background au lieu d'un en CSS 2 on avait besoin d'une boite pleine largeur suplémentaire pour faire l'intégration mais maintenant avec CSS3 on le fait directement en CSS sans besoin de balise de plus ni de classs.

Code CSS pour deux background

body {
background-color:#f2d5a5;
background-image:url(../images/bg/bg_site_haut_mini.jpg),url(../images/bg/bg_petit_mini.jpg);
background-position:top center,top center;
background-repeat:no-repeat,repeat;
}

Avec cette intégration on garde le graphisme du site et on obtient une taille de chargement du background optimisé dans mon exemple 378k pour l'image complète pour 133k pour les deux backgrounds.

Article écrit le 29 mars 2013
Article modifié le 29 mars 2013

Autres articles sous la même catégorie


Pascal Dubreuil | © PHPascal.com 2017
Temps d'exécution : 0.0133 sec
Imprimer le 26 June 2017 - 08:17:47
par Pascal Dubreuil organisateur du Marathon de Laval