Div element should have same height based on the background-image height
Hi All,
This is first time i am asking a question, if you see any problem in QA pattern please help to correct me that is highly appreciable.
Question :-
how can any div/html element will auto-adjust their height based on the background-image height.
Let’s s say, i have an image of height 500px. ( img1.jpg )
<div class="main_container">
<div class="card"></div>
</div>
<footer></footer>
main_container => it has background-image: url('img1.jpg');
card => height is only 100px.
footer => it can be anything but let's consider 100px.
Let’s say if main_container is using the same height as of img1.jpg that is 500px. and card height is only 100px then we have 400px space remaining.
i wanted to keep that space as gap between the main_container & footer.
Solution: - i can use the padding/margin-bottom: 400px. but what if the card height got change or image height is changed, it should adjust automatically.
I tried a solution you can find here using img tag. that is working looking for better approach using css without img tag.
codesandbox link - https://codesandbox.io/s/div-auto-adjust-bg-image-height-vpmytw
To replica the problem i did mention you have some css from styles.css section.
please read that.
anand-tiwari
CodeSandbox
div-auto-adjust-bg-image-height - CodeSandbox
div-auto-adjust-bg-image-height by anand-tiwari
6 Replies
adding those comments here as well
well, with an actual image it would be way easier. no background needed at all.
may i ask why you don't want to have it an img?
you can use grid to lay them on top of eachoter (so no position attributes nessessary)
i adjusted your sandbox a little https://codesandbox.io/s/div-auto-adjust-bg-image-height-forked-p86try
mark-boots
CodeSandbox
div-auto-adjust-bg-image-height (forked) - CodeSandbox
div-auto-adjust-bg-image-height (forked) by mark-boots
thanks @MarkBoots
yes, with img its easy to position the layout,
Purpose of the image to be as background color replacement with image, so i prefer to use background-image,
okay, then there is no other option. you'll have to to create the space. so with a dummy, or with a set height
yes, seems like
thank you
for the quick response