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

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -