How to align a background image with padding? - html

Question

I have a <div> with a left aligned background image and some text.
I need the div (or an inner div) to have some padding so the text will start next to background image, not on it. Is there a way to do this with CSS?
Here is a fiddle and the CSS:
.mydiv {
background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
background-position: left bottom;
background-size: contain;
background-repeat: no-repeat;
background-color: #fff;
width: 500px;
height: 700px;
}

Answer 1

Flexbox and a pseudo-element could do this...assuming I have your intention right.
I need the div (or inner div) has some padding so the text will start next to background image, not on it
Basically, the inner div is 100% height of the parent element but any space after the text is taken up by the pseudo-element which has the image as a background.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.mydiv {
background-repeat: no-repeat;
background-color: white;
width: 100vw;
height: 100vh;
}
.mydiv div {
display: flex;
height: 100%;
}
.mydiv div:after {
content: '';
background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
background-position: left bottom;
background-size: contain;
background-repeat: no-repeat;
flex: 1;
}
<div class="mydiv">
<div>My Text here</div>
</div>
REVISION/ALTERNATE after commented requirements updated
I want the text starting next to image (on the right side of the background image), not on the image. The reason I want the image background because I want it to be a fixed background located bottom-left corner. I want the background image contained because I want the width of the image automatically calculated.
You would need to change the structure and put the image inline
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mydiv {
width: 100vw;
height: 100vh;
display: flex;
}
.imgdiv {
height: 100%;
}
.imgdiv img {
max-height: 100vh;
max-width: 100%;
}
.textdiv {
flex: 1 0 auto;
}
<div class="mydiv">
<div class="imgdiv">
<img src="http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312" alt="">
</div>
<div class="textdiv">My Text here</div>
</div>
JSFiddle Demo

Answer 2

If you want the text not to appear on the background image but below it, I have two solutions:
First:
Use separate div for background image like
.mydiv {
background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
background-position: left bottom;
background-size: contain;
background-repeat: no-repeat;
background-color: #fff;
width: 100vw;
height: 100vh;
}
<div class="mydiv"></div><div>My Text here</div>
Second:
Apply the following CSS to the div containing text.
.mydiv {
background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
background-position: left bottom;
background-size: contain;
background-repeat: no-repeat;
background-color: #fff;
width: 100vw;
height: 100vh;
}
#innerText {
padding-top: 105vh;
}
<div class="mydiv"><div id="innerText">My Text here</div></div>

Answer 3

No need for 2 div , you can achieve all with only one in a very simple way
Try this code:
.mydiv {
background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
background-position: 0 0;
background-size: 250px auto;
background-repeat: no-repeat;
background-color: #fff;
width: 500px;
height: 700px;
padding-left: 255px;
text-align: left;
}