Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member BallardStudio's Avatar
    Join Date
    Jul 2011
    Posts
    143
    Member #
    28552
    Liked
    6 times
    I created a page in Photoshop and am now transferring it into Dreamweaver. The problem I'm having is the background image must be set with a 400px top margin. With this margin set, it also displaces the side bar (on the left of the page). If the image isn't set with the margin, it gets cut off by the top of the browser window.

    I should also mention, the CSS for the background image will not work if the CSS is attached. The CSS must be within the HTML document.

    Any suggestions on how to fix this issue? It's greatly appreciated.


    HTML

    <!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>War And Peace Pages</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" type="text/css" href="css/wp.css">
    <style type="text/css">
    body {
    background-image: url(images/backimg.jpg);
    margin-top: 400px;
    background-repeat: no-repeat;
    background-position: center;
    }
    </style>
    </head>
    <body>
    <div class="wrapper">
    <!-- Save for Web Slices (War And Peace Pages.psd) -->
    <table id="Table_01" width="1000" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="8">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3" rowspan="6">
    <img id="War_And_Peace_Pages_02" src="./images/War-And-Peace-Pages_02.jpg" width="51" height="216" alt="" /></td>
    <td colspan="3">
    <a href="http://warandpeaceentertainment.com">
    <img id="War_And_Peace_Pages_03" src="images/warpeacelogo.png" width="184" height="108" border="0" alt="Home" /></a></td>
    <td colspan="2" rowspan="2">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3">
    <img id="War_And_Peace_Pages_05" src="./images/War-And-Peace-Pages_05.jpg" width="184" height="36" alt="" /></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="2">
    <img id="War_And_Peace_Pages_06" src="./images/War-And-Peace-Pages_06.jpg" width="3" height="36" alt="" /></td>
    <td colspan="2">
    <a href="http://warandpeaceentertainment.com/music">
    <img id="wpmusic.png" src="images/wpmusic.png" width="183" height="20" border="0" alt="War And Peace Entertainment Music" /></a></td>
    <td rowspan="8">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2">
    <img id="War_And_Peace_Pages_09" src="./images/War-And-Peace-Pages_09.jpg" width="183" height="16" alt="" /></td>
    </tr>
    <tr>
    <td rowspan="2">
    <img id="War_And_Peace_Pages_10" src="./images/War-And-Peace-Pages_10.jpg" width="1" height="36" alt="" /></td>
    <td colspan="3">
    <a href="http://warandpeaceentertainment.com/info">
    <img id="War_And_Peace_Pages_11" src="images/wpinfo.png" width="185" height="21" border="0" alt="War And Peace Entertainment Info" /></a></td>
    </tr>
    <tr>
    <td colspan="3">
    <img id="War_And_Peace_Pages_12" src="./images/War-And-Peace-Pages_12.jpg" width="185" height="15" alt="" /></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="2">
    <img id="War_And_Peace_Pages_13" src="./images/War-And-Peace-Pages_13.jpg" width="49" height="36" alt="" /></td>
    <td colspan="5">
    <a href="http://warandpeaceentertainment.com/photos">
    <img id="War_And_Peace_Pages_14" src="images/wpphoto.png" width="188" height="20" border="0" alt="War And Peace Entertainment Photos" /></a></td>
    </tr>
    <tr>
    <td colspan="5">
    <img id="War_And_Peace_Pages_15" src="./images/War-And-Peace-Pages_15.jpg" width="188" height="16" alt="" /></td>
    </tr>
    <tr>
    <td rowspan="2">&nbsp;</td>
    <td colspan="6">
    <a href="http://warandpeaceentertainment.com/contact">
    <img id="War_And_Peace_Pages_17" src="images/wpcontact.png" width="191" height="20" border="0" alt="War And Peace Entertainment/contact" /></a></td>
    </tr>
    <tr>
    <td colspan="6">&nbsp;</td>
    </tr>
    <tr>
    <td>
    <img src="images/spacer.gif" width="46" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="3" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="2" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="2" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="181" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="2" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="763" height="1" alt="" /></td>
    </tr>
    </table>
    <!-- End Save for Web Slices -->
    </div>
    </body>
    </html>

    CSS

    .wrapper {
    width: 1000px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    }
    I'm an art director crossing paths between print and web design.
    http://www.ballardstudio.com

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    If you're attaching your CSS file and the CSS file is in a subdirectory, this is the syntax you want:
    Code:
    background-image: url(../images/backimg.jpg);
    This allows the CSS file to go up one directory, then back down into the images directory.

    As far as your particular situation is concerned, if you keep the CSS inline this is the correct syntax:
    Code:
    background:  URL(images/backimg.jpg) center 400px no-repeat;
    The "center" centers the background horizontally and the "400px" moves it down 400 pixels.
    BallardStudio likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member BallardStudio's Avatar
    Join Date
    Jul 2011
    Posts
    143
    Member #
    28552
    Liked
    6 times
    This worked out GREAT Game! Because Firefox and Safari reads the CSS differently, I used the CSS below.

    body {
    background-image: url(../images/backimg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-position:top;
    background-position: 0px 0px 0px 0px;
    }

    I'm getting back into web design after a several year hiatus. Thanks for the help.
    I'm an art director crossing paths between print and web design.
    http://www.ballardstudio.com

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    No problem, dude. Glad it worked for you.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:34 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com