Resizing pictures automatically in css

I have built a small blog/webpage using CSS and HTML, but I seem to have a small problem. I insert images using CSS, and when doing so, I use the following:

#blogpic {
background-image: url(bpic.png);
display: block;
background-repeat: no-repeat;
background-position: center;
padding-top:275px;
text-indent:-9999px;
}

#maintext { 
background: none repeat scroll 0 0 #F5F5F5;
margin-top: 75px;
padding: 15px; 
text-align: justify;
开发者_JAVA百科font-family: 'Ubuntu', sans-serif; font-weight: 400; font-size: 12px;
margin-left: 18%;
margin-right: 19%;
}

In my HTML, I have something like:

<div id="maintext"> 
<div id="blogpic"></div>
</div>

Everything seems to work fine, but when I resize the window on my broweser, the images get "cut-off" and so does the "maintext" area. I tried googling to find out the reason: but, havent found any so far.

Would appreciate if anyone could point me on how to avoid pictures being cut off when the window resizes.

Sorry if this a html/css 101 question: I am quite new to web programming!

If I understand correctly, the images are cut off because they are background images... that is, they are not elements that take up space on the page.

If you want to avoid having the images cut off, you need to explicitly set height and width on the divs... with those numbers matching the height and width of the images.

If you're resizing the browser window and when you scroll horizontally to the right, your background cuts off? It's a common bug in block elements that has 100% of the browser width. The fix is using min-width:[width of page, ie 960px].

http://blue-anvil.com/archives/window-resizemobile-browser-background-bugs/