Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image background heading issue. Not sure what I'm doing wrong...

    So the idea is, I have three images. I want one image to the left of the text, one image to the right of the text, and one image as a background to the text. I really didn't think this would be that difficult, but I'm having issues. I can't get the text in the right place, and the background image resizes and does... I don't even know what it's doing. Here's what a basically want:



    With the background part resizing to the width of the text.

    Here's what I'm working with:

    Code:
    <div id="header">
    	<img src="http://jfinner1.co.cc/images/scrollleft.gif" />
    	<span class="head">Jessyca's Bio</span>
    	<img src="http://jfinner1.co.cc/images/scrollright.gif" />
    </div>
    and:
    Code:
    		#header{
    			height: 100px;
    			position: absolute;
    			top: 20px;
    			left: 210px;
    			float: right;
    		}
    		#header .head{
    			background: url("http://jfinner1.co.cc/images/scrollbg.gif");
    			height:100px;
    		}
    Can anyone tell me what I'm doing wrong? Am I going about this all the wrong way, or is it just something small that I'm missing?

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Use 2 background images instead of 3 maybe? One long one as the text background that gets revealed more as more text is added. Have it be the left side of the scroll and the long parchment. Then the second background would just be the right side of the scroll.

    HTML
    Code:
    <div class="container">
    		<p>Text Here<span class="endpiece">&nbsp;</span></p>
    </div><!--container-->
    CSS
    Code:
    .container {height:100px; width:auto; display:block; position:relative; background-color:#0C9;}
    .container p {line-height:100px; display:block; float:left; text-align:center; margin:0px; padding:0px 0px 0px 36px; background-color:#F90;}
    .endpiece {height:100px; width:30px; display:block; float:right; background-color:#69F; margin:0px 0px 0px 6px; padding:0px;}
    Of course replace background colors with your images and adjust the sizes accordingly. Put the long center image and the left image together as one image as the BG for .container p and use just the right image as the BG for .endpiece.

    There are so many ways to do this, it kind of depends on how you want to use it. The container div could be anything but you could also use it to center the element or position it to the left or right. If you try to put additional elements in the same container, then you would have to contend with those other elements for positioning and the simple float method I gave could break down (depending on how the additional elements are positioned).
    Last edited by linehand; 11-15-2009 at 07:45 AM.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    #header{
    background:#C9BA8F url(http://jfinner1.co.cc/images/scrollbg.gif);
    }
    Code:
    <div id="header">
    	<img src="http://jfinner1.co.cc/images/scrollleft.gif" class="left"/>
            <img src="http://jfinner1.co.cc/images/scrollright.gif" class="right"/>
    	Text goes here
    </div>
    PS: You'd need to make the edges of the side images opaque
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    It just makes more sense to use background images instead of including 2 images as content. They are after all background images. Granted, the method I gave still added a useless span, but that won't really show up when viewed semantically like images will. I think I prefer my technique because instead of adding multiple images for each heading I could just paste the same span right after the heading text on any given heading. Plus you only need 2 pics instead of 3.

    It would be better to do it purely through CSS and very well you could with after and content but you would run into even more compatibility issues.
    Last edited by linehand; 11-15-2009 at 12:46 PM.


  •  

    Posting Permissions

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