You can not have 2 background images on one element (well, using CSS3 you can, but it’s not very supported in all browsers).
So how do these wordpress templates do it. You often check out a car template which has a beautiful metallic background but a image of a racing car in the background of the top part of the page.
Maybe.. we can use a image and spread it all over the div tag? don’t know there must be a way!
The cross-browser supported way of doing this would probably to have the carbon fiber background as the background image repeating in the body-tag.
Then, place a div of 100% height and width as the first element in your html, where you put the large image as a background image positioned top and center. Then this image would place above the carbon fiber pattern, and it would float accordingly to browser width.
Sample code for CSS:
body { background: #fff url(images/carbon-fiber.png) top left; }
div#large-image { width: 100%; height: 100%; background: transparent url(images/large-image.png) top center no-repeat; }
Change paths to images accordingly.
Sample code for HTML:
<html>
<head><!-- all your header stuff here --></head>
<body>
<div id="large-image">
<!-- all your site's structure and content here -->
</div><!-- end #large-image -->
</body>
</html>
Hope this helps 🙂
