1

I need to develop a grid layout with each block as a different image (loaded from database) over which some text will come.

The only way I found to this is by using style attribute in html i.e css in html, which I think is not considered a good practice. Furthermore, IE seems not to support background-size.

Is there any other way I can achieve a grid layout with different image on each block ?

Please help.

Stacy J
  • 2,721
  • 15
  • 58
  • 92
  • without css will be like using the deprecated `background` attribute. its `background="path-to-image.jpg"` – rockStar Feb 16 '14 at 15:22
  • IE supports background-size since IE 9 [http://caniuse.com/background-img-opts](http://caniuse.com/background-img-opts). Why not just create a css file? – Etheryte Feb 16 '14 at 15:32
  • either swap out the default images with style="background: $Image-path-variable" or use z-indexing to laying a text span on top of an image – user934902 Feb 16 '14 at 15:48

2 Answers2

1

Inline attributes isn't a very good practice. Using the img markup is the best workarround (browser support, browser performance, maintenance).

Another way to do this is to use the data attributes and a javascript:

http://jsfiddle.net/julienvignolles/7wUwK/

HTML

<div class="image-container" data-image-url="/images/foo.jpg">…</div>

JavaScript

$('.image-container').each(function(i, el) {
    el = $(el);
    el.css('background-image', 'url(' + el.data('image-url') + ')');
});

The background-size browser support (background-image actually):

http://caniuse.com/#search=background-size

A post on old IE support:

How do I make background-size work in IE?

Community
  • 1
  • 1
Julien Vignolles
  • 379
  • 2
  • 10
0

I personally wouldnt make a grid with different images this way, I would probably use background-image to do it but if you want a grid with text layered over images here is a way to do it using z-indexing

FIDDLE http://jsfiddle.net/Dpr3C/

HTML

<ul>
    <li><img src="http://www.hockeycanada.ca/Content/images/hockey_canada_640.jpg"><span>Words words</span></li>
    <li><img src="http://www.sports-logos-screensavers.com/user/USA_Hockey5.jpg"><span>Words words</span></li>
    <li><img src="http://marchhockey.files.wordpress.com/2013/06/russia-hockey-logo.gif"><span>Words words</span></li>
</ul>

CSS

ul { list-style: none; margin: 0; padding: 0; }
ul li { width: 100px; height: 100px; float: left; margin: 5px; position: relative; }
ul li img { display: block; width: 100%; height: 100%; position: relative; z-index: 1 }
ul li span { width: 100%; height: 30px; position: absolute; z-index: 10; bottom: 0; left: 0; background: rgba(0,0,0,0.5); color: #fff; padding-top: 10px; }
user934902
  • 1,184
  • 3
  • 15
  • 33
  • the thing is the images won't be of same size. so i give them a fixed width and height - some of the images might look ugly – Stacy J Feb 16 '14 at 16:00
  • you dont have to use that sizing I just did that for an example, just dont give a fixed with and height to the parent divs then – user934902 Feb 16 '14 at 16:05
  • http://jsfiddle.net/Dpr3C/1/ look at that fiddle, text is still over lapping images are different sizes – user934902 Feb 16 '14 at 16:06
  • no - what I meant was, that images can be of different size but the list or grid blocks are of the same size. so ya the above code is fine - but images will be a problem for the above code - I updated that in the fiddle, the images r stretching like I said – Stacy J Feb 16 '14 at 16:12
  • ahh I see, in that case you probably need to use background-image: and background-size: cover and then swap out the images
  • as they are loaded in
    • – user934902 Feb 16 '14 at 16:14