Can I have multiple background images using CSS

Question

Is it possible to have two background images   For instance  I d like to have one image repeat across the top  repeat-x   and another repeat across the entire page  repeat   where the one across the entire page is behind the one which repeats across the top   I ve found that I can achieve the desired effect for two background images by setting the background of html and body   html       background  url images bg png      body       background  url images bgtop png  repeat-x      Is this  good  CSS   Is there a better method   And what if I wanted three or more background images

User · Answer

Yes  it is possible  and has been implemented by popular usability testing website Silverback  If you look through the source code you can see that the background is made up of several images  placed on top of each other   Here is the article demonstrating how to do the effect can be found on Vitamin  A similar concept for wrapping these  onion skin  layers can be found on A List Apart

User · Answer

The easiest way I have found to use two different background images in one div is with this line of code   body       background url image1 png  repeat-x  url image2 png  repeat      Obviously  that does not have to be for only the body of the website  you can use that for any div you want    Hope that helps  There is a post on my blog that talks about this a little more in depth if anyone needs further instructions or help - http   blog thelibzter com css-tricks-use-two-background-images-for-one-div

User · Answer

The easiest way I have found to use two different background images in one div is with this line of code   body       background url image1 png  repeat-x  url image2 png  repeat      Obviously  that does not have to be for only the body of the website  you can use that for any div you want    Hope that helps  There is a post on my blog that talks about this a little more in depth if anyone needs further instructions or help - http   blog thelibzter com css-tricks-use-two-background-images-for-one-div

User · Answer

If you want multiple background images but don t want them to overlap  you can use this CSS   body     font-size  13px    font-family Century Gothic  Helvetica  sans-serif    color   333    text-align  center    margin 0px    padding  25px      topshadow     height  62px   width 1030px    margin  -62px   background-image  url images top-shadow png       pageborders   width 1030px  min-height 100   margin auto              background url images mid-shadow png       bottomshadow       margin 0px  height 66px  width 1030px  background url images bottom-shadow png       page     text-align  left    margin 62px  0px  20px    background-color  white    margin auto    padding 0px    width 1000px      with this HTML structure    lt body    lt  php body class      gt  gt      lt div id  topshadow  gt     lt  div gt      lt div id  pageborders  gt        lt div id  page  gt       lt  div gt     lt  div gt   lt  body gt

User · Answer

Current version of FF and IE and some other browsers support multiple background images in a single CSS2 declaration   Look here http   dense13 com blog 2008 08 31 multiple-background-images-with-css2  and here http   www quirksmode org css multiple backgrounds html and here http   nicolasgallagher com multiple-backgrounds-and-borders-with-css2   For IE  you might consider adding a behavior   Look here  http   css3pie com

User · Answer

use this   body   background  url images image-1 png   url images image-2 png  url images image-3 png   background-repeat  no-repeat  repeat-x  repeat-y  background-position 10px 20px   20px 30px  15px 25px      a simple way to adjust you every image position with background-position  and set repeat property with  background-repeat  for every image individually

User · Answer

You could have a div for the top with one background and another for the main page  and seperate the page content between them or put the content in a floating div on another z-level  The way you are doing it may work but I doubt it will work across every browser you encounter

User · Answer

You could have a div for the top with one background and another for the main page  and seperate the page content between them or put the content in a floating div on another z-level  The way you are doing it may work but I doubt it will work across every browser you encounter

User · Answer

use this   body   background  url images image-1 png   url images image-2 png  url images image-3 png   background-repeat  no-repeat  repeat-x  repeat-y  background-position 10px 20px   20px 30px  15px 25px      a simple way to adjust you every image position with background-position  and set repeat property with  background-repeat  for every image individually

User · Answer

You could have a div for the top with one background and another for the main page  and seperate the page content between them or put the content in a floating div on another z-level  The way you are doing it may work but I doubt it will work across every browser you encounter

User · Answer

x000D   x000D   example1   x000D      background  url http   www w3schools com css img flwr gif  left top no-repeat  url http   www w3schools com css img flwr gif  right bottom no-repeat  url http   www w3schools com css paper gif  left top repeat  x000D      padding  15px  x000D      background-size  150px  130px  auto  x000D  background-position  50px 30px  430px 30px  130px 130px  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div id  example1  gt  x000D   lt h1 gt Lorem Ipsum Dolor lt  h1 gt  x000D   lt p gt Lorem ipsum dolor sit amet  consectetuer adipiscing elit  sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat  lt  p gt  x000D   lt p gt Ut wisi enim ad minim veniam  quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat  lt  p gt  x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    We can easily add multiple images using CSS3  we can read in detail here http   www w3schools com css css3 backgrounds asp

User · Answer

Yes  it is possible  and has been implemented by popular usability testing website Silverback  If you look through the source code you can see that the background is made up of several images  placed on top of each other   Here is the article demonstrating how to do the effect can be found on Vitamin  A similar concept for wrapping these  onion skin  layers can be found on A List Apart

