Make a background image fill all the space when rotated - html

Question

I have a div which has been rotated 45 degrees, this creates a diamond shape. Inside I have another div with a minus 45-degree rotation so the content is square I set the inner container to have 100% width & heightbut because of the rotation, it doesn't fill all the space.
I know the output I get is accurate to the code I've written because of the rotation it is 100%, so I suppose I need it larger than 100% and to scale as the browser scales.
.headerImg {
position: absolute;
top: -100px;
right: -100px;
width: 50%;
display: block;
background: #eee;
height: 95vh;
overflow: hidden;
transform: rotate(45deg);
}
.rotateBack {
width: 100%;
height: 100%;
transform: rotate(-45deg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
<div class="headerImg">
<div class="rotateBack" style="background-image: url('https://www.rd.com/wp-content/uploads/2017/06/05-dog-breed-Safety-Tips-to-Keep-Your-Dog-in-Top-Shape-This-Summer-508549561-Yevgen-Romanenko.jpg')">
</div>
</div>
An example JSFiddle

Answer 1

HTML
<div class="part">
<div class="losange">
<div class="los1">
<img src="http://farm3.staticflickr.com/2178/3531465579_8bff044e9b_z.jpg?zz=1" alt="" width="255" height="320" />
</div>
</div>
CSS
.losange, .losange div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
width: 250px;
height: 250px;
}
.losange {
transform: rotate(45deg) translateY(10px);
}
.losange .los1 {
width: 355px;
height: 355px;
transform: rotate(-45deg) translateY(-74px);
}
.losange .los1 img {
width: 100%;
height: auto;
}
I found this and have used for a project of mine. Hope it helps you, understand the main idea.

Answer 2

Since the container div has fixed size you can use absolute position with the image and make it overflow by specifing negative values on top/left/bottom/right;
.headerImg {
width: 50%;
margin: auto;
display: block;
background: #eee;
height: 95vh;
overflow: hidden;
transform: rotate(45deg);
position: relative;
}
.rotateBack {
position: absolute;
top: -30%;
left: -30%;
bottom: -30%;
right: -30%;
transform: rotate(-45deg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
<div class="headerImg">
<div class="rotateBack" style="background-image: url('https://www.rd.com/wp-content/uploads/2017/06/05-dog-breed-Safety-Tips-to-Keep-Your-Dog-in-Top-Shape-This-Summer-508549561-Yevgen-Romanenko.jpg')">
</div>
</div>
By the way here is another way to achive what you want using clip-path:
body {
margin: 0;
}
.rotateBack {
height: 100vh;
width: 50%;
margin: auto;
clip-path: polygon(50% 0, 0 50%, 50% 100%, 100% 50%);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
<div class="rotateBack" style="background-image: url('https://www.rd.com/wp-content/uploads/2017/06/05-dog-breed-Safety-Tips-to-Keep-Your-Dog-in-Top-Shape-This-Summer-508549561-Yevgen-Romanenko.jpg')">
</div>
Or using linear-gradient (but the background cannot be transparent):
body {
margin: 0;
}
.back {
height: 100vh;
width: 50%;
margin: auto;
background:
linear-gradient(45deg, #fff 25%, transparent 20%, transparent 75%, #fff 70%),
linear-gradient(-45deg, #fff 25%, transparent 20%, transparent 75%, #fff 20%),
url('https://www.rd.com/wp-content/uploads/2017/06/05-dog-breed-Safety-Tips-to-Keep-Your-Dog-in-Top-Shape-This-Summer-508549561-Yevgen-Romanenko.jpg') center/cover no-repeat;
}
<div class="back">
</div>