CODEWITHSUNDEEP
css
user2138961
user2138961

Reputation: 1

CSS multi-image background rows?

I did a through search and could not find an answer to my particular query...Granted that may be due to my novice ability and flawed thinking. What I am trying to accomplish is a two rows of 3 non-tiled, non-repeating, side-by-side images...set as my webpage background.

Here is the basic HTML formatting that I'd like to duplicate as a CSS Background:

<HTML>
<span><img src="images/image1.gif"><img src="images/image2.gif"><img src="images/image3.gif"><BR><img src="images/image4.gif"><img src="images/image5.gif"><img src="images/image6.gif"></span>
<HTML>

Here is my crude attempt at a CSS solution:

<style type="text/css"> 
body
{ background-image: url('images/image1.gif'), url('images/image2.gif'), url('images/image3.gif'), url('images/image4.gif'), url('images/image5.gif'), url('images/image6.gif'); background-repeat: no-repeat; }
</style>

Although this did "work" ...all I managed to do was stack 6 images directly on top of each other in the top left corner. Any help for a newb would be greatly appreciated.

Thanks!

Upvotes: 0

Views: 116

Answers (1)

Mr_Green
Mr_Green

Reputation: 41832

You need to assign background-position to each of the background-image explicitly. This should work for your condition:

background-position: top left, top center, top right, bottom left, bottom center, bottom right;

Also have a look at background-size css property.

Working Fiddle

Upvotes: 1

Related Questions