Avatar of JMRFan4Life
JMRFan4Life asked on

the bg on the body moves when window is resized

When i resize the window smaller than the width of my page the background on the body of my page shifts to the left of the screen. In IE it works fine everything lines up when you scroll. In ff the bg image is pushed to the left and you can't see the whole image. I am attaching a screen shot.

This is the css for the bg i am using:

body {background:#FFF9FD url('/images/interstitial/bgd_interstitial.gif') center repeat-y;margin:0;}



Thanks
screenshot-bg.jpg
CSSHTMLWeb Development

Avatar of undefined
Last Comment
JMRFan4Life

8/22/2022 - Mon
ASKER
JMRFan4Life

i added fixed to the background property and i get a different result.. it will lose the sides to the background and just appear as whitespace when the window is narrower than the width of the page
David S.

You could put a min-width on the outermost <div>, however, I would probably split the image into two different images, so the part with the text wasn't a background image.
ASKER
JMRFan4Life

I should have included a second screenshot that displayed the whole image, My Apologies!  I can't show you this minute, however i will describe the design as best I can.    

The background image is the bottom of the shot above(white with gray boarder) 1 px high. It does not have the pink bg anywhere on it. The bg is around 530px wide or close tothat off the top of my head.

Thanks Again!
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
David S.

It's not clear to me what the issue is then. Would you please post a link to an example page?
ASKER
JMRFan4Life

Here is the css
body {background-color: #FFF9FD; margin:0 0 0;background:#FFF9FD url('images/bgd_interstitial.gif') center repeat-y; }
.shell {
    width:953px;
	height:750px;
    text-align:center;
    background: url() 0 0 repeat-y; 
    position: relative;
    }
 
#inter1.inner {
    width:auto;
    background:#F6E9F3 url('images/bgd_top_div.gif') 0 0 repeat-x;
    margin:0 5px;
	border-bottom:#DCB7CF solid 1px;
    }
 
.inner {
    width:auto;
    background:#F6E9F3 url('images/bgd_top_div_2.gif') 0 0 repeat-x;
    margin:0 5px;
	border-bottom:#DCB7CF solid 1px;
    }
 
#interstitial .people {position:absolute; left:10px; top:70px;}
 
/*Content Styles*/
 
.content1 {font:normal 12px/normal arial;margin:0 0 0 400px;}
.content2 {font:normal 14px/normal arial;margin:55px 0 0 0;}
.content2inner {width:800;margin: 0 0 0 270px;}
.content3 {padding:10px 0 15px;font:normal 14px/16px arial;margin:0 0 0 185px;text-align:left;}
.content4 {padding:10px 0 15px;font:normal 14px/16px arial;}
 
#inter1.content2 {width:300px; font:normal 14px/normal arial;	margin:60px 0 0 500px; text-align:left;}
 #inter1 .content2 {width:300px; font:normal 14px/normal arial; margin:60px 0 0 356px; text-align:left;}
 
 #inter1.content3 {padding:143px 0 15px 0;font:normal 14px/16px arial;margin:0 0 0;}
 #inter1 .content3 {padding:10x 0 15px 0;font:normal 14px/16px arial;margin:0 0 0;}
 
#inter2.content2 {margin:40px 0 0 0;}
 
.linkskiptop {font:bold 12px/normal arial;margin:15px 10px 0 0;float:right;}
.linkskipbottom {font:bold 12px/normal arial;margin:3px 15px 0 0;float:right;}
.linksleft {float:left; width:138px}
.linksright {float:left; width:150px;}
.bannertext {float:left;margin:25px 0 0 20px;}
 
img.float {float:left;}
img.browsemoms {margin:0 0 5px;}
 
/*Header Styles*/
 
h1, h2, h3 {margin:0;padding:0}
 
#inter1 h1 {color: #0C5284;font:normal 34px/60px arial;}
#inter1 h2 {color: #8F2362;font:normal 22px/normal arial;}
#inter1 h3 {color: #0C5284;font:bold 18px/normal arial;}
#blog.header h1 {color: #0C5284;font:normal 34px/normal arial;}
#ticker.header h1, h2 {color: #0C5284;font:normal 30px/normal arial;}}
 
h2 {color: #0C5284;font:normal 27px/normal arial;}
h3 {color: #0C5284;font:normal 22px/normal arial;}
 
.content2inner h2{color: #0C5284;font:italic 27px/normal arial;}
 
/*Link Styles*/
 
a.startblog {margin:10px 0 20px 10px;display:block;}
a.browsemoms {margin:0 0 20px 10px;}
a.plink {font:normal 18px/normal arial; background: url(images/pink_triangle.gif) right center no-repeat; padding-right: 15px;}
a.skip {color: #000; background: url(images/triangle.gif) right center no-repeat; padding-right: 10px;}
a {color: #8F2362;}
 
ul{list-style-type: none; padding:0; margin:0; line-height: 1.8;}
 
.clear {clear:both}

Open in new window

ASKER
JMRFan4Life

Here is my HTML ... The bg image for the body is the same as the bg for the inner shell.

It is 1px in height and 953px wide.   The bg is white with a gray border on each of the sides.

I want the bg to extend down to the bottom of the page regardless where the content ends.

It works fine when screen is at least 953px wide when it is smaller the bg becomes misaligned.

I hope this helps!!

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Interstitial Blog</title>
<link rel="StyleSheet" href="interstitial.css" type="text/css">
</head>
<body>
    <center>
        <div class="shell">
			
			<div class="inner">
				<!-- Header Image -->
				<div>
					<img class="float" src="images/hdr_wte_today.png" width="251" height="54" alt="What To Expect Today" border="0"/>
					<div class="linkskiptop">
						<a class="skip" href="#">skip this page</a>
					</div>
					<div class="clear"></div>
				</div>                
                
                <!-- Content -->
				<div id="blog" class="header">
						<h1>Just Blog About It!</h1>
                </div>
                
				<div class="content2">
					<img src="images/pic_baby_mother_laptop.jpg" width="439" height="289" alt="Baby and Mother on Laptop" border="0" />
				</div>
                
				<div class="content3">
					<div>
						<img src="images/txt_share_your_thoughts.jpg" width="549" height="25" alt="share your thoughts on pregnancy and parenting" border="0" />
					</div>
					<div>
						<a class="startblog" href="#">Start a blog!</a>
					</div>
					<div>
						<img class="browsemoms" src="images/txt_browse_other_moms.jpg" width="261" height="18" alt="browse other moms' blogs" border="0" />
					</div>
					<div>
						<a class="browsemoms" href="#">Due Date</a> 
						<a class="browsemoms" href="#">Child's Birthday</a> 
						<a class="browsemoms" href="#">Parenting</a> 
						<a class="browsemoms" href="#">Trying to Conceive</a> 
						<a class="browsemoms" href="#">Latest Posts</a>
					</div>
				</div>
            </div>
			<div>
				<div class="linkskipbottom">
					<a class="skip" href="#">skip this page</a>
				</div>
				<div class="clear"></div>
			</div>
			
        </div>
    </center>
</body>
</html>

Open in new window

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
David S.

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
JMRFan4Life

The page is not on the lvie site at this time.

Can't you replicate the design by creating a background image as i described before. The content itslef has nothing to do with this error. FF has this bug where the bg image is getting pushed when the screen is narrower than the image itself. The screen shot i provided is broken where the bg of the shell ends and the bg of the body is know visible. If you take out the bg on the shell as i left it in the css above you can see the bg image being pushed more clearly. This is very simple to replicate. I appreciate the help!
ASKER
JMRFan4Life

use this html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Interstitial Blog</title>
<link rel="StyleSheet" href="interstitial.css" type="text/css">
</head>
<body>
    <center>
        <div class="shell">
			
			<div class="inner">
					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            </div>
			<div>
				<div class="linkskipbottom">
					<a class="skip" href="#">skip this page</a>
				</div>
				<div class="clear"></div>
			</div>
			
        </div>
    </center>
</body>
</html>

Open in new window

ASKER
JMRFan4Life

just create a bg image    1px in height and 953px wide.


white with 1px gray border on each side
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
David S.

It seems that the simplest (and probably best) solution would be to apply the background-image on <body> to ".shell" as well.
ASKER
JMRFan4Life

that didn't pan out so well... However ei eventually got it to work. the unfortunate part is i have been so busy with work i forgot to post the solution and now can't remember. Thanks for the suggestions !!!