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 to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question "Background" Image is Down and to the Right

    Please help a newbie.
    I used coding I found online to stretch an image across the background. It actually puts an image behind everything and stretches it rather than using the background image. If I can do it another way, I would like to try.

    Based on how it's coded currently, it works fine in the DW browser compatability windows but when I upload the file to the server and go to the url, it's different. On the actual URL, it's padded on the left and top. My logo, which is in the main but not in content, is also out of place compared to the Dreamweaver Browser Checker. The url is www.theopenskyfarm.com (Actually now it's behind the background but I'll try to fix that shortly...)

    Let me know what additional information you need.
    THANK YOU!
    Last edited by opensky; 02-28-2012 at 01:13 PM.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,708
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there opensky,

    and a warm welcome to these forums.

    I am not sure exactly what you want your layout to look like, but this example may help to point you in the right direction...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.theopenskyfarm.com/">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Open Sky Farm</title>
    
    <link rel="stylesheet" type="text/css" href="/">
    
    <style type="text/css">
    html,body  {
        height:100%;
        margin:0;
        background-image:url(images/SkyBackground.jpg);
        background-repeat:no-repeat;
        background-size:100% 100%;
        background-attachment:fixed;
        font-family:'Lucida sans unicode','lucida grande',sans-serif;
        font-size:14px;
        color:#09c;  
     }
    #main{
        width:980px;
        padding-bottom:20px;
        min-height:100%;
        margin:auto;
        background-color:#fff;
        box-shadow:#003 4px 4px 12px,#003 -4px 4px 12px;
     }
    
    #logo {
        display:block;
        width:240px;
        height:172px;
        padding:20px 0 20px 20px;
     }
    #content{
        width:920px;
        padding:10px;
        border-radius:15px;
        margin:auto;
        background-color:#f2ecd7;
        box-shadow:#999 4px 4px 8px;
     }
    h1 {
        margin:0;
        padding:20px 0;
        color:#6b4916;
        font-size:200%;
        font-style:italic;
     }
    #herd {
        display:block;
        width:291px;
        height:205px;
        margin:0 auto 40px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="main">
    
    <img id="logo" src="images/logo1b.png" alt="logo">
    
    <div id="content">
    
    <h1>Open Sky Farm</h1>
    
    <img id="herd" src="images/IMG_3727 copy2.jpg" alt="herd">
    
    <p>
    Welcome to our website! As you can see, Jon and Jamie are trying 
    their hands at website development. As you can also see, it's a 
    good thing they're farmers and not webpage developers... As they 
    figure out how to build a proper website, please see below for 
    the farm contact info.
    </p>
    
    </div><!-- end #content -->
    
    </div><!-- end #main -->
    
    </body>
    </html>
    
    Note that leaving spaces in image names may cause problems in some browsers.
    So use IMG_3727_copy2.jpg instead of IMG_3727 copy2.jpg.

    coothead

  • Users who have thanked coothead for this post:

    opensky (02-29-2012)

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Firstly, I have to agree with coothead, not knowing if the BLUE image is supposed to overlay above the green and occupy 100% of the screen, or if the green is the background with the blue image centered on it, it's difficult to give you the proper answer. However, assuming the blue image is supposed to fill /occupy 100% of the screen.

    You declare the background here:
    Code:
    <div id="bg"><img width="100%" height="100%" alt="" src="images/SkyBackground.jpg"></div>

    Inside your Style.css you have decalred the following CSS rule:
    Code:
    img {
        border: medium none;
        left: 363px;
        margin-bottom: 0;
        margin-left: 110px;
        margin-top: 25px;
        position: static;
        top: 288px;
    }
    because the SkyBackground.jpg is being declared using an image tag then the img class is being applied. Note that the code you have set above states that ANY image not specifically address by another controlling CSS style will have a margin-top of 25px and margin-left of 110px, remove those two lines in the CSS and you should see your SkyBackground move to proper position and occupy the screen.

  • Users who have thanked ARCLite Studio for this post:

    opensky (02-29-2012)

  • #4
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the responses. I checked the img class in my CSS and I have the margins set to 0px. But I looked at the code on the website and saw the same thing you did. Is that a browser compatibility issue? Or whats causing it to change?

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Do either of you do freelance work? I enjoy learning about coding but I don't have the time and I really need to get my website up and running. I can handle most of the content/design aspects; although, I'm open to suggestions on both. I just need help getting the code cleaned up and working properly. Mainly browser compatibility.

  • #6
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    answered via private message


  •  

    Tags for this Thread

    Posting Permissions

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