Placing a graphic using CSS...may have gotten myself in trouble

HTML & CSS
1

I am working on a site for a friend’s mother and did a mockup for her in PS CS5.5. I thought add a touch of feminine to the look but now that I am thinking about slicing it up, I am wondering if I got myself in trouble. My CSS skills are still not up to par with most everyone on this site so that is why I always come here for help.

The “swirl” on the upper left is supposed to show through the header and the upper part of the content area, which has 81% opacity. Where I have it I cannot properly slice (I don’t think). If I have just the swirl and use CSS to exactly place it, will it still show through with the header and upper content area being partially see-through? Or am I going to have to figure something else out?

Any help or advice would be greatly appreciated. Thanks.

2

That’s easy with CSS. The first thing to remember with modern CSS layouts is to drop the word ‘slice’ from your vocabulary. Slicing is from the bad old days to table layouts. The thing to do with an image like that is leave it intact and set it as a background image.

Then you have a few options, but the nicest is to use semi-transparent background colors on the content area with rgba. E.g.

background: rgba(0,0,255,0.2)

The above code sets a blue background on an element set to 20% opacity, so that an image or other object behind it will show through.

The only downside is that older versions of IE don’t support rgba, but there are workarounds if you care about that (though I personally don’t any more).

3

Thanks Ralph. Now when you say “older” versions…how far back? Will 7 be ok because I don’t support for anything older than 7.

4

I’m afraid IE7 doesn’t support rgba, but I think IE8 is OK. There are solutions for IE7, though, or you could just accept a slightly lesser experience in IE7, which is what users of such an old browser deserve anyway.

5

Ralph is right. rgba allowys you to “paint” a solid transparent tints in most modern browsers.

HOWEVER, most browsers that support rgba, also support multiple bg images. Which meas you could just slice to fit and place images as needed inside one or two elements. If you aren’t supporting older browsers, might as well get the full advantage of not doing so. Sadly IE7 is “old”.

Still I think you are over complicating this. for full support, you could just code with a few extra wrapper DIVs, to add the extra images, make your graphics OPAQUE, and overlay them to give the ILLUSION of transparency.

One fringe benefit of this, is that , since you are using opaque images, you can use image replacement for some areas (such as the header) and get added SEO points. :slight_smile:

6

Thanks Dresden. I see you are using that outdated word “slice” as well! :wink: I do remember hearing somewhere (probably here) that one should not use too many divs. So what you are saying is to take the swirl image and have it in a wrapper, the header in a wrapper, and then the top of the content area in a wrapper? Set them all as background images and add opaque to make them appear transparent. Could you show me fake code so I know what to follow? I am thinking that it should start out with page wrapper (never mind about the page wrapper-I have a background for the page that will repeat X & Y - wait a minute - that would be in the body so yes page?), then swirl wrapper, followed by header wrapper, nav wrapper, then upper content wrapper, lower content wrapper, footer wrapper (maybe), then end the page wrapper. Am I thinking correctly? To get them to overlay I would use padding or margins or both? Or would I call them containers? I looked at some of my other projects and I did not use the word wrapper, I used container. CSS still boggles my mind but can allow one to create really cool things that tables could NEVER do.

7

IE7 is quickly joining IE6 in the much welcome path to irrelevancy, but I still support 7, even if I don’t support 6. I think ralph’s solution in my opinion is more flexible, since if you decide to change that graphic, you don’t have to go back and re- “slice” those two opaque images. Just saves you work to let CSS to as much graphical work as you can and limit dependance on Photoshop maintenance as much as possible.

Here is an alternative method that works in all browsers, even IE 6 with some additional work. I do this and I have never had problems with the appearance anywhere, but it does rely on very light amount of Photoshop maintenance, if you wanted to change the color.

Take a 5px by 5px document in Photoshop with transparent background, create a color overlay, and set it’s transparency to whatever, 50%, 20% doesn’t matter. Then export it as a transparent PNG. Should be very small. Then set your background of that DIV to tile that PNG. I prefer ralph’s method still, and just let the relatively few who are on IE7 have a slightly lesser experience.

8

I do remember hearing somewhere (probably here) that one should not use too many divs.

The KEY there is TOO MANY. People seem to misinterpret that advice a lot. If you have a pure text navigation for example and you wrap a div around it… that TOO many since the UL is a block element and you don’t need to wrap another block element. BUT
if you intended to have a sliding door effect you NEED that DIV. That’s just one example.

Anyway, here is the gist of what I was suggesting:


<div id="shell">
	<h1>One Doc's Trip<b></b></h1>
	<div id="NavCont">
		<ul>
			<li><a href="#">Your</a></li>
				<li><a href="#">Nav</a></li>
			<li><a href="#">Goes</a></li>
			<li><a href="#">Here</a></li>
		</ul>
		content...possibly including footer
	</div>
</div>

in PHTOTHOP create the following:
1)a tile of the bg pattern (nothing above it and make sure it tiles seamlessly… make the tile as small as you can )
2) transparent GIF of the swirl by itself ( no background, no overlay… ) set the matte to the average color of the bg tile from step 1
3) a jpg or gif of the header
4) a jpg or gif of the part of the swirl that’s in the light blue ( content ) area… w/o the pic of the doctor onto of it, of course.


body {margin:0; padding:0; background: url(bgTile.jpg);}
h1 {height: (height of header)px ; width:(width of header)px position : relative; overflow:hidden; }
h1 b{position:absolute; left:0; right:0; top:0; bottom:0; height:100%; width:100%; background:url(header.gif) no-repeat; z-index:10;}

That’s your header image replacement… :). Note your header text is still there for screen readers and search engines.

This is the tricky part… I am going to assume fixed width for the sake of NOT doing math and brevity of this example.


#shell{padding:0 (width of the amount of the swirl showing through); width:(width of header)px;margin:0 auto; background:url(step2.gif) no-repeat top left;  }
#navCont{background:url(step4.jpg)  top left no-repeat #lightbluehex;}

That’s pretty much the formula for it. See no extraneous divs… :wink: