Announcement

**Old Pedant** · Aug 28, 2011, 01:44 AM

I dunno if it's portable, but have you tried using background-size?

Code:

<style type="text/css">
body
  {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover; 
  }
</style>

cover will shrink the image, contain will enlarge it. This is from the MSIE docs. In both cases, the aspect ratio is maintained.

**webdev1958** · Aug 28, 2011, 02:05 AM

If cover causes any browser compatibility issues, this works in all major browsers. The image used as the bg will automatically rescale to the browser window size while maintaing the image's aspect ratio.

Is that what you want or do you want the bg image to resize without having to maintain the original aspect ratio?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
body {
margin:0;
padding:0;
background-color: green;
}
#wrapper {
position:relative;
}
#wrapper img {
position:absolute;
width: 100%;
top:0; left:0;
}
#content {
overflow:hidden;
position:relative;
border: 1px solid red;
width: 800px;
margin:0 auto;
}

</style>
</head>
<body>
 
<div id="wrapper">
       <img src="pic1.jpg" id="logo" alt="logo" />
       <div id="content">  
             <ul>
                   <li><a href="index.html">HOME</a></li>
                    <li><a href="about.html">ABOUT US</a></li>
                    <li><a href="services.html">SERVICES</a></li>
                    <li><a href="faqs.html">FAQ'S</a></li>
                    <li><a href="contact.html">CONTACT US</a></li>
             </ul>
 
<h2>Welcome!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis magna sed urna ultrices aliquet. 
Sed tempor, ante et semper molestie, metus metus ultricies arcu, ornare iaculis tellus justo at dui. Ut 
tempor commodo elit, fringilla malesuada sapien suscipit et. Vestibulum bibendum dapibus porttitor. Proin 
condimentum volutpat ultrices. Ut in aliquam ipsum. Donec tempor placerat feugiat. Mauris in elementum mi. 
Sed lobortis congue est, sed rhoncus justo imperdiet et. Nunc malesuada aliquam lobortis. Morbi sit amet sapien
ac urna hendrerit varius. Sed luctus cursus enim. Nulla vestibulum lacus quis lectus aliquet scelerisque. Sed 
vulputate accumsan massa convallis vehicula. Suspendisse eget imperdiet arcu. Pellentesque nisi elit, mollis 
in aliquam eget, accumsan id diam. </p>
</div>
</div>

 
</body>
</html>

**kurama143** · Aug 28, 2011, 05:12 PM

Wow you guys actually replied

I forgot to add, I use a SiteBulder program from Intuit Host. So I cant use PHP, on my website.

(I still dont know exactly what I want with my BGs, but I just want it to be viewed the same way on all browsers/monitors. Dont know if that requires rescaling or what)

I think I found the correct code for it, not very sure. But I want my BG to stay on the side of the website without moving. I mean like... even if you minimize your browser, the position of the bg wont change.

Heres the new code I use now. Could you guys have a look at it? I just want this to work for all browsers and want it to be coded correctly so the BG will show up well on any size monitor. I used that code for this page here.... http://www.mmosaga.com/main/social.html

Now a friend of mines told me all of this coding is stacked and that all of this made the bg unentered. The BG is 1566width total and the website is 868width.
We had to do (Dont feel like doing math) like 349 I think on both size, but there was still a gap on the left size. About 21px so we did like 370 on the left size and that fixed our problem. But that should not happen. I dont have a problem with it but, If you guys think this will cause a future problem then I want to fix it. I want this website to be legit as possible

<HEAD> Tag
Your HTML will appear between the <HEAD> and </HEAD> tags for this page.:

PHP Code:


<!DOCTYPE html 
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="Favicon9.png">
</head>
</html>
    


<html>

<head>
<script language="javascript">
function randomBackground()
  {
  var myImages = Array();
myImages[0] = 'WorldOfTanksBG.jpg';
myImages[1] = 'PangyaBG.jpg'; 
myImages[2] = 'APB.jpg'; 
myImages[3] = 'AionBG.png'; 

myRandomNumber = Math.floor(Math.random()*myImages.length);

  document.body.style.backgroundImage = 'URL('+myImages[myRandomNumber]+')';
  }
</script>
<style type="text/css">
body
  {
  background-attachment: fixed;
 background-repeat: no-repeat;
background-repeat:repeat-y;
background-position:top center; 
background-position:center;  
}

</style>
</head>

<body onload="randomBackground();"></body>


</style>
<!--[if IE 6]>
<![endif]-->

<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
img#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->

**Old Pedant** · Aug 28, 2011, 08:17 PM

Where did either of us mention PHP? Why did you bring that up?

And you didn't use either of our suggestions, so what more do you want us to say?

And you have conflicting styles in your code:

Code:

<style type="text/css">
body
{
background-attachment: fixed;
background-repeat: no-repeat;
background-repeat:repeat-y;
background-position:top center; 
background-position:center;  
}

</style>

Why the pairs of styles? Only the second of each will be used, I believe.

I can't see why it's so important to get the background image perfect, since you cover up about two-thirds of it or more, in any case.

And you aren't letting it resize itself automatically, as when I change my screen size, it doesn't change.

And you have ANCIENT code in there. You really care about testing for Netscape VERSION 4 browsers? You think there are really more than 3 people in the entire world still using NS 4?

And and and...

But the main point is, if you haven't tried our suggestions, why are you asking us to look at your same-as-before code?

**kurama143** · Aug 28, 2011, 11:37 PM

Lol, sorry about that. Trying it now. Thought I should update my post to show you guys what I found. But Im trying the codes you guys suggested now.
I dont know anything about coding so I thought I should let you guys know what im working with. Not sure if PHP would effect the coding or not :/

**Old Pedant** · Aug 29, 2011, 12:03 AM

Okay, my misunderstanding. I thought you were trying to show us that you had indeed tried our answers. Sorry.

**kurama143** · Aug 29, 2011, 01:44 AM

I tested your suggestions. For webdev1958 idea. The bg wasnt fixed, theres a gap for the height, and image seem to move more to the right. Leaving a gap on the left side.

And OldP, I remove them 2 codes you mentioned, everything seem to be the same. But you know I think this new code is working well, I ask other people what they see and they say it looked fine to them. It seem to work for IE as well. Thanks Guys

---------------------------------------------------------------------------------------
I have a new question for IE and /Frame. Not sure if I supposed to make a new topic on that or what.

But on Internet Explorer browser, you can see my ad sig overlapping with my Social Bar. Heres the http://mmosaga.com/main/social.html page. You should notice my ad sigs has a white gap below it. I tried many codes and that seem to stop the blue boarder I had and white space on the sides and above the signatures. But I seem to cant get the one below it. Heres the code I use for the IFrame

PHP Code:


<body STYLE="background-color:transparent"><iframe src="Advertise/show_news.php" 
name="banner" width="100%"  height="100%" marginwidth="0" marginheight="0" marginbottom="0" align="middle" 
scrolling="No" frameborder="0" hspace="0" vspace="0" ALLOWTRANSPARENCY="true"></iframe>

Announcement

Java Background

Java Background

Comment

Comment

Comment

Comment

Comment

Comment

Comment