Text behind image in CSS

Okay, so i want to put text behind my header in css, so that it is more accessible and so people who do not load images (such as certain linux browsers) see the text as the header.

would i have to do it like this?

<h1>This is the header<span></span></h1>

HTML:

h1 {
  font-family:sans-serif;
  font-size:15px;
}
h1 span {
  background-image:url('header.gif');
}

Code (markup):

or could i just set the h1 to display under the image.

thanks for the help

 

I don't get you, but I have two answers:

One use a div, and a background for that, if you want it to be a header, and write anything over it,
Second, SE's does not index image links remember

 

i know my examples bad. stomme paus helped me with it a while ago, i just forget exactly what he put in my css to make it work. ill give you the link to that specific post, jas..

its http://forums.digitalpoint.com/showpost.php?p=4992878&postcount=11

he has the header text in the <h1> tag and then an image in the <span> tag so that it goes over the image.

thats what i was trying to ask if i could do in my first post sorry for the confusion.

is there any other way i can do this? or will this work?

Thanks

 

This solution also applies here.

 

i dont want the text to not be there, i just want the text to be hidden by the image. so if the image doesnt load, or the image does not exist for some reason it shows the text, readable not invisible.

This would make the text OVER the image but invisible, so no matter what, you would not be able to visibly see the text, only search engines would be able to.

 

In that case,

<style type="text/css">
h1 {
	font-family:sans-serif;
	font-size:15px;
	display:block;
	position:relative;
	width:100px;
	height:20px;
}
h1 span {
	display:block;
	position:absolute;
	width:100px;
	height:20px;
	background-image:url('header.gif') 0 0 no-repeat;
}
</style>

<h1>This is the header<span></span></h1>

Code (markup):

Obviously you'll need to change the width and height to match that of your image.

 

Yes. I'll point out the important things Greg did for you, Homer, so that you know:

h1 {
	font-family:sans-serif;
	font-size:15px;
	display:block; <--okay, not needed as headers are naturally blocks, but doesn't hurt
	position:relative;[b]<--this is important!![/b]
	width:100px;<--so is setting height and width
	height:20px;
}
h1 span {
	display:block; <--not necessarily needed cause pos: abs makes things blocks
	position:absolute; [b]<--important[/b]
	width:100px; <--again match the height and width to the parent element, you can also use height: 100% width: 100%;
	height:20px;
	background:url('header.gif') 0 0 no-repeat; <--changed from background-image since this is using a shortcut method for multiple background properties
}

Code (markup):

Another thing, when I first started using this technique (got it from Dave's article @ mezzoblue ) I put the spans in front of the text! This was okay, but I forget why but deathshadow said something about it being easier to change later if needed when you do it like they have on the mezzoblue page-- after the text.
But when you do this, the span doesn't necessarily line up. Because you are positioning it absolutely, if it doesn't line up (or only does in some browsers) it's a good idea to tell it
top: 0;
left: 0;
as well.

Lastly, you'd think if the h1 in this case was in a div called #header and the h1 AND the span image were all to line up at 0, 0 at the #header div, you'd put position: relative on the header div... and find that IE doesn't like that at all. Always try to put position: relative on the closest parent (in this case, direct parent, the h1).

You need to say position: relative because position: absolute means the thing is positioned in relation to its nearest positioned ancestor. To be a positioned ancestor, you need to have position stated somewhere (either absolute, relative, floated I think, or possibly even "static" might work if stated in the code). If there isn't one, the body or viewport is used. You usually don't want that.

 

you changed background-image to background: ..

i soent 30 mins one day changing them all because "W3 said that it was more semantically correct" or something, it gave me a little box that said something about change background: to background-image:

oh well, ill just change them all back.

 

Don't worry about it. Rule of thumb, if you're listing more than one background property, "background" will do it. If you're only listing one, it's better to list that particular background thing (backgroun-position, backgroun-image, background-repeat) but I've heard from plenty of people that background isn't like font, so you can get away with "background" for single properties too.

I don't use "background" for single properties because I'll forget and try it with something like "font" which requires the full property name OR if listing multiple values then you are required to list so-many. Like, background: url(blah.gif) works fine apparently but font: bold does not.

You only had the image, so you did it right. Greg combined the other properties, so he should have used the shortcut, but if it worked like that, leave it : )
background-image:url('header.gif'); <-- fine

 

