background pic moving with blog! Options

[xblueradiance]

I'm making a layout for a friend:

<!-- begin code provided by createblog.com --><br /><br /><style type="text/css"><br /><br />table.left, td.mainleft, table.navigation, table.search, #SearchBar1_pnlYouAreHere, hr, table.footer TD {display: none;}<br />body {<br />background-color: #f4d3de;<br />background-image: url("none"); <br />background-repeat: no-repeat; <br />background-position: center center;<br />scrollbar-arrow-color: #FFFFFF;<br />scrollbar-track-color: #f8cce0;<br />scrollbar-shadow-color: #FFFFFF;<br />scrollbar-face-color: #f894c8;<br />scrollbar-highlight-color: #FFFFFF;<br />scrollbar-darkshadow-color: #FFFFFF;<br />scrollbar-3dlight-color: #FFFFFF;<br />cursor:default; <br />}<br />.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {<br /><br />font: normal 8PT garamond;<br />color:#c3789f;<br />letter-spacing:0px;<br />text-align: justify;<br />}<br />.blogbody b, .standard b, p b, strong {<br />font: 8PT garamond;<br />font-weight: NORMAL;<br />text-decoration: underline;<br />color: #FFFFFF;<br />}<br />.blogbody u, .standard u, p u, u {<br />text-decoration: underline;<br />border: 0px solid #ffffff;<br />border-width: 0px;<br />}<br />table.footer TD {<br />text-align:center;<br />}<br />.navheader {<br />width:275px;<br />background-color:#transparent;<br />font-family:blackadder ITC;<br />text-transform:uppercase;<br />font-size:8pt;<br />line-height:8pt;<br />font-weight:normal;<br />color:#c3789f;<br />letter-spacing:-2px;<br />text-align: center;<br />}<br />.module { <br />width: 192px;<br />font: normal 8PT garamond;<br />color: #000000;<br />background-color: none;<br />border: #ffffff 0px solid;<br />text-align: justify;<br />}<br />div.blogheader, .caption {<br />font-family: blackadder ITC;<br />text-transform: none;<br />font-size: 8PT;<br />line-height:normal;<br />font-weight: NORMAL;<br />border-bottom: none;<br />letter-spacing: 2px;<br />color: #FFFFFF;<br />text-align:center;<br />width:275px;<br />}<br />.blogbody {<br />background-color: transparent;<br />width:275px;<br />}<br />a:link, .footernav.link, a.footernav:link, a.footernav:active {<br />  color:#ed8fc0;<br />  text-decoration: none;<br />  text-transform: lowercase;<br />  font: 8PT garamond;<br />}<br />a:visited, a.footernav:visited,  {<br />  color:#ed8fc0; <br />  text-decoration: none;<br />  text-transform: lowercase;<br />  font: 8PT garamond;<br />}<br />a:hover {<br /> color:#FFFFFF;<br /> font: normal 8PT garamond;<br /> text-transform: lowercase;<br /> text-decoration: 1px dotted underline;<br /> letter-spacing:0px;<br /> }<br />b, strong{<br />color: #c3789f;<br />text-spacing: 1px;<br />letter-spacing: 1px;<br />}<br />i, em{<br />color: #c3789f;<br />letter-spacing: .5pt;<br />text-spacing: .5pt;<br />}<br />u{<br />color: #FFFFFF;<br />border-bottom: 1px DOTTED #c3789f;<br />}<br />table.blogbody {<br />background: #transparent;<br />width: 275px;<br />border: none;<br />}<br />#pnlEnabled table, #htmleditor, #lblTimeZone{<br />width: 275px;<br />}<br />.#rblEprops{display: none;}<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />{width: 275px;<br />}<br />input, select, textarea, .textfield, .button {<br />/* this edits the buttons, dropdowns, etc. */<br /> border: 1px solid #000000;<br /> font:normal 8PT garamond;<br /> color: #f8cce0;<br /> background-color: ffffff;<br /> letter-spacing:0px;<br />}<br />table.left { <br /> border: 1px solid #f894c8;<br /> font-weight: normal;<br /> width:275px;<br />  background-color: 000000;<br /> }<br />table.left th {<br />font-family: blackadder ITC;<br />text-transform: none;<br />font-size:8pt;<br />font-weight: normal;<br />letter-spacing: 0px;<br />color: #ffffff;<br />background-color: transparent;<br />text-align: center;<br />border: 2px solid #000000;<br />border-bottom: 3px solid 000000;<br /> }<br />table.left TD {<br />background-color: #f8cce0;<br />border:  1px solid #000000;<br />border-top: 3px solid #000000;<br />color: 000000;<br /> }<br />table.search TD, table.search, table.announcements {<br />/* border of search bar (if you have it) */<br />background-color: none; <br />border: 0px solid #000000;<br />}<br />table.search TD, table.announcements TH {<br />/* this should be left alone */<br />/* unless you know what to do */<br />border: 1px solid #000000;<br />}<br />table.blogbody tr td {<br />/* this edits the left margin of blog */<br />width:0px;<br />padding: 2px;<br />}<br />table.blogbody div.smalltext{<br />/* this edits the blog entry footer */<br />text-align: center;<br />padding-bottom: 0px;<br />}<br />table.navigation, table.main, table.footer {<br />/* the width of your blog with modules */<br />width: 275px;<br />}<br /></style><br /><br /><div style="overflow: auto; width: 750px; height: 500px; margin-top: 133px; margin-left:-5px;"><br /><br /><br /><style type="text/css"><br /><br />body {<br />background-image: url("http://img.photobucket.com/albums/v99/Emerald_Rose/Edits%20and%20Banners/cinna.jpg")<br />}<br /><br /></style><br /><br /><!-- end code provided by createblog.com -->

