Not content-relevant image. Background image style Attribute vs. img tag

Question

I am currently creating a template for a CMS, which will probably have some images which are not relevant for the content. They are going to be displayed behind the text. Since they will be uploaded by the user i can't insert them via CSS as background-image. So the other two possibilities would be too either add them as an image and the place them in the background via CSS or insert them as a background-image by adding a style attribute to the parent div. Both options aren't really perfect but i was wondering which of those two options would be the "more" correct one.

Answer 1

From the HTML spec:

4.7.1.1.9 A purely decorative image that doesn't add any information

Purely decorative images are visual enhancements, decorations or embellishments that provide no function or information beyond aesthetics to users who can view the images.

Mark up purely decorative images so they can be ignored by assistive technology by using an empty alt attribute (alt=""). While it is not unacceptable to include decorative images inline, it is recommended if they are purely decorative to include the image using CSS.

So either way is acceptable, but using CSS is preferable, especially if you don't wish to pollute your markup with decorative images.

Using an inline style attribute is an acceptable alternative for when you need to style individual elements differently but you don't want to generate CSS rules for them. The most purist approach would be to specify the image URL in a custom data attribute instead of an inline style attribute, but you won't be able to take the value of that attribute and apply it to the background-image property using CSS since no browser supports that ability yet, so inline styles are your next best alternative.

Answer 2

It's a complicated thing like both answer is semi-correct. you can use both way.

for step 1

if you wan to use it as a background image then you have to give rest of css property to that div in css. and the image-URL style you have to give in line.

for step 2

for this step you have to use position tag to define their places. as you want to keep image in background then below is the easiest way to do this by postion tag.

HTML

<div class="parent-block">
    <div class="child-image-block">
        <img src="xyz.png"/>
    </div>
    <div class="child-content-block">
        " your content goes here"
    </div>
</div>

CSS

.parent-block { position: relative;}
.child-image-block {position: absolute; z-index:1;}
.child-content-block {position: relative;  z-index:2;}