#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0

    Question Div Overflow vs Not Expanding


    I'm developing a new website for my employer, and the design that I have gone with implements a "header" Div, and then below that header, I want my background image to begin, as it is a tiled image and doesn't look good if it is just placed in the background via the body.

    I decided to go with a div named .background, which is acting like a container (but I have a separate .container div within this div for my JS). The image is 648px x 648px, and I need it to repeat to fill any screen, but not overflow any screen. I utilized "overflow: hidden" in the body, but that causes my internal "container" div to be limited in size. Then, through trial and error, I made my "container" div extra tall by inputting a lot of nonsense, removed the overflow: hidden, and I found that my .background was not repeating vertically! I also tried "overflow: hidden" in the .background div, but it did absolutely nothing.

    Here is the CSS and HTML, please help!!!

    CSS:

    @charset "utf-8";
    /* CSS Document */


    body {
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    margin: 0 auto;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow: auto;


    }

    .header {
    width: 100%;
    height: 150px;
    background-color: #FFFFFF;
    background-image: url(graphics/background1x155.png);
    background-repeat: repeat-x;
    }

    .logo {
    width: 690px;
    height: 100px;
    padding-left: 10px;

    }

    .buttontable {
    margin: 0 auto;
    width: 980px;
    table-layout: fixed;

    }

    .buttontable tr {
    width: auto;
    height: 50px;

    }

    .buttontable td {
    width: auto;
    height: auto;
    text-align: justify;
    vertical-align: top;
    padding-top: 5px;
    font: 14px arial, sans-serif;
    font-weight: bold;
    color: #00457c;

    }

    .buttontable td:hover {
    width: auto;
    height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: justify;
    vertical-align: top;
    font: 14px arial,sans-serif;
    font-weight: bold;
    color: #00457c;
    background-image: url(graphics/buttonhover1.png);
    background-repeat: repeat-x;

    }

    .divider {
    width: 100%;
    height: 2px;
    background-image: url(graphics/divider1x2.png);
    background-repeat:repeat-x;

    }

    .background {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: block;
    background-image: url(graphics/background648x648.png);
    background-position: top;
    background-repeat: repeat;
    position: absolute;
    z-index: 2;


    }

    .container {
    width: 980px;
    height: auto;
    margin: 0 auto;
    margin-top: 10px;
    background-color: #FFFFFF;
    border-radius: 5px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    z-index: 1;


    }

    HTML:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">

    <title>New Website</title>

    <link href="style.css" rel="stylesheet" type="text/css">

    </head>

    <body>

    <div class="header"><img class="logo" src="graphics/header.png" />

    <table class="buttontable" cellspacing="0">
    <tr>
    <td>Link 1</td>
    <td>Link 2</td>
    <td>Link 3</td>
    <td>Link 4</td>
    <td>Link 5</td>
    <td>Link 6</td>
    </tr>
    </table>

    </div>

    <div class="divider"></div>

    <div class="background">

    <div class="container">

    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>

    </div>

    </div>

    </body>

    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Dec 2004
    Posts
    3,008
    Rep Power
    376
    can you give me a link to the page as i dont have your graphics?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0
    Originally Posted by paulh1983
    can you give me a link to the page as i dont have your graphics?
    I would, but my employer hasn't even given me the go ahead to get a URL for the site. As of right now it is all just testing in the browsers. However, here are the image sizes at 72 ppi:

    .header background: 1px x 155px

    header: 690px x 100px

    buttonhover1: 1px x 50px

    divider: 1px x 2 px

    background: 648px x 648px.

    The background image size may be subject to change, but it shouldn't matter. The CSS should be for a DIV with a background image, that doesn't overflow the screen in the sense where it causes me to scroll, but still repeats in both x and y directions, especially as the site grows in height due to content in the container div.

    Thank you for your interest in helping me!
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0

    Smile


    I fixed my own problem. I figured out a way to have the background image start after the header without using a DIV (and instead putting the background image in the body). My body CSS is as follows. The key is to my background position underlined below:

    body {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    margin: 0 auto;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url(graphics/background648x648.png);
    background-position: center 112px;
    background-repeat: repeat;

    }

    Thanks for the attempt to help me! Sadly, I'm sitting here at work being brilliant, and nobody is standing around looking impressed...

IMN logo majestic logo threadwatch logo seochat tools logo