CODEWITHSUNDEEP
htmlcss
Achilles
Achilles

Reputation: 23

2 background images in one div/table?

I am trying to design a layout for my forum that has 2 background images on a div or a table. I got the idea after looking at this forum's design (http://s4.zetaboards.com/APTSecretServices/index/) If you see on the main category labeled "Category" it contains 2 background images. From exploring the CSS (http://s4.zetaboards.com/c/35079/404/css.css) I found out it was labeled h2left and h2right.

Code: 

.h2left {
background: url(http://z4.ifrm.com/30294/164/0/p1083155/h2left.png) no-repeat;
}

.h2right {
background: url(http://z4.ifrm.com/30294/164/0/p1083156/h2right.png) no-repeat right
top;
height: 40px;
}

After seeing this I realized they used the h2, and then on the forum they combine it all together somehow It appears to be done by this code 

        <table class="cat_head"><tr><td>
        <h2>

            Category
        </h2>
        </td></tr></table>

Which is very confusing considering I can't find any proof on how they combined the two.

Upvotes: 0

Views: 503

Answers (3)

mppiatkowski
mppiatkowski

Reputation: 11

If you don'y have to support IE<8 than the clean solution is to use pseudo-selectors :before and :after. They really contain unleashed power!

Check the browser support: http://caniuse.com/css-gencontent In the case of IE6, IE7 the user get only background declared on 'real' DOM element.

Remember that pseudo elements :before and :after cannot be used on empty elements (like images) - because there are 'injected' into element before first (:before) and last (:after) node. Remember that you have to include 'content' declaration inside :after and :before to display the declared styles, too.

On more complicated layouts you can get very nice effects by using "position: absolute" and "z-index" (1.stacking context will prevent layers overlapping by complicated layouts, 2. for IE8 z-index by pseudo-elements don't work, so layers are displayed in the same order as rendered in DOM)

More about pseudo element is nice explained there: http://www.hongkiat.com/blog/pseudo-element-before-after/

So, conclusion:

<tr>
  <td>
    <h2 class="table-header">Some text</h2>
  </td>
</tr>


.table-header {
  /* EDITED: didn't put position on affected element, first that makes the coordinates of :after elements to be calculated from the right element. Sorry! */
  position: relative;

  /* if element is h2 than we got already "display: block" => width: 100%, height:auto */
  font-size:1.5em;
  line-height:2.5em; /* that centers the text if it is only one line long. For multi-lined text that method is not reasonable. I took arbitrary height bigger than font-size */
  background: url(img-main.jpg);
}

.table-header:after {
  content: '';
  position: absolute;
  top:0; right: 0; bottom: 0; left:0;
  background: url(img-additional.jpg);
  background-repeat: no-repeat;
  background-position: center right; 
}

Hope that helps

Upvotes: 1

Zero Fiber
Zero Fiber

Reputation: 4465

You can use this css for multiple background images

#bg_table {
     background: url(http://z4.ifrm.com/30294/164/0/p1083155/h2left.png), url(http://z4.ifrm.com/30294/164/0/p1083156/h2right.png);
     background-position: left center, right center;
     background-repeat: no-repeat;
}

Source: http://www.css3.info/preview/multiple-backgrounds/

Upvotes: 0

Moishy
Moishy

Reputation: 3648

The markup on that website is

<div class="h2wrap">
<div class="h2left">
<div class="h2right">
<div class="h2center">
</div>
</div>
</div>
</div>

so its a div within a div

Upvotes: 0

Related Questions