Create diagonal background box - html

Question

I am attempting to do something like the following:
The code I currently have loads the image as the background but I cannot seem to get the diagonal div box on top of the image and also make it diagonal
HTML
<div>
<style>
landingDiv {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
opacity: 10;
background-image: url("https://assets.fanart.tv/fanart/movies/155/moviebackground/the-dark-knight-51f269c2ce53a.jpg")
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
</style>
<img class="landingDiv bg" />
<div style="height: 30px; width: 100%; background-color: gray;">
Hey
</div>
</div>
JSFiddle

Answer 1

You can add a gradient overlay in the background-image rule :
background-image:
linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.3) 80%, transparent 80%),
url("https://assets.fanart.tv/fanart/movies/155/moviebackground/the-dark-knight-51f269c2ce53a.jpg")
landingDiv {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
opacity: 10;
background-image: linear-gradient(-10deg, transparent 20%, rgba(255, 255, 255, 0.3) 20%, rgba(0, 0, 255, 0.3) 80%, transparent 80%), url("https://assets.fanart.tv/fanart/movies/155/moviebackground/the-dark-knight-51f269c2ce53a.jpg")
}
#media screen and (max-width: 1024px) {
/* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px;
/* 50% */
}
}
<div>
<img class="landingDiv bg" />
<div style="height: 30px; width: 100%; background-color: gray;">
Hey
</div>
</div>
A few possible examples:
https://jsfiddle.net/mv75qn9c/1/ (darker)
https://jsfiddle.net/mv75qn9c/2/ (lighter)
any rgba() colors will do , same or mixed https://jsfiddle.net/mv75qn9c/3/
tune degrees and transparent/rgba() areas to your needs.
Note : crispy edges can be blurred setting values of color stop and start with litlle difference in values :
linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.3) 20.1%, rgba(0,0,0,0.3) 80%, transparent 80.1%)

Answer 2

Z-index property might help here as i see your problem,
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
So here if you want your image in background and div in the front so
Add
img.bg { z-index:-1 ;}
So here you can see that am giving -1 to img.bg which makes it low priority compair to div ... you can now use it whatever you want.
landingDiv {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
opacity: 10;
background-image: url("https://assets.fanart.tv/fanart/movies/155/moviebackground/the-dark-knight-51f269c2ce53a.jpg");
z-index : -1 ;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
<div>
<img class="landingDiv bg" />
<div style="height: 30px; width: 100%; background-color: gray;">
Hey
</div>
</div>