Yep it's kinda wierd like that, how you can add whatever to the background property, but if with borders and fonts you have to be very specific! I tend to end up using everything e.g background-image, background-repeat when I could shove them all in the background: property, but that's cause my coding program has autocomplete so it's quicker but uses more KB i suppose if you really want to be saving download time!!

 

thanks, this worked, but now my navigation got pushed below it. pretty sure this is doing it because i cant float a div over top of a span (which i was doing before) because it kinda just stays below the header, if i try to set a negative margin-top (which i hate because it seems like cheating) it goes under the header image, and i cant see it, i dont even actually know if it is there, im just assuming. any way i can float this over ?

 

Lawlz, I was just rereading the thread to see if there was a link to the page, and saw this:

paus="Pope" dus, dumb Pope instead of dumb cat : )

Anyway, I need to see what's going on, cause I've never had anything sitting on top of any of my image replacements... the div you're pulling up sits under because the span's image is pos: absolute so is always higher. You might be able to just have that div have a higher z-index (and then a position set like relative to make it work) than the span but... there's likely a better way.

 

i used pos:abs; and it worked. just had to set a left: and top: on it.

i dont really get positioning. never really studied that part, one of these days i must look at w3schools examples and see if i can case it.

thanks for the help,

yeah, about your name, i couldnt remember what it actually was. so i just spelled it like it sounded to me. what language is that anyway?

 

Dutch, which is actually pretty close to English (or at least, older English). poes=cat which is likely where pussy comes from. OE in Dutch is like English OO so it's a pooos, not like Edgar Allen Poe. The "oh" sound in Dutch is made from "oo" so the word loop (to walk, like English "lope" like a wolf does) is pronounced like the English Lope (rhymes with "rope").

Yeah positioning isn't explained well anywhere that I've found, I had to learn it via bits and pieces on teh interwebz and some books. There's a nice diagram on page 246 of HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer (I recommend the book anyway, it doesn't explain all about positioning but it's my constant desk reference and really got using CSS to set stuff right in my head).

But generally, everyone is by default position: static, and they do their normal things-- blocks try to be 100% width of their containers and make new lines, inlines stack up alongside each other, and everyone tries to get as close to the top and left of the page as possible (unless you've got page direction set for Hebew/Arabic, rtl).

This is the natural flow where the first things listed on the page are at the top and they push the stuff that comes afterwards underneath them.

Position: relative, if you then set coordinates, doesn't actually move the element but moves where it's visually seen in relation to where it really is (where it was naturally sitting on the page before you dicked with it). This means it will NOT push down the next box under it like it normally would. You didn't really move it. It also moved "up" (towards you) on the page, meaning it naturally got a higher z-index than the other (static) things on the page. Static things then slide underneath.

Example (and if it doesn't look right, I only looked in FF1.5 on Ubuntu, you can copy the code and change the coords on the relatively positioned box... it should be partially covering div3 with the Blah Blah Blah in it): http://stommepoes.nl/Tests/relative.html

Usually then you see position: relative to set Haslayout or to give a parent a position so that a child can be absolutely positioned.

Position: absolute takes an element completely out of the document flow. It no longer sees the page, and the page no longer sees it. It's as if you took a Post-it and stuck it to your monitor-- it generally sits on top of everything else (like pos:rel, it gets a higher z-index naturally, even higher than the rel: po'd things). This is why it's generally NOT a good idea to position large things like sidebars or footers absolutely-- they WILL NOT move out of the way of growing content, and will not be moved around by other boxes-- the only thing the abso-po'd thing knows is where its nearest positioned (not static) ancestor is. You've set coords relative to that parent, so if that parent changes size or position, then indeed the abso-po'd thing can as well. Otherwise, not.
If there is no "nearest positioned ancestor" for the abso-po'd thing to reference itself to, then it uses the body.

Floats were originally created (if I have this right) to do what you see in print like newspapers and magazine-- you have an image with text flowing around it. After people wanted to leave tables for layout, float became used for all sorts of positioning.
When something is floated, it is as if the top of the float stays attatched to its parent container, while the rest of it rises above the page (so, statically and relatively-positioned things, if they are blocks, can slide underneath as they are lower on teh z-axis naturally)-- this is why in modern browsers (NOT IE6 or 7) the containers don't wrap the floats-- the containers can't see the bottom of the float anyway because it's "above" them. So containers collapse, except in IE which wraps the floats anyway.

The floats' bottoms are above the blocks on the page I said, but they are at the same level as inline stuff, if the inline stuff is a sibling (in the same container). So I tend to think of inline stuff as almost being a little above their block containers too (as far as I know they don't actually get a different z-index though). So they can interact with floats, and text will wrap around a float. So a header like h2, the block part of it (if you gave it a background colour and let it stay 100% width like it naturally has) can slide under the float (except in IE) while the text part of the h2 just stacks against it.

