Possible to resize or move just the background-color of an element?

Question

I have a div with a css rule that has a background-color defined. Wondering if it is possible to just change the position or the size of the background color (NOT anything within the div element? If so, can anyone help me to do this?

HTML Structure

<div class="col-6 no-padding blue-box-0 blue-box-b blue-box-right">
<img src="/media/2680859/meet-plannerresources.jpg" alt="">
<h3>Professional Planner Resources</h3>
<p>Our award-winning Convention Services team is eager to assist you in your planning efforts from beginning to end.</p>
<h4>Meeting Planners</h4>
<a href="/meet/planning-tools/" class="red-arrow"></a>
<a class="bluehitbox" href="/meet/planning-tools/"></a>
</div>

It renders a box like model, all I want to do is change the background size or position (top position I suppose if parent has a overflow:hidden this could work), and drop it down to the bottom of the div element so that it is about 70 pixels in height. Is this possible to do in CSS or even jQuery?

Image attached below of how the background-color (which is an rgba value of blue on the image) should be scaled or positioned to a 70 pixel height from the bottom of the box. Anyway possible way to do this on mousing over the actual box?

Thanks.

Answer 1

You can introduce another div inside of this div with the following css properties set:

.className{ position: absolute; z-index: -1; }

position: absolute would remove this div from the normal flow, and the elements following it would be placed under it. This is where z-index comes into picture, set it to -1 or a value less than that of other elements in its place. That would make the other elements render on top of your div.

check this jsfiddle for reference

Answer 2

Pertaining to your question, no you cannot change just the position or size of just the background color, as it will always fill the entire .

In order to 'move' it down or up, you can use margin-top to move the div 'down' and hence the background color.