That's the code. I want the blogbox to go UNDER the picture she chose (the one appearing now). Problem: Everytime I try to adjust the "<div style="overflow: auto; width: 750px; height: 500px; margin-top: 133px; margin-left:-5px;">" part, the picture moves with the writing! Help me, please...


Your help is greatly appreciated!

[pure_doxy]

Is the image you're using actually the background? Either take it out of your code (the image) and put it in where xanga gives you the option to, OR you're going to have to make the image a div layer also.

Right now you're just telling the text to position itself on your page, but you've got this image in the way of where it needs to go. You need to tell it to put the text OVER the image. Like I said, make the image into a div layer, too, or make it the background without using a CSS code.

[talcumpowder]

<!-- begin code provided by createblog.com --><br /><style type="text/css"><br /><br />table.left, td.mainleft, table.navigation, table.search, #SearchBar1_pnlYouAreHere, hr, table.footer TD {display: none;}<br />body {<br />background-color: #f4d3de;<br />background-image: url("http://img.photobucket.com/albums/v99/Emerald_Rose/Edits%20and%20Banners/cinna.jpg"); <br />background-repeat: no-repeat; <br />background-position: top center;<br />background-attachment: fixed;<br />scrollbar-arrow-color: #FFFFFF;<br />scrollbar-track-color: #f8cce0;<br />scrollbar-shadow-color: #FFFFFF;<br />scrollbar-face-color: #f894c8;<br />scrollbar-highlight-color: #FFFFFF;<br />scrollbar-darkshadow-color: #FFFFFF;<br />scrollbar-3dlight-color: #FFFFFF;<br />cursor:default; <br />}<br />.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {<br />font: normal 8PT garamond;<br />color:#c3789f;<br />letter-spacing:0px;<br />text-align: justify;<br />}<br />.blogbody b, .standard b, p b, strong {<br />font: 8PT garamond;<br />font-weight: NORMAL;<br />text-decoration: underline;<br />color: #FFFFFF;<br />}<br />.blogbody u, .standard u, p u, u {<br />text-decoration: underline;<br />border: 0px solid #ffffff;<br />border-width: 0px;<br />}<br />table.footer TD {<br />text-align:center;<br />}<br />.navheader {<br />width:275px;<br />background-color:#transparent;<br />font-family:blackadder ITC;<br />text-transform:uppercase;<br />font-size:8pt;<br />line-height:8pt;<br />font-weight:normal;<br />color:#c3789f;<br />letter-spacing:-2px;<br />text-align: center;<br />}<br />.module { <br />width: 192px;<br />font: normal 8PT garamond;<br />color: #000000;<br />background-color: none;<br />border: #ffffff 0px solid;<br />text-align: justify;<br />}<br />div.blogheader, .caption {<br />font-family: blackadder ITC;<br />text-transform: none;<br />font-size: 8PT;<br />line-height:normal;<br />font-weight: NORMAL;<br />border-bottom: none;<br />letter-spacing: 2px;<br />color: #FFFFFF;<br />text-align:center;<br />width:275px;<br />}<br />.blogbody {<br />background-color: transparent;<br />width:275px;<br />}<br />a:link, .footernav.link, a.footernav:link, a.footernav:active {<br />  color:#ed8fc0;<br />  text-decoration: none;<br />  text-transform: lowercase;<br />  font: 8PT garamond;<br />}<br />a:visited, a.footernav:visited,  {<br />  color:#ed8fc0; <br />  text-decoration: none;<br />  text-transform: lowercase;<br />  font: 8PT garamond;<br />}<br />a:hover {<br /> color:#FFFFFF;<br /> font: normal 8PT garamond;<br /> text-transform: lowercase;<br /> text-decoration: 1px dotted underline;<br /> letter-spacing:0px;<br /> }<br />b, strong{<br />color: #c3789f;<br />text-spacing: 1px;<br />letter-spacing: 1px;<br />}<br />i, em{<br />color: #c3789f;<br />letter-spacing: .5pt;<br />text-spacing: .5pt;<br />}<br />u{<br />color: #FFFFFF;<br />border-bottom: 1px DOTTED #c3789f;<br />}<br />table.blogbody {<br />background: #transparent;<br />width: 275px;<br />border: none;<br />}<br />#pnlEnabled table, #htmleditor, #lblTimeZone{<br />width: 275px;<br />}<br />.#rblEprops{display: none;}<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />{width: 275px;<br />}<br />input, select, textarea, .textfield, .button {<br />/* this edits the buttons, dropdowns, etc. */<br /> border: 1px solid #000000;<br /> font:normal 8PT garamond;<br /> color: #f8cce0;<br /> background-color: ffffff;<br /> letter-spacing:0px;<br />}<br />table.left { <br /> border: 1px solid #f894c8;<br /> font-weight: normal;<br /> width:275px;<br />  background-color: 000000;<br /> }<br />table.left th {<br />font-family: blackadder ITC;<br />text-transform: none;<br />font-size:8pt;<br />font-weight: normal;<br />letter-spacing: 0px;<br />color: #ffffff;<br />background-color: transparent;<br />text-align: center;<br />border: 2px solid #000000;<br />border-bottom: 3px solid 000000;<br /> }<br />table.left TD {<br />background-color: #f8cce0;<br />border:  1px solid #000000;<br />border-top: 3px solid #000000;<br />color: 000000;<br /> }<br />table.search TD, table.search, table.announcements {<br />/* border of search bar (if you have it) */<br />background-color: none; <br />border: 0px solid #000000;<br />}<br />table.search TD, table.announcements TH {<br />/* this should be left alone */<br />/* unless you know what to do */<br />border: 1px solid #000000;<br />}<br />table.blogbody tr td {<br />/* this edits the left margin of blog */<br />width:0px;<br />padding: 2px;<br />}<br />table.blogbody div.smalltext{<br />/* this edits the blog entry footer */<br />text-align: center;<br />padding-bottom: 0px;<br />}<br />table.navigation, table.main, table.footer {<br />/* the width of your blog with modules */<br />width: 275px;<br />}<br /></style><br /><br /><div style="overflow: auto; width: 750px; height: 500px; margin-top: 133px; margin-left:-5px;"><br /><!-- end code provided by createblog.com -->

It helps if you don't tell the page there isn't a background and then suddenly change your mind.
[ http://www.createblog.com/forums/index.php?showtopic=61624 ]
For more on background.