www.webdeveloper.com
Results 1 to 4 of 4

Thread: Placing an image between a content-wrapper with bg and a pages elements

  1. #1
    Join Date
    Jan 2010
    Posts
    8

    Placing an image between a content-wrapper with bg and a pages elements

    Right now I have a chalkboard background on my <div class"content"> shell around the sites content and then a drawing in chalk that I want to place above the chalkboard, but make it so that it doesn't sit on any page elements like paragraphs, forms, etc.

    Right now I can play with the z-indexes and either get the chalk image to not show up at all, or show up but be above all the page elements.

    I have tried modifying my reset.css to make all listed elements have a z-index of 5, my .content div have a z-index of 1 and the image have a z-index of 3 but that didn't work. I have also tried applying the background to the body, but the background size makes it stretch to just the visible area of the browser. Once you scroll down there is no background below the fold.


    Here's my code.

    HTML Code:
    <body>
    <div class="content">
    <img src="images/chalkImage.png" id="bg2" alt="">
    <!-- Everything else -->
    Code:
    .content {
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	
    	margin: 0 auto -67px; /* the bottom margin is the negative value of the footer's height */
    	
    	background:url(../images/chalkboard-noborder.jpg);
    	background-repeat:no-repeat;
    	background-size: 100% 100%;
    	background:url(../images/ChalkBoard-BG-repeat-dark.png) repeat\9; /* IE8 and below */
    }
    Code:
    #bg2 { position: absolute; top: 31px; right: 45px; z-index: 1;}

  2. #2
    Join Date
    Mar 2011
    Posts
    1,144
    It would be best if you could post a link to the page you're working on so we could see everything, but I suspect that the key to fixing your problem is to keep in mind that elements set to "position:absolute" are removed from the normal document flow. That means that the adjacent elements are positioned as if the "position:absolute" element didn't exist, so you have to restrict their display to account for the space occupied by the "position:absolute" element. You can restrict the other elements' dimensions with 'width' and/or 'height', or use the 'margin' setting.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jan 2010
    Posts
    8
    I have my page up at http://www.bretonsmartek.com/ggm/SignUp.php

    And this is how I want it to be: http://i.imgur.com/QJNsYXe.jpg?1. In case the below the fold thing wasn't clear I took a screenshot of how it looks with the background applies to just the body: http://i.imgur.com/yC62vQ7.png?1.

  4. #4
    Join Date
    Jan 2010
    Posts
    8
    I wrapped a second div inside the content and applied a background to that which seemed to work.

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