 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
finaldiner
Joined: 04 Nov 2008
Posts: 7
|
 Posted: Tue Nov 04, 2008 8:19 am centred background image/window resizing problem |
 |
|
|
Is is possible to stop my large centred background image (in the body tag) from disappearing off the left side of the window when the window is resized smaller than the image itself?
The problem is made worse when the viewer subsequently scrolls right as the content is then displayed with no background. |
|
sticks464
Joined: 31 Dec 2006
Posts: 1283
|
|
finaldiner
Joined: 04 Nov 2008
Posts: 7
|
| Posted: Wed Nov 05, 2008 12:17 am |
|
|
|
body{
background: #000000;
margin-top: 0px;
background-image: url(../images/moby_bg.jpg);
background-repeat: repeat-y;
background-position: center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
color: #555555;
text-align: center;
}
Not a problem in IE (as far as I know) or Safari, but in Firefox & Opera, when the window is resized horizontally, the bg image (which is 775px wide) disappears off the left edge. Obviously, the centred origin is being maintained, but this is useless for the current design.
Is there any way to make it work the same (wrong?) way as in IE? |
|
sticks464
Joined: 31 Dec 2006
Posts: 1283
|
| Posted: Wed Nov 05, 2008 4:49 am |
|
|
|
Write the css as
(works in all browsers)
| Code: |
body{
margin-top: 0px;
background: #000 url(../images/moby_bg.jpg) repeat-y top center;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
color: #555555;
text-align: center;
} |
If this doesn't work try putting the background image in a centered div
| Code: |
<body>
<div id="outer">
<div id="wrapper">
...content...
</div>
</div>
</body> |
| Code: |
<style type="text/css">
* {margin: 0; padding: 0;}
html,body{
height:100%;
margin:0;
padding:0;
font-size: 100%;
}
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
color: #555555;
text-align: center;
}
#outer {
width: 775px;
margin: auto;
background: #000 url(../images/moby_bg.jpg) repeat-y top center;
}
#wrapper {
width: 768px;
margin: auto;
}
</style> |
The ../ in front of the image path is not needed if the html file is in the root directory. Only use with an external style sheet that is stored in another folder and not the root. |
|
finaldiner
Joined: 04 Nov 2008
Posts: 7
|
| Posted: Thu Nov 06, 2008 10:05 am |
|
|
|
Sticks,
Many thanks for your advice! Unfortunately, the problem remains.
I've tried using a wrapper div for the bg image, but other problems arose - the main one being that, when using my usual DOCTYPE…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
…I can't get the wrapper/image to display at 100% of the window height. It's only as tall as the div's content - no content, no bg image.
Using Quirks Mode, the wrapper/image is 100% high but when I resize the browser window smaller vertically and scroll down, the image redraw is unreliable and the content displays over my black background.
The more I research this, the more it seems as if it's not do-able with CSS. |
|
sticks464
Joined: 31 Dec 2006
Posts: 1283
|
| Posted: Thu Nov 06, 2008 1:34 pm |
|
|
|
Here's what I came up with. It fills full screen and will not disappear when screen is less than 775px wide.
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body, #wrapper {height:100%;}
body{
margin-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
color: #555555;
text-align: center;
background: #000 url(../images/moby_bg.jpg) repeat-y center;
height: 100%;
}
#wrapper {
width: 775px;
height: 100%;
margin: 0 auto;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html> |
|
|
finaldiner
Joined: 04 Nov 2008
Posts: 7
|
|
sticks464
Joined: 31 Dec 2006
Posts: 1283
|
| Posted: Fri Nov 07, 2008 8:09 am |
|
|
|
| I have looked at the site using IE7, FF3 and Opera9.5 with resolutions 1024 x 768 upward to 1280 x 1024 on a 19" screen. Looks the same in all. Background is where it should be and stays in the center no matter how small the browser window.. |
|
finaldiner
Joined: 04 Nov 2008
Posts: 7
|
|
sticks464
Joined: 31 Dec 2006
Posts: 1283
|
| Posted: Fri Nov 07, 2008 10:28 am |
|
|
|
I think the problem has got to do with absolute positioning and floats. You can't use both.
W3C
| Quote: |
| if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', |
As soon as I get home from work I will work out your problem. |
|
finaldiner
Joined: 04 Nov 2008
Posts: 7
|
| Posted: Fri Nov 07, 2008 11:33 am |
|
|
|
Thanks, again, for taking the time to look at this - much appreciated!
I understand (kind of) what you say about positioning/floats but, surely, it's the background image which is the problem, and that's in the body tag? When it's in the wrapper the horizontal positioning is fine (it can't move off the left side of the window!), but I can't seem to make the wrapper 100% high unless it's full of content - i.e. the bg image doesn't count as content. |
|
sticks464
Joined: 31 Dec 2006
Posts: 1283
|
| Posted: Fri Nov 07, 2008 12:10 pm |
|
|
|
| If you use the layout method here http://www.pmob.co.uk/temp/2_col_centred_imgbg.htm you can use the image as the wrapper background. You'll have to use a little more css to achieve the presentation of your site which I'll work up when I am home. |
|
sticks464
Joined: 31 Dec 2006
Posts: 1283
|
| Posted: Fri Nov 07, 2008 2:09 pm |
|
|
|
Here's a layout that work's in all browsers. You will have to correct the image paths back to your folder.
| Code: |
<!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>100% Height Centered Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* mac hide\*/
html, body {height:100%}
/* end hide */
body {
padding:0;
margin:0;
text-align:center;
min-width:777px;/* for mozilla*/
background-color: #000000;
color: #555555;
}
#outer{
min-height:100%;
width:775px;
color: #000000;
text-align:left;
margin:auto;
position:relative;
background:pink url(images/moby_bg.jpg) repeat-y center top;
}
* html #outer{height:99.9%;} /*For ie as treats height as min-height anyway - also addreeses rounding bug at bottom of screen in IE*/
#header{
min-height:110px;
border-top:1px solid #000;
position:relative;
}
* html #header{height:110px}
#left {
position:relative;/*ie needs this to show float */
width:153px;
float:left;
color:#fff
}
#left p {padding:2px}
#footer {
width:775px;
clear:both;
height:50px;
left:0;
bottom:0;
position: absolute;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
margin-bottom:-1px;
}
#centrecontent {
width:622px;
float:right;
padding-top:25px;
}
#centrecontent p {padding: 0 25px 0 3px}
#clearfooter {width:100%;height:52px;clear:both} /* to clear footer */
/****************************Menu*************************************/
a:link {text-decoration: none; color: #4986B2;}
a:hover {color: #cccccc; text-decoration: none;}
.menu a:link {text-decoration: none; color: #4986B2;}
.menu a:visited {color: #4986B2; text-decoration: none;}
.menu a:hover {color: #333366; text-decoration: none;}
.menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #006699;
font-weight: normal;
font-style: normal;
line-height: 18px;
text-align: right;
width: 95px;
}
/******************************Content********************************/
.head1 {color: #006699; font-size:13px;}
</style>
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body>
<div id="outer">
<div id="header">
<table style="width:775px; height:110px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2" style="background-image: url(images/blugrad_l.gif); width:10px; height:110px"></td>
<td colspan="9" style="background-image: url(images/banner_top_01.gif); height:74px"></td>
<td rowspan="2" style="background-image: url(images/blugrad_r.gif); width:10px"></td>
</tr>
<tr>
<td><img src="images/psba.gif" width="233" height="36"></td>
<td><a href="biog.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('biog','','images/biog_over.gif',1)"><img src="images/biog.gif" name="biog" width="41" height="36" border="0"></a></td>
<td><a href="philosophy.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('philosophy','','images/philosophy_over.gif',1)"><img src="images/philosophy.gif" name="philosophy" width="78" height="36" border="0"></a></td>
<td><a href="inventions.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('inventions','','images/inventions_over.gif',1)"><img src="images/inventions.gif" name="inventions" width="73" height="36" border="0"></a></td>
<td><a href="innovations.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('innovations','','images/innovations_over.gif',1)"><img src="images/innovations.gif" name="innovations" width="83" height="36" border="0"></a></td>
<td><a href="gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gallery','','images/gallery_over.gif',1)"><img src="images/gallery.gif" name="gallery" width="54" height="36" border="0"></a></td>
<td><a href="publications.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('publications','','images/publications_over.gif',1)"><img src="images/publications.gif" name="publications" width="84" height="36" border="0"></a></td>
<td><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/contact_over.gif',1)"><img src="images/contact.gif" name="contact" width="60" height="36" border="0"></a></td>
<td><a href="link.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('link','','images/link_over.gif',1)"><img src="images/link.gif" name="link" width="49" height="36" border="0"></a></td>
</tr>
</table><!-- #EndLibraryItem -->
</div>
<div id="centrecontent">
<!--centre content goes here -->
<h3 class="head1">WELCOME!</h3>
<p>Philip Smith is a book artist raestisim dolessismod euguer aute dit la
augiam, sequat. Duisl illa feugue mod tet volorpe rillaore tat.</p>
<p>Dipis nummy nos nit irit laore mincil iure exero esed eum ex
ex esenibh el in venim in
ulluptate vercidunt prat. Ut luptat lan ullandre feugait
nulla faccummy num iusciduis ea faciduipsum iriurem in henim ex ent
iusci tat velisim vel erilit
ut nosto odipiscilit in velit iure molorpercip eugue
consequam diat nosto doloreet numsandrem inci tatem dolore tin ulpute magnis
at eu facillam alismol
ortionullan enis dolorper ip ea alit adipis autpat. </p>
<p>Ut eros nullaore modolor tincidunt alisl ut ad min veliscipit,
voloborper acipit ip eniscil iquisim
in verilisl iriuscidui te faccum irilluptat lorperi uscidunt
nullaore cons</p>
<p>Dipis nummy nos nit irit laore mincil iure exero esed eum ex
ex esenibh el in venim in
ulluptate vercidunt prat. Ut luptat lan ullandre feugait
nulla faccummy num iusciduis ea faciduipsum iriurem in henim ex ent
iusci tat velisim vel erilit
ut nosto odipiscilit in velit iure molorpercip eugue
consequam diat nosto doloreet numsandrem inci tatem dolore tin ulpute magnis
at eu facillam alismol
ortionullan enis dolorper ip ea alit adipis autpat. </p>
<p>Ut eros nullaore modolor tincidunt alisl ut ad min veliscipit,
voloborper acipit ip eniscil iquisim in verilisl iriuscidui te faccum irilluptat lorperi uscidunt
nullaore cons</p>
</div>
<div id="left">
<div class="menu">
<p> </p>
<p><a href="biog.html">Menu 1</a></p>
<p><a href="about/philosophical.html">Menu 2</a></p>
<p><a href="about/inventions.html">Menu 3</a></p>
<p><a href="about/innovations.html">Menu 4</a></p>
</div>
</div>
<div id="clearfooter"></div>
<!-- ie needs this -->
<div id="footer"></div>
</div>
<!-- end outer div -->
</body>
</html> |
|
|
finaldiner
Joined: 04 Nov 2008
Posts: 7
|
| Posted: Sun Nov 09, 2008 7:35 am |
|
|
|
What can I say?
Fantastic! Thank you very, very much!
Works beautifully in Firefox and IE. Still a few redraw issues in Safari 2 (Mac) but not really a problem.
http://www.meljefferson.com/philipsmithbookart/
Finally, I can get on with the rest of the site.
Couldn't have got this far without your help - thanks again. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
