1

Using css3/html5 only, I am trying to have separate and distinct background images line up side by side, not overlaying each other.

In essence I would love to get multiple separate and distinct background images to behave exactly how the tiling of a single background image behaves.

I also would like to achieve this without setting any fixed or specific positions, simply each background image dropped in respects the size of the background image next to it, butts up against it, and so on and so on.

So background images tiling across an element/container as normal, except each individual background image in the tiling can be unique.

Any ideas?

Guanto
  • 11
  • 4
  • Possible duplicate of [Can I have multiple background images using CSS?](http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css) – Jamie Barker Dec 18 '15 at 11:26

2 Answers2

0

Here is how I understand your question:

  • I have a few image files
  • I want to display them side by side
  • I have one div and I do not want to (or can not) change the HTML I have

" Using CSS3, can I display those images side by side as backgrounds of my div?"

If this is your question, the answer is no, not as of now. Sorry.

According to this standard specification, http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties4 there is no position value to place background images "after previous" or "floating".

More info on multiple backgrounds and background sizing: http://www.css3.info/preview/multiple-backgrounds/ https://css-tricks.com/almanac/properties/b/background-size/

You will probably want to look into positionning your gallery, a div containing your img elements as absolute. If you place it before your div, it will appear behind the div and make one img element per image file. 

<div style="position:absolute;">
   <img src="image1.png">
   <img src="image2.png">
   <img src="image3.png">
</div>
<div>the div to be backgrounded</div>
ElevateBart
  • 36
  • 1
  • 6
-1

foreach img that you want to use in your "background", create a div, and then use the css background-image property to display the image within the borders of the div. in other words, don't put the img tags in the html, link to their source in your css. without positioning, you will be limited to adding any "foreground" content to the divs with the background images

based on the way you worded your question, this might end up being very time consuming and frustrating for you. maybe consider a different technique with code you can understand? if you start with the basics and learn them thoroughly, the creative techniques will reveal themselves

user3558499
  • 1
  • 2
  • I understand the code, you misunderstood my question. Apologies as I thought i was overly descriptive. What you are describing layers or stacks the background images on top of each other, I am simply wondering if there is a way to get different background images to respect their own physical dimensions and butt up against each other one after the other in a continuous row (not simply left center right) - similar to how regular (not background) images behave when laid out as you (and I originally) have described. – Guanto Dec 18 '15 at 05:58
  • use display: inline-block for the divs – user3558499 Dec 19 '15 at 04:39