My header/navigation bar div features a repeat-x background image. Within this, I have a horizontal navigation that needs to be centered over the background with a specified min-width and normal width.
I want the navigation to be 80% of the full width, with a minimum width of 1000px, centrally positioned on the page.
CSS
.center-wrap {
width: 80%;
min-width: 1000px;
margin: 0 auto;
}
#bar {
width: 100%;
height: 50px;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
}
HTML
<div id="bar">
<div class"center-wrap">
UL LI HERE
</div>
</div>
Error
The issue arises when the page is resized below 1000px, causing the repeat-x background image to cut off, particularly when scrolling and revealing other content on the website.
How can I maintain the integrity of my repeat-x background image on #bar, while ensuring that .center-wrap remains centered and adheres to both a min-width and percentage-based width?