html - Multiple Backgrounds on Body -
not sure if possible can put 1 transparent image on standard background image on website.
body { font-family: arial, helvetica, sans-serif; text-align: center; background: #133e6f url({{ site_img_dir }}/body-bg.gif) repeat-x; }
this normal background image. want add transparent .png on 1 non-repeat image. how can done ?
thanks
to have multiple backgrounds on single element:
.myclass { background: background1, background2, ..., backgroundn; }
more complex example:
3 backgrounds other background properties:
note1: can define background-repeat
, background-position
(and others background-size
) properties each of 3 backgrounds individually.
.multi_bg_example { /* background 1, image */ background: url(img1), /* background 2, gradient */ linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), /* background 3, image */ url(img3); background-repeat: no-repeat, no-repeat, repeat; background-position: bottom right, left, right; }
note2: first 1 appears on top, second 1 below it, etc...
source: mozilla developer network, css multiple backgrounds:
http://developer.mozilla.org/en-us/docs/css/tutorials/using_css_multiple_backgrounds
Comments
Post a Comment