Calling all WordPress Experts

  • linenlogon

    (@linenlogon)


    13 years ago

    Let’s see who is clever.

    I have 2 backgrounds. 1 is a nice carbon-fiber pattern. The other is a wide picture that takes up the top part of the page. How do I have both backgrounds on!!!!!!???

    I know if I had a BG Color of #fff and a picture it would be fine. But I have a background pattern .gif file and would like to also display a nice big background picture on the top part of the page?

    Tricky question is it not!!!

Viewing 3 replies - 1 through 3 (of 3 total)

  • You can not have 2 background images on one element (well, using CSS3 you can, but it’s not very supported in all browsers).

    Thread Starter linenlogon

    (@linenlogon)

    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!

    akerbak

    (@akerbak)

    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 ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Calling all WordPress Experts’ is closed to new replies.