19 {{ upvoteCount | shortNum }}
19 {{ upvoteCount | shortNum }}

CSS Background Color Wont Stretch?

by Hemal Patel
13 replies
  • WEB DESIGN
    • |
Attached is an image example of my situation.

I have a header bar (black bar, 100% width, 40 pixels height), and this blue footer bar that you see in the image (100% width, about 240 pixels high).

Everything looks fine in resolutions 1280x800+ but in the smaller resolutions like the 1024, it shows the cutoff that you can see in the image.

Any help or advice on whats going on maybe and how I can fix it?

PS: The site is not online, so I can't show it, but I can provide any additional information to anyone that can help. Thanks.
#background #color #css #stretch
  • Profile picture of the author Aronya
    For anybody to be able to help you, it would be helpful if you post the code for the page, and probably the CSS.
    {{ DiscussionBoard.errors[2006891].message }}
  • Profile picture of the author Loren Woirhaye
    Wordpress?

    This is a CSS thing. Hire a theme designer to fix it for you. It
    make have to do with "wrappers".

    The effect can be made to work with HTML sites too.
    Signature
    {{ DiscussionBoard.errors[2007031].message }}
    • Profile picture of the author CarloD.
      Don't hire anyone... it's a simple problem.

      Paste your code... otherwise we won't be of any help.

      Carlo
      Signature

      {{ DiscussionBoard.errors[2007070].message }}
  • Profile picture of the author blogginvixen
    Please paste your code here. It could be a problem with the way your divs are setup since I see that you have the width set to 100% which should extend across the page.
    {{ DiscussionBoard.errors[2007484].message }}
    • Profile picture of the author Hemal Patel
      Thanks for the response guys, I consider myself fairly knowledgeable in CSS/HTML, but I get stuck sometimes on little things.

      Code:
      #topmenu {
    min-width: 100%;
    height: 30px;
    background: #131313;
    border-bottom: #000000 thin solid;
    }
    
.topmenubar {
    width: 1136px;
    height: 30px;
    margin: 0 auto;
    }
      Code:
      #footer {
    background: #0a68c8 url(images/footer-bg.jpg) top center repeat;
    border-top: #033f7c thin solid;
    min-width: 100%;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    letter-spacing: normal;
    line-height: 1.4em;    
    }
      The site is 1136px wide, and I was advised by others to do a "min-width: 100%" instead of just "width: 100%".

      Everything works out on browsers that are bigger than the 1136px site, but if someone comes from a 1024x728 resolution, then it gets a cutoff like I showed in the first picture.

      Thanks in advance to everyone that helps!
      {{ DiscussionBoard.errors[2009182].message }}
  • Profile picture of the author BobJutsu
    Need more of the code than that...post the html file, and the css file (not just that little snippit).

    Chances are it is nested within another div that is setting the width.
    {{ DiscussionBoard.errors[2013362].message }}
  • Profile picture of the author Hemal Patel
    The website is actually live now, check it out..

    UniquePiss

    The way to see the errors I mentioned is to hold "ctrl" and press up/down to change screen resolution of browser. When you get to 1024x728, you can see that the bars cut off on the header black bar, and footer blue bar.
    {{ DiscussionBoard.errors[2013384].message }}
  • Profile picture of the author Charleston Bedding
    My website has the same problem. It looks good on a small monitor but on widescreen it duplicates.
    wwwDOTcharlestonbeddingDOTcom
    {{ DiscussionBoard.errors[2564769].message }}
  • Profile picture of the author cmaclean
    My guess is that the footer div is within the container div. The container div is set to a specified width, therefore its child (the footer) can't stretch beyond its borders.

    Just remove the footer div from within the container. You'll then need to make sure the footer is centered on the page:

    #footer {
    width: 100%;
    background: blue;
    margin: 0 auto; /* this will center it */
    }

    UPDATE:

    I just looked at your screenshot again. I would actually use this markup:

    <!-- this goes outside of the container -->
    <div id="footer wrap">
    <div id="footer">
    footer content goes here
    </div><!-- end footer -->
    </div><!-- end footer-wrap -->

    CSS:

    #footer-wrap {
    width: 100%;
    background: blue;
    /* if you're using a background image, center it and use
    the same blue as the background color (behind it) */
    }

    #footer {
    width: 960px; /* use the same width as your container here */
    margin: 0 auto; /* this will center the div */
    }

    This way, the footer-wrap will nicely stretch the entire width of the window and your footer content won't stretch beyond it's container.
    {{ DiscussionBoard.errors[2565078].message }}
  • Profile picture of the author cmaclean
    @Charleston Bedding:

    You have a different issue. You background image just won't look right on larger monitors since your image is much smaller. I would actually use a different color for the table/container area with the content.
    {{ DiscussionBoard.errors[2565104].message }}

Trending Topics