Custom Background for Header Elements in Section Page

[etidd]

Okay, I changed it up to three images: h1bgbody.gifh1bgend.gifh1bgstart.gif

They're still spaced out incorrectly, and I've tried to reset the padding and margin to 0 to correct this display issue. The h1 body is taking up nearly the whole 700px of the layout.

Though I now see the images on the screen now with this code:

h1{text-align:left; margin:0; font-size:20px; background:url("h1bgbody.gif") repeat-x scroll 50% 10px transparent; width:auto; background-position:29px 0; height:31px; text-shadow:1px 1px 1px #C93; letter-spacing:1px;}
h1:after{
	background:url("h1bgend.gif") no-repeat 100% 0;
	height:30px;
	right:-26px;
	position:absolute;
	top:0;
	width:26px;
	content:" ";
	z-index:99;
	margin:0;
}
h1:before{
	background:url("h1bgstart.gif") no-repeat 0 0;
	content:" ";
	height:30px;
	left:-26px;
	position:absolute;
	top:0;
	width:26px;
	z-index:99;
	margin:0;
}
h1{position:relative; margin:0 20px; padding:0;}

You can see what's going on

[Paul O'B]

The cloud images aren't loading and I get a warning from mcaffee that it's a dodgy site!

You'll have to make a drawing of what you want it to look like as all the code I have given you so far will produce a working version of something or other but you seemed to keep changing your mind and messing the code up on the way

I thought you wanted a full width header with a repeating cloud image and then capped either end with a start and finish image for the cloud. If you are not going to use sprites for this then you may as well use one long image rather than the three small images which will probably incur more overheads than a single whole image.

[etidd]

Well, I did change my mind there a couple of times by going to 1 full image. I really tried to copy your code correctly, but I guess I did mess something up there. The things I added were the text-shadow that I still want in the header (and nowhere else on the page).

Mcafee alerted you? That's got to be totally bogus...

Here's a picture with the idea with everything that was the original plan (3 images w/ 1 repeating body image)
Untitled-1.gif

[Paul O'B]

Your images are still not loading apart form the right hand image. The urls are incorrect or the image have not been uploaded where you think.

If you want a shrink to fit then the code we have given will do that but you will need to float the h1 so that it isn't full width. The repeat won't match up exactly of course but shouldn't really notice with that design.

I would have used one image longer than you will ever want and then just manipulate the background position to show each part as required.

I'm not sure where you are having problems now as I think we have covered all bases.

[etidd]

Okay,

I saw that one or two of the cloud image pieces were not uploaded to my domain. I corrected that. I also saw how the before and after pieces were positioned absolutely. I added the float to the h1 and adjusted the positioning on the before and after to achieve the desired effect. Hopefully you'll be able to see it soon as I have uploaded all my files.

It came together with this, the code I was given here before I changed my mind 6 times:

h1{float:left; text-align:left; margin:0; font-size:20px; background:url("h1bgbody.gif") repeat-x scroll 50% 10px transparent; width:auto; background-position:29px 0; height:31px; text-shadow:1px 1px 1px #C93; letter-spacing:1px;}
h1:after{
	background:url("h1bgend.gif") no-repeat 100% 0;
	height:30px;
	right:-20px;
	position:absolute;
	top:0;
	width:26px;
	content:" ";
	z-index:99;
	margin:0;
}
h1:before{
	background:url("h1bgstart.gif") no-repeat 0 0;
	content:" ";
	height:30px;
	left:-15px;
	position:absolute;
	top:0;
	width:26px;
	z-index:99;
	margin:0;
}
h1{position:relative; margin:0 20px; padding:2px 3px 0 3px;}

I still have a couple of questions:
1) I put the background-position property in red. Why is it in this code and why do I need it?

2) I want to position this cloud design.. Do I do it using a wrapping div or do I just move it using absolute positioning, or margin/padding?

[Paul O'B]

You don't need the background position offset any more because you have changed to a repeating image and the positioning is different. Just set it to 0 0.

Previously you were using a different image I believe (I forget now) and the 29px offset would have made the image start 29px to the right to allow room for the end image.

You can move the whole thing with margins now as you no longer need the offset that was in place for the previous versions.

h1 {
    margin: 0 0 0 300px;
    padding: 2px 3px 0;
    position: relative;
}

[etidd]

AwEsOmE!!

Now, I want to learn how to do this on the h2 elements throughout this page the other way using this 1-piece image that is 200px wide and 25px tall: h2bg.gif

Here is the code I have now that demonstrates the solution to the 3-piece repeating graphics and what I tried on the h2 elements:

h1{float:left; text-align:left; margin:0; font-size:20px; background:url("h1bgbody.gif") repeat-x scroll 50% 10px transparent; width:auto; background-position:0 0; height:31px; text-shadow:1px 1px 1px #C93; letter-spacing:1px;}
h1:after{
	background:url("h1bgend.gif") no-repeat 100% 0;
	height:30px;
	right:-20px;
	position:absolute;
	top:0;
	width:26px;
	content:" ";
	z-index:99;
	margin:0;
}
h1:before{
	background:url("h1bgstart.gif") no-repeat 0 0;
	content:" ";
	height:30px;
	left:-15px;
	position:absolute;
	top:0;
	width:26px;
	z-index:99;
	margin:0;
}
h1{position:relative; margin:9px 0 0 150px; padding:2px 3px 0 3px;}

...

h2:before{
	background:url("h2bg.gif") no-repeat 0 0;
	background-position:0 0;
	content:" ";
	height:30px;
	width:20px;	
}
h2{background:url("h2bg.gif") no-repeat 0 0; background-position:20px 0; font-size:16px; font-style:italic; font-weight:bold; text-align:left; margin-left:15px; width:auto; height:30px;}
h2:after{
	background:url("h2bg.gif") no-repeat 0 0;
	background-position:180px 0;
	content:" ";
	height:30px;
	width:20px;
}

It's pretty off center and such, and it displays the full 200px (I'd like to have it hug closely around the length of the h2 element.

Updated health page

[Paul O'B]

AwEsOmE!!

Now, I want to learn how to do this on the h2 elements throughout this page the other way using this 1-piece image that is 200px wide and 25px tall: h2bg.gif

Your page link isn't loading but was it an example of the above or just an example of the previous method?

Anyway with the graphic you posted above you won;t be able to make a full width repeating inage because your image is only 200px wide. You can use it on text up to 200px wide but to make a repeating middle section the ends should be moved below the repeating section so that a sprite is created and you can then repeat the middle section without the ends appearing.

I'm not sure if this is what you were asking but we went through this already I believe and there is already code in one of these posts to more or less do that anyway.

[etidd]

Okay, thanks for all your help, Paul. Case closed.

[etidd]

Now, on this page, I want to utilize the same technique over the bottom link which is an h2 element; however, the body is repeating all the way across the container. The current styles I have been utilizing for this is as follows:

h2:before{
	background:url("h2bgstart.gif") no-repeat 0 0;
	content:" ";
	height:25px;
	left:-14px;
	position:absolute;
	top:0;
	width:26px;
	z-index:99;
}
h2{font-size:30px; font-style:italic; font-weight:bold; text-align:center; width:auto; height:25px; background:url("h2bgbody.gif") repeat-x scroll 0 0 transparent;}
h2:after{
	background:url("h2bgend.gif") no-repeat 100% 0;
	height:30px;
	right:-14px;
	position:absolute;
	top:0;
	width:26px;
	content:" ";
	z-index:99;
}
h2{position:relative; margin:10px 0 10px 0; padding:4px 1px 0 1px;}

I want to have it nicely snug like it appears at the top, h1, element. Thanks for your help.

[ralph.m]

Just do what you did on the h1, which includes float: left;

[etidd]

Thank you, Ralph! Why does it have to be floated left?

[ralph.m]

Thank you, Ralph! Why does it have to be floated left?

Headings are block level elements, so will stretch across the whole width of the container unless you do something like floating them (as this "shrink wraps" the element).

Another option would be display: inline-block; but you might as well do what you did for the h1.