I am currently utilizing a template from semantic-ui, specifically this one: . My goal is to adjust the height of the background to match the height of my image. At the moment, my image (set as the background-image) appears fine, but the background color (which I changed to red for clarity) extends beyond it, creating an empty space between the background-image and the content.
Despite my attempts at manipulating the background size, it seems that the only thing I can alter successfully is its color. Every time I try adjusting the size, it only affects the image and not the actual red background itself.
I might be misunderstanding how these two elements work together. Do you have any suggestions on how I can make the background's height align with the background-image?
Any assistance would be greatly appreciated.
Below is the CSS code:
.ui.inverted.vertical.center.aligned.segment {
background: red;
background-image: url('./images/backgroundLogo.png');
background-repeat: no-repeat;
/* background-size: 100%; */
background-size: 100% 507px;;
width:100%;
}