User · Answer

If you want multiple background images but don t want them to overlap  you can use this CSS   body     font-size  13px    font-family Century Gothic  Helvetica  sans-serif    color   333    text-align  center    margin 0px    padding  25px      topshadow     height  62px   width 1030px    margin  -62px   background-image  url images top-shadow png       pageborders   width 1030px  min-height 100   margin auto              background url images mid-shadow png       bottomshadow       margin 0px  height 66px  width 1030px  background url images bottom-shadow png       page     text-align  left    margin 62px  0px  20px    background-color  white    margin auto    padding 0px    width 1000px      with this HTML structure    lt body    lt  php body class      gt  gt      lt div id  topshadow  gt     lt  div gt      lt div id  pageborders  gt        lt div id  page  gt       lt  div gt     lt  div gt   lt  body gt

User · Answer

x000D   x000D   example1   x000D      background  url http   www w3schools com css img flwr gif  left top no-repeat  url http   www w3schools com css img flwr gif  right bottom no-repeat  url http   www w3schools com css paper gif  left top repeat  x000D      padding  15px  x000D      background-size  150px  130px  auto  x000D  background-position  50px 30px  430px 30px  130px 130px  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div id  example1  gt  x000D   lt h1 gt Lorem Ipsum Dolor lt  h1 gt  x000D   lt p gt Lorem ipsum dolor sit amet  consectetuer adipiscing elit  sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat  lt  p gt  x000D   lt p gt Ut wisi enim ad minim veniam  quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat  lt  p gt  x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    We can easily add multiple images using CSS3  we can read in detail here http   www w3schools com css css3 backgrounds asp

User · Answer

CSS3 allows this sort of thing and it looks like this   body       background-image  url images bgtop png   url images bg png       background-repeat  repeat-x  repeat      The current versions of all the major browsers now support it  however if you need to support IE8 or below  then the best way you can work around it is to have extra divs    lt body gt       lt div id  bgTopDiv  gt          content here      lt  div gt   lt  body gt    body      background-image  url images bg png      bgTopDiv      background-image  url images bgTop png       background-repeat  repeat-x

User · Answer

Yes  it is possible  and has been implemented by popular usability testing website Silverback  If you look through the source code you can see that the background is made up of several images  placed on top of each other   Here is the article demonstrating how to do the effect can be found on Vitamin  A similar concept for wrapping these  onion skin  layers can be found on A List Apart

User · Answer

CSS3 allows this sort of thing and it looks like this   body       background-image  url images bgtop png   url images bg png       background-repeat  repeat-x  repeat      The current versions of all the major browsers now support it  however if you need to support IE8 or below  then the best way you can work around it is to have extra divs    lt body gt       lt div id  bgTopDiv  gt          content here      lt  div gt   lt  body gt    body      background-image  url images bg png      bgTopDiv      background-image  url images bgTop png       background-repeat  repeat-x

User · Answer

CSS3 allows this sort of thing and it looks like this   body       background-image  url images bgtop png   url images bg png       background-repeat  repeat-x  repeat      The current versions of all the major browsers now support it  however if you need to support IE8 or below  then the best way you can work around it is to have extra divs    lt body gt       lt div id  bgTopDiv  gt          content here      lt  div gt   lt  body gt    body      background-image  url images bg png      bgTopDiv      background-image  url images bgTop png       background-repeat  repeat-x

User · Answer

Yes  it is possible  and has been implemented by popular usability testing website Silverback  If you look through the source code you can see that the background is made up of several images  placed on top of each other   Here is the article demonstrating how to do the effect can be found on Vitamin  A similar concept for wrapping these  onion skin  layers can be found on A List Apart

User · Answer

You could have a div for the top with one background and another for the main page  and seperate the page content between them or put the content in a floating div on another z-level  The way you are doing it may work but I doubt it will work across every browser you encounter

User · Answer

CSS3 allows this sort of thing and it looks like this   body       background-image  url images bgtop png   url images bg png       background-repeat  repeat-x  repeat      The current versions of all the major browsers now support it  however if you need to support IE8 or below  then the best way you can work around it is to have extra divs    lt body gt       lt div id  bgTopDiv  gt          content here      lt  div gt   lt  body gt    body      background-image  url images bg png      bgTopDiv      background-image  url images bgTop png       background-repeat  repeat-x

User · Answer

Current version of FF and IE and some other browsers support multiple background images in a single CSS2 declaration   Look here http   dense13 com blog 2008 08 31 multiple-background-images-with-css2  and here http   www quirksmode org css multiple backgrounds html and here http   nicolasgallagher com multiple-backgrounds-and-borders-with-css2   For IE  you might consider adding a behavior   Look here  http   css3pie com

[css] Can I have multiple background images using CSS?

Examples related to css

Examples related to background-image