Custom Background for Header Elements in Section Page

[etidd]

Hello everyone,

I was thinking about the possibility of using a repeating graphics model for the background of my h1, h2 elements at this page: http://atlantareviewgroup.com/health.html. I want to do something like this: a beginning graphic like this: idea.png then for the actual background property for the h1, h2, I can specify it as this graphic that will repeat well: idea2.png. For the end to it, I can just flip the start image horizontally using CSS.

The question is: How do I get the end and start put in there? All I know to do now is get the background as the middle repeating graphic.

Let me know what you think about this idea. Maybe it's too complex and impractical.

[titan21]

Hopefully I'm understanding what u need - have u looked at the css psuedo classes :before and :after. http://www.quirksmode.org/css/beforeafter.html

[Paul O'B]

It depends on what browsers support you want?

You could use :before and :after to place the start and finish images as mentioned above (but support is only ie8+) and then repeat the middle graphic on the h1.

On another matter you are showing a gap under the heading due to margins pushing the elements away so add this to fix it.

#sectionbody {
   padding: 1px 0;
}

Referring to a previous question you asked you can hide the top border that runs through the h1 by adding the same background image to it that you are using underneath and then match them up.

e.g.

h1{background:url(http://atlantareviewgroup.com/style/sectionbody.gif) no-repeat -103px 0;
float:left;
padding:0 10px;
margin:10px 0 0 100px;
}

[etidd]

Okay, for the h1 element at the top, here is what I have attempted to do. It doesn't work. You can see what it comes out to look like at http://www.atlantareviewgroup.com/health.html

styles:

h1:before{background:url("sectionheaderstart.gif"); width:16px; height:30px;}
h1{text-align:left; padding:12px 0 0 100px; font-size:20px; background:url("sectionheaderbody.gif"); height:30px; width:100px;}
h1:after{-webkit-transform: matrix(-1, 0, 0, 1, 0, 0); background:url("sectionheaderstart.gif"); width:16px; height:30px;}

[ralph.m]

The background image can't be found, so it's either in the wrong place or not uploaded yet. The stylesheet is looking for the image in the same folder as itself.

[etidd]

Yes, you're right. I got it up there now, so you can see its current incorrect display.

[ralph.m]

I've lost track of how you want it to display. You probably want pos absolute on the before and after content, and no-repeat perhaps. But not sure what you are shooting for here. Could you post a screen shot of what it should look like?

[etidd]

I want it to look like a fluffy cloud.

But anyways, it starts and ends with this (I flip it horizontally for the ending): sectionheaderstart.gif
This will be the "body", or the background for the h1 element: sectionheaderbody.gif
they have different fill colors. I'll fix that right up.

I haven't seen if these will connect nicely and look like just one image, but I'll make those adjustments once the before and after images make their appearance.

It looks like the h1 element's default height exceeds the height of these images (30px). I also have a width put on the h1 element.. which will make it useless to re-use this on the different section pages with different lengths of header text (health is the header text on this first page, but it will need to automatically fit the length of the header text. Insurance page is next- which insurance will be the header text there.) Maybe using a block-level element here is a bad choice, since it occupies the whole line, but it seemed appropriate that these section pages have an h1.

I thought not only would it be a nice touch to have a custom background behind the header elements on these pages, but doing it this way will allow me to re-use these images everywhere on these section pages without making five million cloud images to contain their respective text.

Hopefully this gives you a better idea of what I'm aiming for.

[etidd]

I put Abs. positioning on the before and after. It's still not working. repeat-x on the h1 image solved the over-repeating of the cloud body image (it was repeating vertically, too.)

Updated the files just now.
health page

[TechnoBear]

Off Topic:
Please could I suggest you rethink the use of both a shadow on the text and a patterned background? The combination of the two is making it impossible for me to read your text. I think you'll find it causes problems for quite a number of people with various visual or perceptual difficulties. I know you weren't asking for opinions on your design, but you're putting so much effort into the site, it would be a shame if your visitors couldn't actually read it.

[Paul O'B]

Hi,

You haven't added the content property as it works hand in hand with the @before amd :after pseudo elements to provide the generated content.

You also dont seem to have the right hand image available.

#sectionheader h1{position:relative}


h1:before,
h1:after {
    content:"  ";
    background: url("http://www.atlantareviewgroup.com/style/sectionheaderstart.gif") no-repeat 0 0;/* left image */
    height: 30px;
    position: absolute;
    width: 16px;
left:-16px;;
top:11px;
}


h1:after {  /* this should be the link to the right-hand image */
    background: url("http://www.atlantareviewgroup.com/style/sectionheaderstart.gif") no-repeat 0 0;
right:-16px;
left:auto;
}

Good points TechnoBear

[Victorinox]

Off Topic:
Please could I suggest you rethink the use of both a shadow on the text and a patterned background? The combination of the two is making it impossible for me to read your text. I think you'll find it causes problems for quite a number of people with various visual or perceptual difficulties. I know you weren't asking for opinions on your design, but you're putting so much effort into the site, it would be a shame if your visitors couldn't actually read it.

Seconded. The sharp geometric backgrounds are very distracting and the shadow makes the text look out of focus. I have good vision but it's so hard on the eye that it feels uncomfortable to view.

[etidd]

I think your post is relevant, TechnoBear. I want as many visitors as possible to be able to read my content.

[etidd]

Is it just the header element I'm working on here, or are you totally against text shadows?

[TechnoBear]

Is it just the header element I'm working on here, or are you totally against text shadows?

The header is much less of a problem - the text is larger, the blue background is pretty plain, and there's only one word, so I can cope with the shadow OK.

The main body of your text is where I have the problem, with rows of shadowed text against the diagonal lines of the background. I'm not against text shadows in themselves, but I'd suggest they're best used sparingly - in headings or similar. I think you'll also find quite a lot of people have problems with body text over a patterned background.

Seconded. The sharp geometric backgrounds are very distracting...

I also find the number of different geometric patterns you're using here distracting and confusing. I thought that might just be a peculiarity of mine, but it seems I'm not alone.

[Victorinox]

Text shadow is not a good choice for long sections of text as the differences between the contrast and brightness of the user's display can cause the effect to render the text hard to read or illegible. On headings, having a larger font size, this tends not to be as much of a problem.

Sites that do use shadow on non-heading text tend to do so with subtlety, with just a pixel distance. It can work well when a light shadow colour is used to help dark text stand out against a medium to light background or gradient, but I'd still be cautious about using it for large runs of text.

Text set on anything other than a plain background also risks illegibility. If a background image is used it should be subtle in colour and shape. Geometric patterns such as diagonal lines cause one's focus to run away from the text.

When targeting a general audience, which I'd guess your site is, it's best to take a restrained approach to ornamentation. Tastes vary, so seek to avoid offending the viewers sensibilities. Express the character of the site in the colour scheme, typography and logo. Avoid "in your face" backgrounds. Consider popular sites on the 'net: Google, eBay, Amazon, Facebook etc. Do any of these use bold patterned backgrounds or shadowed text? They are successful because they provide a useful service, which is far more important than prettiness.

[etidd]

Yes, you guys are both exactly right. I'm a young 23, and I don't have trouble reading it, but I also wrote the words. I'll get this changed up so people won't have to boggle their eyes out to read my content.

I'm also going to get rid of the pattern on the cloud, but I still think this background idea is totally rockin', especially without using three floated divs.
------------
Back to the CSS:
Paul O'B, I have one start/end image. I flip the image horizontally on the :after element.

[Paul O'B]

Yes,
Back to the CSS:
Paul O'B, I have one start/end image. I flip the image horizontally on the :after element.

You can't do that with css (unless you are talking about css3 transformations).

This is your image and its just the left hand side. You can't turn it round with css2. What you can do is make it a whole image with the left and right sides all in one image (twice as wide as it is now) and then just show each half using the background position property and keeping the element to the same width it is now so that only half the image shows when needed.

[etidd]

well, here's the cloud image: cloud1.gif

Here's the attempt:

h1:before{content:inherit; background:url("cloud1.gif"); width:26px; height:30px; position:absolute;}
h1{text-align:left; padding:12px 0 0 100px; font-size:20px; background:url("cloud1.gif") repeat-x scroll 50% 10px transparent; width:100px; background-position:26px 0; height:30px; width:auto; text-shadow:1px 1px 1px #C93; letter-spacing:1px;}
h1:after{content:inherit; background:url("cloud1.gif"); width:26px; height:30px; position:absolute;}

I have not achieved the desired effect, as you can see

health page

[etidd]

Update:

h1:before{content:no-open-quote; background:url("cloud1.gif"); width:26px; height:30px; position:absolute;}
h1{text-align:left; padding:12px 0 0 100px; font-size:20px; background:url("cloud1.gif") repeat-x scroll 50% 10px transparent; width:100px; background-position:26px 0; height:30px; width:auto; text-shadow:1px 1px 1px #C93; letter-spacing:1px;}
h1:after{content:no-open-quote; background:url("cloud1.gif") no-repeat; width:26px; height:30px; position:absolute; background-position:274px 0;}

[Paul O'B]

Hi,

I gave you most of the code above but you didn't copy it correctly.

Replace your before and after rules with this:

h1:after {
	background: url("http://www.atlantareviewgroup.com/style/cloud1.gif") no-repeat 100% 0;
	height: 30px;
	right: -26px;
	position: absolute;
	top: 0;
	width: 26px;
	content:" ";
z-index:99;
}
h1:before {
	background: url("http://www.atlantareviewgroup.com/style/cloud1.gif") no-repeat 0 0;
	content:" ";
	height: 30px;
	left: -26px;
	position: absolute;
	top: 0;
	width: 26px;
z-index:99;
}
h1 { position:relative;margin:0 20px;padding-top:0 }

[/code]

[etidd]

Okay. I uploaded the files again. It's still not working right.

h1:after{
	background:url("cloud1.gif") no-repeat 100% 0;
	height:30px;
	right:-26px;
	position:absolute;
	top: 0;
	width:26px;
	content:" ";
	z-index:99;
}
h1:before{
	background: url("cloud1.gif") no-repeat 0 0;
	content:" ";
	height:30px;
	left:-26px;
	position:absolute;
	top:0;
	width:26px;
	z-index:99;
}
h1{position:relative; margin:0 20px; padding-top:0; font-size:24px; letter-spacing:1px; text-shadow:1px 1px 1px #F90;}

[Paul O'B]

You removed the image from the h1?

Only the before and after rules were replacements. The h1 rule was an addition

[etidd]

I'm having to set a width to achieve the effect, though the beginning side is being repeated on the far left side.

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

Updated the files yet again

[Paul O'B]

You lost me there now.

The image needs to be wider than the space available otherwise it will of course repeat because the image is only 300px wide and the layout is about 700px width.

You should have used three images as I said above with one for the left and one for the right and then a repeating section without ends on it. You still could have used one image as a sprite anyway.

You seem to never quite utilise the code I give you properly and change other things at the same time. The background position on your h1 is wrong anyway as it should be a negative number if you are trying to hide the start.

h1 {  background: url("cloud1.gif") repeat-x -29px 0}

If you are setting a width then there's no point in doing any of the above as you could just paste the whole image as it is. the only reason to cap the ends is if you are having a repeating section.