CODEWITHSUNDEEP
css
Assad Nazar
Assad Nazar

Reputation: 1464

repeat background

In a two column template, how can we use background on each column repeated when height of both columns differ?

eg, if my column 1 height is 200px (after loading some dynamic matter) and column 2 height is 500px, column 1 background is shown according to 200px height and column 2 background is shown according to 500px but i want both columns' background to be 500px.

Note: heights may differ because of dynamic content that will be loaded.

Upvotes: 1

Views: 178

Answers (2)

derekerdmann
derekerdmann

Reputation: 18252

Ah, equal height columns. You can find dozens of techniques online using JavaScript, CSS, images, etc., all with varying degrees of success.

I'm a fan of faux columns, where you have a single background image that is the width of both columns, and that image is tiled in a container element that surrounds both columns. Then the background will extend as far as the tallest column. Theoretically, this same technique can be used for two, three, or more columns.

The original article is on A List Apart (http://www.alistapart.com/articles/fauxcolumns/), but the end result can vary a lot depending on your setup and structure.

Upvotes: 1

Dan Lugg
Dan Lugg

Reputation: 20592

Depending on other layout factors, an easy solution is to create a single background image that spans both, and set it as the background for the container element. That way, no matter which column has the vertically larger content, the background will span the entirety of it.

Of course, this really works best with fixed width layouts, etc.

Upvotes: 1

Related Questions