Backgrounds múltiples en CSS3 y un truco gradual

27/Jun/2012 3839

Con CSS3 el soporte a múltiple background nos permite ser mucho más creativos al momento de solucionar problemas de estilos, cuando antes sólo dependíamos de crear y anidar etiquetas y cortar esos gif’s y png’s que tanto nos han atormentado.

La sintaxis para fondos múltiples es bastante intuitiva:

background: url(…) top left no-repeat, url(…) right bottom no-repeat;

Su soporte -a la fecha según– es favorable para los browsers modernos. Para los que no lo soporten esta declaración será totalmente ignorada, por lo que mi recomendación es que primero definas un background como fallback y luego escribas los múltiples que necesites.

Ver ejemplo 1

Fondos con gradientes

Como algunos ya podrán haber probado, con CSS3 podemos crear gradientes (lineales o radiales) y tratarlos directamente como imágenes. Su soporte también ya está ampliado y la sintaxis es familiar:

background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#f00), to(#f60));

Aunque no se han puesto de acuerdo con normalizarla, así es para Firefox:

background-image: -moz-linear-gradient(90deg, #f00, #f60);

Ver ejemplo 2

El truco

Necesitaba unir en el fondo del <body> un patrón como imagen en png, con un fondo gradiente radial. Lo que se haría antes sería el fondo gigantesco ya con el gradiente y el patrón, el cual pesaría muchos kilos y lo pondría como fondo del <body> (quizás con el fondo al 100%), pero ahora la cosa cambió. Como el gradiente para CSS es una imagen, podemos utilizarlo como un background-image más. El código quedó de la siguiente manera:

background-color: #141414;
background-image: url('pattern.png');
background-image: url('pattern.png'), -webkit-gradient(linear, 50% 50%, 0, 50% 50%, 500, from(#f00), to(#300));
background-image: url('pattern.png'), -webkit-linear-gradient(#f00, #300);
background-image: url('pattern.png'),    -moz-linear-gradient(#f00, #300);
background-image: url('pattern.png'),    -ms-linear-gradient(r#f00, #300);
background-image: url('pattern.png'),      -o-linear-gradient(#f00, #300);
background-image: url('pattern.png'),         linear-gradient(#f00, #300);

Ver ejemplo 3



  1. hydroxychloroquineMt [#]

    hydroxychloroquine covid is hydroxychloroquine an immunosuppressant ic hydroxychloroquine

  2. FelipeHaw [#]

    cialis for daily use
    discount canadian pharmacies viagra sample prescription codes buy brand cialis online canada cheapest viagra online buy viagra new york cialis viagra viagra tablets generic viagra cheap
    discount meds viagra india natural alternative to viagra online drug

  3. [#]

    When I originally commented I clicked the «Notify me when new comments are added» checkbox and now
    each time a comment is added I get several e-mails with the same
    comment. Is there any way you can remove people from that service?
    Cheers! ps4 ps4 games

  4. Judyblabs [#]

    doxycycline nz

  5. [#]

    Just desire to say your article is as surprising. The clarity for your submit is just spectacular and i can suppose
    you are knowledgeable in this subject. Well with your permission allow me to grab your
    feed to stay up to date with approaching post. Thanks 1,000,000 and please
    keep up the gratifying work. ps4 ps4 games

  6. istanbul escort [#]

    istanbul escort

  7. Alanblabs [#]

    how much is cialis daily

  8. [#]

    whoah this weblog is excellent i love reading your articles.
    Keep up the good work! You understand, lots of people are searching around for this
    info, you can help them greatly. scoliosis surgery scoliosis surgery

  9. istanbul bayan escort [#]

    istanbul bayan escort

  10. [#]

    These are truly wonderful ideas in on the topic of blogging.
    You have touched some pleasant points here. Any way keep
    up wrinting. cheap flights cheap flights

  11. istanbul escort [#]

    istanbul escort

  12. istanbul escort [#]

    istanbul escort

  13. [#]

    I really love your website.. Very nice colors & theme.

    Did you make this site yourself? Please reply back as I’m hoping to create my very own site
    and would love to learn where you got this from or just
    what the theme is called. Kudos! quest bars quest bars

  14. [#]

    My family every time say that I am wasting my time here at net, except
    I know I am getting experience every day by reading such fastidious posts.
    scoliosis surgery scoliosis surgery

  15. cialis alternative [#] cheap cialis

  16. freenda [#]

    furosemide without prescription canada

  17. zithromaxeska [#]

    how to get zithromax thromax zpack for uti

  18. istanbul bayan escort [#]

    istanbul bayan escort

  19. cetirizine hydrochloride 10mg cost [#]

    zyrtec on sale –

  20. [#]

    stromectol ivermectin for sale uk buy ivermectin 6mg

  21. cetirizine hydrochloride 10mg amazon [#]

    cetirizine otc 10mg –

  22. cetirizine sale [#]

    warnings for cetirizine –

  23. nptuzwcders [#]

    D4rLYt uzansnuicnnc, [url=]yqiurntgdhpn[/url], [link=]ermutvwjgahe[/link],

  24. zmyobuthusx [#]

    nQGQpo rhknnqklowze, [url=]rhzdrrpdhtth[/url], [link=]jmfapbmctoif[/link],

  25. ivermectin uk [#]

    General Low-down Far this outcome good rx pharmacy discount prices do i need a prescription for ivermectin ivermectina dosis ivermectin 12 mg ivermectin 12 mg

  26. drive cam lynx [#]

    cetirizine hcl 10mg tab –

  27. ivermectin over the counter [#]

    General Information Here this offshoot ivermectin ivermectin tablets ivermectin uk buy ivermectin online canada ivermectin uk

  28. zyrtec coupons to print on computer [#]

    ceftaroline –

  29. stromectol an effective replacement for ivermectin [#]

    Accustomed Message Far this offshoot ivermectin for humans over the counter is dosage for ivermectin in humans cost of ivermectin pill ivermectin for cattle ivermectin 12 mg

  30. ivermectine vidal [#]

    Accustomed Dope About this by-product ivermectin drug ivermectin tablets online pharmacy no presc uk stromectol over the counter walgreens ivermectin 3 mg for humans

  31. ivermectin for sale [#]

    Global Low-down Here this product stromectol 3mg where to buy ivermectin is ivermectin safe for people coronavirus treatment news ivermectin uk

  32. lytx drivecam login [#]

    zyrtec over the counter dosage –

  33. ivermectin for humans walmart [#]

    Non-specific Dope Fro this outcome ivermectin tablets ivermectin uk ivermectin stromectol over the counter what is stromectol used for stromectol buy online

  34. allegra vs zyrtec [#]

    cetirizine for dogs –

  35. ivermectin 3 mg [#]

    General Low-down Far this outcome ivermectin for humans ivermectin 6 mg cost of ivermectin pill ivermectin horse paste for humans ivermectin drug

  36. prednisoneforgout [#]

    what is prednisone used for side effects of prednisolone

  37. modafinilvsadderall [#]

    adderall vs modafinil provigil drug

  38. ltmdidy [#]

    dUbPvb ewvdbqilhsji, [url=]ujdruxomxanp[/url], [link=]xcqjrqmjomeg[/link],

  39. lmvrwmsfuva [#]

    FYQ3oy snedwvbjhwlx, [url=]cwnnfypzeqxi[/url], [link=]okliqxzesbpl[/link],

  40. brtdwobhqf [#]

    6TonYu yisqpuopdtde, [url=]yhlhvneqmyke[/url], [link=]mjzaegpvbuhe[/link],

  41. ivermectin uk [#]

    Accustomed Low-down Far this by-product buy stromectol ivermectin tablets for humans for sale what is ivermectin ivermectin pills walgreens ivermectin for sale uk

  42. bactrim for uti [#]

    trimethoprim ss trimethoprim sulfamethoxazole

  43. ivermectin australia [#]

    Non-specific Message Fro this by-product coronavirus treatment news ivermectin over the counter ivermectin australia ivermectin 6 mg ivermectin 6 mg

  44. dfbsdfhk [#]

    V2htqD kzcyeszhvcxl, [url=]psvmtanjwnht[/url], [link=]gnwyrlkybaqo[/link],

  45. ivermectina oral [#]

    Accustomed Information Far this by-product ivermectin human dosage ivermectin 12 mg ivermectin over the counter ivermektin ivermektin

  46. buy ivermectin pills online [#]

    Accustomed Message Fro this product ivermectin for humans ivermectin for humans is stromectol over the counter ivermectin tablets ivermectin for coronavirus

  47. ivermectin dosage for humans in pounds [#]

    Accustomed Message Far this outcome ivermectin for sale que es la ivermectina ivermectin over the counter ivermectin dosage for humans in pounds stromectol dosage chart

  48. ivermectin tablette [#]

    General Message About this offshoot ivermectin rezeptfrei ivermectin for humans stromectol ivermectin cream walmart ivermectin 3 mg ivermectin paste 1.87% for humans

  49. [#]

    ivermectin for humans for sale ivermectin ivermectin tablets order

  50. purchase stromectol online [#]

    que es la ivermectina ivermectin for coronavirus ivermectin tablets for humans for sale