Kevin Powell - Community•14mo ago

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 )

Structure of html

Structure of html

<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

anandOP•14mo ago

adding those comments here as well

/* remove Following css from these classes */
/*
.main_container {
   position: relative;
}

.content_section {
  position: absolute;
  top: 0;
}

/*

/* visibility: hidden; into display: none; */

/*
.invisible {
  visibility: hidden;
  display: none;
}
*/

/* you will see that, Although image height is there footer went up close to the cards 

1. one of the solution i found is adding padding or margin to keep space between image section and footer.
but we Don’t know how much is the space remains after the card section. so it Could be a hardcoded one.

2. Solution i tried is added a dummy img that will occupy th height same as image height then the footer comes after the image section.
but here i have to use position attributes to move content on the top of img tag.


Is there any another way around to keep the div/element height same as the background-image height even though the content height is less that image one ??
so that the remaining space will be as a buffer between the element( that has background-image) & next element/footer( in eg its footer) element.
*/

/* remove Following css from these classes */
/*
.main_container {
   position: relative;
}

.content_section {
  position: absolute;
  top: 0;
}

/*

/* visibility: hidden; into display: none; */

/*
.invisible {
  visibility: hidden;
  display: none;
}
*/

/* you will see that, Although image height is there footer went up close to the cards 

1. one of the solution i found is adding padding or margin to keep space between image section and footer.
but we Don’t know how much is the space remains after the card section. so it Could be a hardcoded one.

2. Solution i tried is added a dummy img that will occupy th height same as image height then the footer comes after the image section.
but here i have to use position attributes to move content on the top of img tag.


Is there any another way around to keep the div/element height same as the background-image height even though the content height is less that image one ??
so that the remaining space will be as a buffer between the element( that has background-image) & next element/footer( in eg its footer) element.
*/

MarkBoots•14mo ago

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)

MarkBoots•14mo ago

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

anandOP•14mo ago

thanks @MarkBoots yes, with img its easy to position the layout,

Why you don't want to have it an img?

Why you don't want to have it an img?

Purpose of the image to be as background color replacement with image, so i prefer to use background-image,

MarkBoots•14mo ago

okay, then there is no other option. you'll have to to create the space. so with a dummy, or with a set height

anandOP•14mo ago

yes, seems like thank you for the quick response

Gaming

Programming

Div element should have same height based on the background-image height