Control text not staying inside the container div

I use css liquid layouts for the websites that I do. I have an app that allows a visitor to sign up for an upcoming event. That form has a container div with another div with a background image, then a unnumbered list with several items.

The page max-width is set to 1048px.

When the page is resized the background image does not resize with the rest of page which causes the list items to eventually overflow the background image.

CSS is directly after aspx page:
  <div class="FlamingHotSponsorWrapperDiv">
                    <div class="FlamingHotSponsorDiv Center">
                        <div class="FlamingHotSponsorAlignmentDiv">
                            <input id="FlamingHotSponsorshipCheckbox" type="checkbox" value="1000.00" runat="server" class="LargeCheckbox" />
                            <asp:Label ID="FlamingHotSponsorshipLabel" CssClass="FlamingHotSponsorLabel" Text="Flaming Hot Sponsor $1,000" runat="server"></asp:Label>
                            <ul id="Ul1" class="FlamingHotSponsorUL" runat="server">
                                <li class="FlamingHotSponsorLi"> 6 tickets to the event</li>
                                <li class="FlamingHotSponsorLi">&bull; Company logo on flyers, table tents, and in event program book</li>
                                <li class="FlamingHotSponsorLi">&bull; Logo on event t-shirts &bull;</li>
                                <li class="FlamingHotSponsorLi">Name on banner displayed at the event</li>
                                <li class="FlamingHotSponsorLi">&bull; Name in <i><i>Vista</i></i>, KBA's newsletter</li>
                                </ul>
                        </div>
                        <br style="clear: both" />
                </div>

css page:    
body
{
    margin: 0 auto 1% auto;
    padding: 0 0 1% 0;
    border: 0; /* This removes the border around the viewport in old versions of IE */
    width:100%;
    max-width: 1024px;
    background: #808080; /* The min-width property does not work in old versions of Internet Explorer */
    font-size: 90%;
    font-family: 'Gill Sans MT Condensed';
}
    .FlamingHotSponsorWrapperDiv {
    clear: both;
    margin-top:21%;
    width:100%;
   
}

.FlamingHotSponsorDiv {
    background-image: url('images/FlamingHotSponsorBannerNoText.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 8%;
    padding-right: 8%;

}

.FlamingHotSponsorUL {
    /*position: relative;*/
    padding-top: 0px;
    margin-top: 0px;
}

.FlamingHotSponsorLi {
    display: inline-block;
    font-size: x-large;
    color: #000000;
    
}

.FlamingHotSponsorLabel {
    font-size: 250%;
    font-weight: bold;
    color: #E63375;
    margin-bottom: 0;
    text-transform: uppercase;
}
.FlamingHotSponsorAlignmentDiv {
    padding-top: 2%;
}
.Center {
    text-align: center;
}

Open in new window

ICantSeeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
In the CSS set  background-size: 100% 100%;

That will allow it to resize but it may distort it as well.

Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ICantSeeAuthor Commented:
Thanks for the reply... is there supposed to be 2 100% entries or only one?

The app is running at the following address. the  "Flaming Hot Sponsor" breaks when its resized.


https://keystoneblind.org/sizzler
0
ICantSeeAuthor Commented:
I put the second 100% in there.. it looks good. THANK YOU
0
ICantSeeAuthor Commented:
Excellent ... Thank you
0
COBOLdinosaurCommented:
Sorry; a little slow getting back.  It needs both for x and y dimensions.  backgrounds are different from foreground images where giving just the width will cause the browser to calculate the height needed to maintain the aspect ratio.

Glad I could help a little.

Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.