www.webdeveloper.com
Results 1 to 7 of 7

Thread: Div background problem

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Location
    Finland
    Posts
    6

    Lightbulb Div background problem

    So basically, I have div called #maincontent. My simple question is, is it possible to make div background-color fill more area than the div itself?
    More simply it needs to be like this.. http://imageftw.com/uploads/20130219/73nimet%C3%B6n.png

    If this is not possible I will think of something else..

    I already tried to make a larger div behind this one, called #maincontent_wrap. It is about same size as the red area in that image above. But here the problem is, it scrolls the page as long as the background is, I want it to scroll only as long as the text content appears, so that's why I wanted the background to the #maincontent div instead..

    I hope you get my point, any help is appreciated!


  2. #2
    Join Date
    Dec 2012
    Posts
    81
    You need to set your body to the correct background color, not just your main content.

    Here's an example...

    Code:
    body { background: #color;}
    Make sense?

  3. #3
    Join Date
    Feb 2013
    Location
    Finland
    Posts
    6
    You got it wrong, I already have a background for body.

    This is what I mean
    http://imageftw.com/uploads/20130219/9nimetön.png.
    The brown area is the place for background, i am able to add it with absolute positioning, but then the text in #maincontent goes behind the background. Also now im not able to make the background go along with text content.. if i make the bg too big it scrolls too much, not caring about how much text there is, or if too much text, then the bg ends too soon.
    I would like it to be when you zoom page out, it looks like this:
    http://imageftw.com/uploads/20130219/5nimetön.png
    But then again, it makes me scroll all the way down until bg ends..

  4. #4
    Join Date
    Dec 2012
    Posts
    81
    Can you provide a live link to your site? It's much easier if I can see your style sheet.

    From the looks of it though, and what you're trying to accomplish, it sounds like you don't have everything inside a container <div>.

    Do you have a container class already set up?

    If you're worried about showing off content, replace with place holders and load onto a directory so we can view what you're viewing. It'll make this process much easier.
    Last edited by jlnewnam; 02-19-2013 at 02:39 PM.

  5. #5
    Join Date
    Feb 2013
    Location
    Finland
    Posts
    6
    I can't provide any link to the site yet, but I hope images are enough..
    http://imageftw.com/uploads/20130219/07nimetön.png

    and here with zoom out: (also don't know why that "about" nav link drops like that when zoom out)
    http://imageftw.com/uploads/20130219/6nimetön.png

    Here is HTML and CSS for these divs:


    HTML Code:
    <div id="maincontent_wrap" align="center">    
    </div><!--END maincontent_wrap-->        
    <div id="maincontent">            
         <div class="heading"><h1>Heading</h1></div>            
         <div class="textcontent"><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p></div>   
    </div><!--END maincontent-->
    Code:
    body {
        background-image: url(images/green1.png);
        background-attachment: fixed;
        background-repeat:repeat;
        height:100%;
        z-index:0;
    }
    #wrapper { 
        height: 100%;
        width: 700px;
        margin-right: auto;
        margin-left: auto;
    }
    #maincontent_wrap {
        height: 10000px;
        width: 700px;
        position:absolute;
        margin-left:auto;
        margin-right:auto;
        background-color:rgba(82,160,50,0.7);
        z-index:20;
        pointer-events:none;
    }
    #maincontent {
        height:100%;
        width:600px;
        margin-left:auto;
        margin-right:auto;
        z-index:10;
        padding-bottom: 50px;
    }
    h1 {
        color: #111;
        text-transform: none;
        font-variant: small-caps;
        font-weight: 900;
        font-size: 36px;
        position:static;
    }
    .textcontent {
        position: static;
        overflow:none;
    }
    #wrapper is around all content on page, and set 10000px for bg height as an example of my scrolling problem.

  6. #6
    Join Date
    Dec 2012
    Posts
    81
    One thing to remember is that height will always set itself automatically. You don't even need to put the 'height: auto;' in there...

    I've made some touch ups to your CSS. Let me know if this works for you...

    It's also a good idea to keep your style sheet outside your individual html pages. As you can see here, I’ve generated your html/css based on an external stylesheet called style.css.

    It works for me when I load it… let me know if you have questions.


    Here's your HTML...
    Code:
    <html>
    <body>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <div id="maincontent_wrap" align="center">    
    </div><!--END maincontent_wrap-->        
    <div id="maincontent">            
         <div class="heading"><h1>Heading</h1></div>            
         <div class="textcontent"><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p></div>   
    </div><!--END maincontent-->
     
    </body>
    </html>
    Here's your CSS...
    Code:
    body {
        background-image:url("images/green.png");	
        background-attachment: fixed;
        background-repeat:repeat;
        z-index:0;
    }
    #wrapper { 
        width: 700px;
        margin-right: auto;
        margin-left: auto;
    }
    #maincontent_wrap {
        width: 700px;
        position:absolute;
        margin-left:auto;
        margin-right:auto;
        background-color:rgba(82,160,50,0.7);
        z-index:20;
        pointer-events:none;
    }
    #maincontent {
        height:100%;
        width:600px;
        margin-left:auto;
        margin-right:auto;
        z-index:10;
        padding-bottom: 50px;
    }
    h1 {
        color: #111;
        text-transform: none;
        font-variant: small-caps;
        font-weight: 900;
        font-size: 36px;
        position:static;
    }
    .textcontent {
        position: static;
        overflow:none;
    }

  7. #7
    Join Date
    Feb 2013
    Location
    Finland
    Posts
    6
    I copied your CSS, it makes the #maincontent_wrap height 0px if it is not set, because there is no any content inside it..
    So I moved this around the #maincontent again, to see if it works. Well, this way has been the closest to what I want so far, but when the text content is really small, it makes to background go like this:

    http://imageftw.com/uploads/20130220/nimet%C3%B6n.png

    Just figured out that I can add min-height:470px to make the background work.
    Now it is like I want it to be, except when I zoom out, it's not the 100% height of page..
    Can't find any way how to do this..
    Is it possible if I add another div called ex. #maincontent_wrap2 and that continues the background under the first one, but without the scroll bar appearing in the side of the window?
    Or is there an easier way?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles