Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Java Background

  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Java Background

    Hey guys! I have this website mmosaga.com and in need of some help to fix my BG. Im trying to get my BG to rescale to various of monitor sizes. My monitor width is 1440 and my BG images are Width: 1566 Height:768.

    I want that position to show up on all the other browsers including IE.

    Here the code I use

    PHP Code:
    <html>

    <
    head>
    <
    script language="javascript">
    function 
    randomBackground()
      {
      var 
    myImages = Array();
      
    myImages[0] = 'Florenga.jpg';
      
    myImages[1] = 'pangar.jpg';
    myImages[2] = 'GrandChaseBG.png';
    myImages[3] = 'ADBG.png'
    myImages[4] = 'AionBG.png'
    myImages[5] = 'FiestaBG.jpg'
    myImages[6] = 'GalaxyOnlineBG.jpg'
    myImages[7] = 'GunzBG.png'
    myImages[8] = 'IrisOnlineBG.png'
    myImages[9] = 'MabinogiBG.png';
    myImages[10] = 'APB.jpg';
     
    myImages[11] = 'S4LeagueBG.jpg';  
     
    myImages[12] = 'APB.jpg';
     
    myImages[13] = 'WorldOfTanksBG.jpg';
     
    myImages[14] = 'Elsword.jpg';


    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;
      }
    </style>
    </head>

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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,179
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    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>

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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]--> 
    Last edited by kurama143; 08-28-2011 at 09:36 PM. Reason: more info

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,179
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 :/
    Last edited by kurama143; 08-29-2011 at 03:44 AM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,179
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    Okay, my misunderstanding. I thought you were trying to show us that you had indeed tried our answers. Sorry.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by kurama143; 08-29-2011 at 05:57 AM. Reason: Grammar


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •