...

View Full Version : Fill between 2 images with another image?



chevy_ls_6
12-14-2010, 08:07 PM
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

Excavator
12-14-2010, 08:14 PM
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 (http://www.w3schools.com/css/css_background.asp) is how you do that.

Try this -

#header {
height: 164px;
/*weidth: 100%; spleled wrong*/
margin: 0 0 0 33px;
background: url(http://www.yenko.net/R4/fill.png)
}

chevy_ls_6
12-14-2010, 08:20 PM
I kind of figured that, but was hoping I was wrong! I'll lose my rounded [transparent] corner, but oh well...

Thanks!

Excavator
12-14-2010, 08:35 PM
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 -
<!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>

chevy_ls_6
12-14-2010, 08:43 PM
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!

chevy_ls_6
12-15-2010, 04:13 PM
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...

Excavator
12-15-2010, 07:33 PM
#header {
height: 164px;
/*width: 100%;*/
background: url('fill.png') repeat-x;
margin: 0 33px 0 33px;
}

chevy_ls_6
12-15-2010, 08:28 PM
#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! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum