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 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Background image not displaying properly

    I'm not sure if this is in the right forum but I don't really know what is wrong here. I have code that generates a random background image. It seems to be working - different background images are appearing as I refresh, however only the top sliver of the image is showing up and I have no idea why this is. I would really appreciate any help here! This is my code (I bolded the code I am having trouble with):

    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>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <link rel="stylesheet" href="style.css" type="text/css" />
    
    <script type="text/javascript" src="javascript.js"></script>
    
    <script>
    
    num = Math.floor( Math.random()* 3 );
    
    if ( num == 1 ) {
    
    image = "bg1.png";
    
    }
    
    if ( num == 2 ) {
    
    image = "bg2.png";
    
    }
    
    </script>
    
    <title>Embroidery by CJ</title>
    
    </head>
    
    <body onload="MM_preloadImages('contact1.png','about1.png','producst1.png','index1.png'), document.body.background = image">
    
    <div class="header">
    
    <div class="wrapper">
    
    <div class="logo">
    
      <img src="logo.png" width="438" height="56" alt="Embroidery by CJ" />
    
    </div>
    
    <div class="nav">
    
      <div class="link4">
    
      <center>
    
      <a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','contact1.png',1)"><img src="contact.png" alt="Contact" name="Contact" width="73" height="15" border="0" id="Contact" /></a>
    
      </center>
    
      </div>
    
      <div class="link3">
    
      <center>
    
      <a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','about1.png',1)"><img src="about.png" alt="About" name="About" width="56" height="16" border="0" id="About" /></a>
    
      </center>
    
      </div>
    
      <div class="link2">
    
      <center>
    
      <a href="products.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','producst1.png',1)"><img src="products.png" alt="Products" name="Products" width="83" height="20" border="0" id="Products" /></a>
    
      </center>
    
      </div>
    
      <div class="link1">
    
      <center>
    
      <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','index1.png',1)"><img src="index.png" alt="Home" name="Home" width="54" height="16" border="0" id="Home" /></a>
    
      </center>
    
      </div>
    
    </div>
    
    </div>
    
    </div>
    
    <br /><br />
    
    <div class="container">
    
    <div class="sidebar">
    
    <h4>Menu</h4><hr />
    
    <a href="babies.html" class="linkmain">Babies</a><br />
    
    <a href="bibs.html" class="linksecondary">Bibs</a>   <br />
    
    <a href="blankets.html" class="linksecondary">Blankets</a>   <br />
    
    <a href="onesies.html" class="linksecondary">Onesies</a>   <br /><br />
    
    <a href="bathroom.html" class="linkmain">Bathroom</a><br />
    
    <a href="toilet-paper.html" class="linksecondary">Toilet Paper</a>   <br />
    
    <a href="soaps.html" class="linksecondary">Soaps</a>   <br /><br />
    
    <a href="hats.html" class="linkmain">Hats</a><br />
    
    <a href="womens-hats.html" class="linksecondary">Women's Hats</a>   <br />
    
    <a href="baseball-caps.html" class="linksecondary">Baseball Caps</a>   <br /><br />
    
    <a href="kitchen.html" class="linkmain">Kitchen</a><br />
    
    <a href="aprons.html" class="linksecondary">Aprons</a>   <br />
    
    <a href="napkins.html" class="linksecondary">Napkins</a>   <br />
    
    <a href="towels.html" class="linksecondary">Towels</a>   <br /><br />
    
    <a href="weddings.html" class="linkmain">Weddings</a><br />
    
    <a href="t-shirts.html" class="linksecondary">T-Shirts</a>   <br />
    
    <a href="lace-gloves.html" class="linksecondary">Lace Gloves</a>   <br />
    
    <a href="lace-hankies.html" class="linksecondary">Lace Hankies</a>   </div>
    
    </div>
    
    </body>
    
    </html>
    And style.css:

    Code:
    @charset "utf-8";
    
    /* CSS Document */
    
    html, body {
    
        margin: 0;
    
        padding: 0;
    
        background-color: #F0F0E3;
    
        background-repeat: no-repeat;
    
    }
    
    .linkmain {
    
        color: #1E1E1E;
    
        text-decoration: underline;
    
    }
    
    .linksecondary {
    
        color: #666;
    
        text-decoration: underline;
    
    }
    
    .linkmain:hover {
    
        color: #2FBBFF;
    
        text-decoration: none;
    
    }
    
    .linksecondary:hover {
    
        color: #8AD9FF;
    
        text-decoration: none;
    
    }
    
    h4 {
    
        color: #2FBBFF;
    
    }
    
    /* Header */
    
    .header {
    
        height: 110px;
    
        background-image: url(bg.png);
    
        background-repeat: repeat-x;
    
        -webkit-box-shadow: 0px 1px 10px #1E1E1E;
    
           -moz-box-shadow: 0px 1px 10px #1E1E1E;
    
            -ms-box-shadow: 0px 1px 10px #1E1E1E;
    
             -o-box-shadow: 0px 1px 10px #1E1E1E;
    
                box-shadow: 0px 1px 10px #1E1E1E;
    
    }
    
    .wrapper {
    
        width: 960px;
    
        margin: 0 auto;
    
    }
    
    .logo {
    
        float: left;
    
        width: 438px;
    
        margin: 34px 0 0 0;
    
    }
    
    .nav {
    
        float: right;
    
        width: 510px;
    
        margin: 70px 0 0 0;
    
    }
    
    .link1 {
    
        width: 25%;
    
    }
    
    .link2 {
    
        float: right;
    
        width: 25%;
    
    }
    
    .link3 {
    
        float: right;
    
        width: 25%;
    
    }
    
    .link4 {
    
        float: right;
    
        width: 25%;
    
    }
    
    /* Container */
    
    .container {
    
        width: 960px;
    
        margin: auto;
    
        margin-top: 10px;
    
    }
    
    /* Sidebar */
    
    .sidebar {
    
        width: 17.5%;
    
        float: left;
    
        padding-top: 25px;
    
        padding-right: 10px;
    
        text-align: right;
    
        background-image: url(transparent1.png);
    
    }
    
    /* Main */
    
    .main {
    
        width: 85%;
    
        float: left;
    
        background-color: #FFF;
    
    }
    
    /* Ad */
    
    .ad {
    
        width: 15%;
    
        float: right;
    
        background-color: blue;
    
    }
    I don't know how to post a picture on this forum, it seems the pic needs to be on the web?

    Only a little portion is showing up to the left of the sidebar. It is just the top slice of the backround image, maybe 50 pixels, even though the image is a couple hunrded pixels high.
    Last edited by solarSEAL; 12-18-2011 at 07:15 PM.

  • #2
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by solarSEAL View Post
    Code:
        height: 110px;
        background-image: url(bg.png);
    You're setting a background image on an element that's only 110px high, so naturally only the first 110px of the image will show.

    This has nothing to do with Javascript. I'll move this to CSS.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    That is a different area. That is the background url of my .header div tag and I am trying to put a background on body.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello solarSEAL,
    The code you've given us has a background image for .header and another for .sidebar.

    There is no background image for body.
    To add one, you would make your CSS look like this (see the bits highlighted in red) -
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    html, body {
    	margin: 0;
    	padding: 0;
    /*background-color: #F0F0E3;
    background-repeat: no-repeat;*/
    }
    body {background: url(path/to/image.jpg);
    .linkmain {
    	color: #1E1E1E;
    	text-decoration: underline;
    }
    .linksecondary {
    	color: #666;
    	text-decoration: underlin
    Last edited by Excavator; 12-18-2011 at 07:49 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    You could also do it by specifying html/body to be full height, like this -
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    html, body {
    height: 100%;
    	margin: 0;
    	padding: 0;
    	background-color: #F0F0E3;
    	background-repeat: no-repeat; /*this one isn't doing anything*/
    }
    body { background: url(path/to/image.jpg); }
    .linkmain {
    	color: #1E1E1E;
    	text-decoration: underline;
    }
    .linksecondary {
    	color: #666;
    	text-decoration: underline;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    solarSEAL (12-18-2011)

  • #6
    New Coder
    Join Date
    Nov 2011
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Sorry if I wasn't clear, I was actually trying to make a code work to come up with a random background image, which is why I had <body onload = document.body.background = image>. I tried using height: 100% on body in my css, and I realized that the image wasn't displaying because my body tag was only one line tall, and and the divs were just on top. It is working fine now, thanks so much!


  •  

    Posting Permissions

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