Calling a background image within the HTML for dynamic loading - html

Question

I wanted to know if it is possible to have an image within the HTML document that behaves like a background image (currently done in CSS)?. The reason is so that the client can upload a background image via the CMS rather then myself having to manually do it for the client in CSS (which they do not have access to).
This is the effect I would like to create: http://codepen.io/anon/pen/wabjyg
HTML
<div>
<h1>An example of text over an image</h1>
</div>
CSS
div {
background: url(http://lorempixel.com/g/1100/300/) no-repeat;
width:100%;
height:100%;
background-size:cover;
}
One of doing it would be to have the background image as an inline style like this... http://codepen.io/anon/pen/aOrGYX - That way I can create a dynamic tag in the template which pulls the image path they upload in the CMS.
HTML
<div style="background-image: url('http://lorempixel.com/g/1100/300')">
<h1>An example of text over an image</h1>
</div>
CSS
div {
background-repeat: no-repeat;
width:100%;
height:100%;
background-size:cover;
position:relative;
}
Just wanted to know if there was another way of doing it without using inline styles within the HTML markup? Maybe tricking the IMG tag to behave like a background image?

Answer 1

You could use object-fit to get an img to behave like a background image:
html, body {
height:100%;
margin:0;
padding:0;
}
div {
background-repeat: no-repeat;
width:100%;
height:100%;
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
h1 {
font-family:sans-serif;
margin:0;
color:#fff;
position:absolute;
letter-spacing:-1px;
text-align:center;
left:50%;
top:50%;
text-shadow:0 0 30px rgba(0,0,0,0.8);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
<div>
<img src="http://lorempixel.com/g/1100/300">
<h1>An example of text over an image</h1>
</div>

Answer 2

After a bit Googling I found this tutorial that offers a different solution.
You can put a extra stylesheet in your header, for example background.php
<link rel='stylesheet' type='text/css' href='css/background.php' />
In that file you can set your variables and can use them in your stylesheet, like so.
<?php
header("Content-type: text/css; charset: UTF-8");
// DB Query here (or pass it with a function)
$background = "/img/user/background/1.png";
?>
body, html { background: url(<?php echo $linkColor; ?>); }
Hope it helps.