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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts

    Fill between 2 images with another image?

    Yes, it's me again...lol!

    Ok, I split my header image into 3 sections, thinking it would/could adjust for different screen widths, but I can't make it work.

    I have a small rounded corner image to the far left, another larger piece to the far right [with a transparent section showing a slideshow in the underneath layers], and would like to use a narrow [2x164] image to adjust to screen width and fill the space between the 2 images accordingly...is this doable, or am I overthinking this? The thing that's tripping me up is the z-index as well as I can't get it to repeat correctly...??

    http://www.yenko.net/R4/test.html

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,684
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello chevy_ls_6,
    There is no way to get an image to repeat when you present it in the markup like that. Your fill image needs to run the width (X) of #header and the other images can be placed on top of that.

    background is how you do that.

    Try this -
    Code:
    #header {
    	height: 164px;
    /*weidth: 100%; spleled wrong*/
    margin: 0 0 0 33px;
    	background: url(http://www.yenko.net/R4/fill.png)
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    I kind of figured that, but was hoping I was wrong! I'll lose my rounded [transparent] corner, but oh well...

    Thanks!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,684
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Quote Originally Posted by chevy_ls_6 View Post
    I kind of figured that, but was hoping I was wrong! I'll lose my rounded [transparent] corner, but oh well...

    Thanks!
    Look at what some margin can do for you -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	width: 800px;
    	margin: 0 auto;
    }
    #header {
    	height: 164px;
    	margin: 0 0 0 33px;
        background: url(http://www.yenko.net/R4/fill.png) repeat-x;
    }
    #lCorner {
    	width: 33px;
    	margin: 0 0 0 -33px;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
            	<img src="http://www.yenko.net/R4/header_left.png" alt="" id="lCorner" />
            <!--end header--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Ok, I think I was tidying while you were coding, lol! Any chance you could take another look at my code, and then maybe explain just a touch what's changing? A simple margin change?? Can it be *that* easy, ha!

  • #6
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Code:
    html, body {
    	margin: 40;
        padding: 0;
        font-family: Arial, Helvetica, Verdana, Sans-serif;
        font-size: 12px;
        color: #666666;
        background-image: url('background.png');
    	background-attachment: fixed;
    }
    
    .hidden {
    	display: none;
    }
    
    #page-container {
    	width: 80%;
    	margin: 0 auto;
    	position: relative;
    	background: 0;
    }
    
    #header {
    	height: 164px;
    	margin: 0 0 0 33px;
    	width: 100%;
        background: url('fill.png') repeat-x;
    }
    
    #lCorner {
    	width: 33px;
    	margin: 0 0 0 -33px;
    }
    The attachment shows the 33px header background image repeat "runover" I have to the far right of my header [33px is the width of my rounded corner image, header_left.png] but I can't figure out how to get it back in line with the rest of the elements? Code above, of course...
    Attached Thumbnails Attached Thumbnails Fill between 2 images with another image?-screen_capture_02.jpg  

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,684
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Code:
    #header {
    	height: 164px;
    /*width: 100%;*/
        background: url('fill.png') repeat-x;
    	margin: 0 33px 0 33px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    Code:
    #header {
    	height: 164px;
    /*width: 100%;*/
        background: url('fill.png') repeat-x;
    	margin: 0 33px 0 33px;
    }
    You have *got* to be kidding me?!? DOH!

    As usual, MANY THANKS!


  •  

    Posting Permissions

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