Use img tag inside a div as the divs background image with text over

Question

I have the following html:

<div class="article">
  <img src="..." class="article-bg">
  <h1 class="heading">Article Heading</h1>
  <h2 class="author">Author Name</h2>
</div>

The article divs background image gets set dynamically, so setting the divs background in css is out, I have to use an image tag. I'm not too sure though how to use an img as the divs background, and at the same time have text over the img.

Also the height of the article div should always be 180px, I only have the following simple CSS:

.article {

  height: 180px;
  padding: 10px;
  background-color: blue;


}

Thanks in advance for any tips!

Solution 1

use

<div class="article" style="background: url(imageurl)">
</div>

Solution 2

You can do it by this way:

<div class="article">
      <img src="http://www.bdembassyusa.org/uploads/images/beautiful-Bangladesh-23.jpg" class="article-bg">
      <h1 class="heading">Article Heading</h1>
      <h2 class="author">Author Name</h2>
</div>

Ad some more css below:

.article{
  height: 180px;
  padding: 10px;
  background-color: blue;
  overflow:hidden;
}
.article img{
    position:absolute;
    z-index:0;
    width: 100%; // make the img fluid
    height:200px;
    margin:-10px;
    object-fit: contain; // similar to `background-size: contain;`
}
.article h1,.article h2{
    position:relative;
    z-index:1;
}

Test it on jsfiddle: http://jsfiddle.net/sarowerj/o9L72do0/

Solution 3

What you're looking for in z-index. Using Z-index allows you to position one element above of the other. But do keep in mind that z-index does only work with positioned elements such as absolute or relative positioning.

You do specify a z-index as follows in the CSS:

.heading { position: absolute; top: 10px; left: 10px; z-index: 900; color: #fff; }

See this jsFiddle for a demo on how to use it:

Comments

[Hashem Qolami]

Any reason not to use inline CSS? (I mean <div class="article" style="background: url(...)">).

[Admin]

This isn't seen as bad practice is it? Because this would be a really nice of doing it

[Admin]

This is indeed how you achieve this, so the question has been answered. However, I've gone with @Sajad Karuthedaths method, it solves my problem better :)

[Complexity]

I understand, however I would like to thank you for marking this answer as the accepted one.

[Admin]

Because the question is: "Use img tag inside a div as the divs background image with text over" and that's not what your code does. But whatever, I'll mark is as accepted. You're taking your little points too seriously.

[Sajad Karuthedath]

@DeanGrobler yah that was the question heading but that was not what you needed :)

[radubogdan]

I think this should be the accepted answer for the context of this question.

[TheCatWhisperer]

The problem with this, is if your page is https, and your image http, you will get a mixed content warning

[Sajad Karuthedath]

@TheCatWhisperer did i mension http in my answer for the image url ?? what's your point ???

[Gil Epshtain]

1. Could you please explain this solution. 2. You are using the class: "article-bg" but never use it