Two conflict background images possible?

ChancyRat

Can I do this:
I (finally) figured out how to put in my own background image with texture. Thanks to this page!:
http://www.smugocity.com/CSS/Theme-Backgrounds/Textures

It took me awhile to figure out that the texture I choose needs to start off tiny, like 512 x 512 pixels, but it can fill the screen with the CSS code above. Yes, I am a newbie.

What I really want to do however is add tiny drawings that are scattered all over the background.
Imagine line-drawn leaves, for example, floating randomly all over, each one about 1/4 inch x 1/4 inch. Perhaps 70 of them, and the distribution pattern doesn't repeat more than twice or 3 times for an entire web page.

Can I do this and what would I need to do?
I can't reconcile how to add a background image/texture, and this kind of graphics, both.

Thanks.

thenickdude

You can achieve that with CSS3 multiple backgrounds. For example, to tile the Google logo above the wood texture suggested in that Smugocity post:

html.sm-user-ui {
  background-image: url(https://www.google.co.nz/images/srpr/logo6w.png), url(http://demo-themes.smugmug.com/photos/i-v924LB2/0/O/i-v924LB2.png);
  background-position: center top, center top;
  background-repeat: repeat, repeat;
  background-size: auto, 33%;
}

Just replace the Google logo with your own transparent PNG that has the repeating images you mentioned on it.

I wouldn't recommend using "background-attachment:fixed" (which causes the background to stay in place while you scroll) like their example, since it causes poor performance while scrolling.

Alternatively, just tile the background texture you want in Photoshop or something until it's a good size, then add your scattered images on top of that, merge it together and use that as your repeating background.

ChancyRat

You can achieve that with CSS3 multiple backgrounds.

THANKS so much. I felt silly even asking, believing it was impossible. Like asking for night and day together. Will give this a go.