如何将div背景与其内容的底部对齐

Question

I have a background I want to use that contrasts nicely with my content, except for the bottom 25% or so of the image. How can I align that 25% position with either the bottom of the content, or a set distance from the bottom of the div? The height of the content varies with page width, and the background has size cover

HTML

<div class="firstPanel">content here</div>

CSS

.firstPanel {
    background-image: URL("path-to-background");
    background-position: 50% 70%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 20px;
    padding-bottom: 100px;
}

Answer 1

From what I understood in your question,in the CSS you would add this :

margin-bottom:25%;

This specifies a margin in percent of the width of the containing element.

Answer 2

Use this in css file

*{
    margin: 0;
    padding: 0;
}

It clears all the unavoidable space from page.