At the bottom of my website, I have a bar for displaying certain content. However, I am facing an issue where the bar is not extending to cover the entire screen width despite having code in place to do so.
The HTML code is quite basic:
<div class="bottom-ulity">
other content goes here
</div>
Here is the CSS code:
.bottom-ulity {
height : 57px;
width : 100%;
right : 0;
position : fixed;
bottom : 0;
background : url('../images/inner-show-text.png') repeat-x left top;
z-index : 1000;
}
I have tried setting min-width to 100%, as well as adding a value like 2046px as min-width. I also explored options like "background-size: 100%" and "background-size: cover" based on recommendations found on other pages. However, these changes result in the image extending properly but losing its gradient effects, replacing them with a plain gray color.
Deleting all inner divs did not resolve the issue either. Adding "background-repeat: no-repeat;" showed the image only once without proper extension, leaving a significant gap where the bar should be (when zoomed out far enough).
An image illustrating the problem can be seen below: