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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post

    Repeated & Non-repeated Background

    I made a design, a rather wierd design. I have a portion of the background on top that doesn't repeat.
    A. It is a fixed image, about 1030x400
    B. Under that, I have another 400x30 pattern that only duplicates horizontally.
    C.Then, under all of this, I have just a normal pattern that duplicates horizontally and vertically.

    It has to be background because on top of it all I'm putting the actual layout.

    Here is a little demo: It has the little letters (A, B, C) To match with the
    http://www.imagemule.com/uploads/bckD8hK.gif

    Can anyone offer any help on how it is done with css??

  • #2
    New Coder
    Join Date
    Jul 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Put each of the rows into a div tag and add the images to the backgound of each of the div tags

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post
    That works, if I only wanted to show the background. How do I put my content table on top of that?

  • #4
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post
    Okay, no response yet. Must mean I am not explaining myself well, or this is impossible.

    Here is a better idea/view: http://www.imagemule.com/uploads/bckThVO.gif

    A: Background Image. No repeat.
    B: Background Image. Repeat X.
    C: Content.

    The B will be a long pattern image. It repeats on the X to make up for the width, but the height will just be the length of the image. It seems easy in theory but it's giving me a headache.

    Please anyone, help!

  • #5
    New Coder
    Join Date
    Jul 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I would create a div tag around all three spaces (A, B & C). Add your background images to A & B. Then create a third div tag for area C (adding another background if needed) and use the position, left and top css properities to move the C area over the two others. I have done this quickly and it works ok in firefox:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<title>Untitled Document</title>
    	<style type="text/css">
    		body {
    			font-size: 100%;
    			font-family: Verdana, Arial, Helvetica, sans-serif;
    		}
    		
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		
    		div#outline {
    			width: 780px;
    			margin-top: 10px;
    			margin-left: auto;
    			margin-right: auto;
    		}
    		
    		div#a {
    			background-color: #000066;
    			height: 100px;
    		}
    		
    		div#b {
    			background-color: #3366CC;
    			height: 350px;
    		}
    		
    		div#c {
    			background-color: #666;
    			color: #fff;
    			font-size: 0.8em;
    			height: 300px;
    			width: 500px;
    			position: relative;
    			top: -400px;
    			margin-left: auto;
    			margin-right: auto;
    			padding: 10px;
    		}
    	</style>
    </head>
    
    <body>
    <div id="outline">
    	<div id="a"></div>
    	<div id="b"></div>
    	<div id="c">This is the content div tag</div>
    </div>
    </body>
    </html>

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I think there are a few easier ways (bg image on the body, one in a wrapper, one for the content), but without seeing the actual images it's hard to say.

    Truthfully, I don't think you've thought this out enough—what happens when the browser window is wider than image A? Or taller than image B? If the images have set widths and heights then there's no reason to add all the other containers and bg images.

    The thing that's always helped me when designing a tricky background layout is to try and think about the behavior of the design rather than the layout. The layout always seems to take care of itself at that point.

    With that in mind, do you have a screenshot of the design you are going for? Maybe at different sizes (i.e., maximised, 800x600, etc)?

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Just nest three elements and set their background images in the order C, A, and B. Example:

    Code:
    CSS:
    html {min-height: 100%; background: url("c.png") 0 430px;}
    body {min-height: 100%; background: url("a.png") no-repeat;}
    #container {height: 100%; background: url("b.png") 0 400px repeat-x;}
    
    HTML:
    <html>
      […]
      <body>
        <div id="container"></div>
      </body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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