Because the bottom of the float is "above" the container, setting marigns on any blocks who come afterwards in the source code is a little strange. Those blocks, if say you set a top margin on them, only know where the top of their container is, and their top-margins only push them down from that container top, not away from the float (same goes for side margins)-- though in IE a clearing element can push away from the float bottom (see below compare with IE7 and FF/Opera?Safari).

http://stommepoes.nl/Tests/float.html (notice the bug in IE6... not sure, might be peekaboo but if you switch browsers and then go back to IE6 you can see the h2)
http://stommepoes.nl/Tests/float2.html (here, no clearing, notice both IE wrapping the float AND how IE treats the top margin on the blue div differently than it did on the first page)

Clearing a float lets the parent container see the bottom (but actually still not the middle) of the float (so here I think of a bowed-out piece of paper, where the top and bottom touch the table but the middle is bowed up). So now the container in modern browsers can wrap it, and new blocks, instead of sliding up underneath the float, see the bottom and stay underneath it.

I use position: absolute for things that I need to appear on :hover like help text on forms or the span text on my hover map of the world. I don't care that they don't see the page, I want them always positioned a certain distance from the edge of their parent either way-- not something I would use a float for.

I use floats to have blocks sit side-by-side: sidebars, menu items in a horizontal menu, image galleries, etc. I do this, but it's only easy when you know how IE vs other browsers will act and what floats really are. If I can't clear a float I will use overflow: hidden (and other people use any other overflow property that isn't the "visible" default, like auto, but I hate teh scrollbarz)-- overflow set to anything other than the default forces the parent container to know where the bottom of its children, even the floats, are. Now this doesn't actually clear the float, but because the container was a normal block and now has it's bottom extending to the bottom of its floated child, new blocks will of course have to start below and are unable to ride up to underneath the float, so the effect is the same-- however other children in that container still can!
<container>
<float/>
<div/>
</container>
<div2/>
Here, even if I say the container is overflow: hidden or auto, the div inside can still slide behind that float, and its inline content can stack alongside... meanwhile the div2 will not, as it has to stay below </container> anyway.

 

The reason I do that is for consistancy with inline-block 'sliding doors' techniques (doesn't matter if you use position:absolute sliding doors - but thanks to Firefux being #DDD about right positioning as the browser width changes it's not always an option) so they are all formatted the same - who knows, some other stylesheet you develop in the future may let the text actually render as text ***SHOCK***, using a sliding doors background behind it, or put that span to use for some other type of image.

It is a hair more code though including the top and left position, which rubs me the wrong way - but more versatile HTML is usually worth the 'pain'.

 

Don't think I've ever seen an inline-block version-- got a demo?

 

okay, the navigation is showing up for me, but not for other viewers of the site (i didnt know this at the time) for me the site looks perfect in all browsers (besides Flashpeak Lite Browser), but in IE 7 for other users, the nav doesnt show, and in lite browser neither. Anything i can do about this so that everyone can see it?

 

can someone please tell me how i would do this?
i need to be able to have the navigation display everywhere.