I'd like to hide some text inside a DIV on the page and instead display a graphic for the DIV's background. I am able to hide the text using display:none... but here's my question... is there a way, via a CSS change only, to show a graphic instead?
Thanks,
Schomeryes, you would go like this :
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>background</title>
<style type="text/css">
<!--
h1{
height: 2em;
width: 10em;
background: url('image.png') center center no-repeat;
}
h1 span{
display: none;
}
-->
</style>
</head>
<body>
<h1><span>Header</span></h1>
</body>
</html>Could you give a little more information? As far as I can see, you want to show an image. You don't want to show the text... What is the text for if you don't want to show it?
Is this for a heading or something - for SEO (sometimes people want to have text in their <h1> tag but don't want it to be seen - they show a background image instead)? For this, you can put your image in the background of your heading. Some people use something like "text-indent:-9000px" to achieve this.Originally posted by BonRouge
Some people use something like "text-indent:-9000px" to achieve this.
that could render bad in some browsers, couldnt it?I'm sure it could. I wasn't exactly recommending it... I just said 'some people do this'. OK, so I guess I should think before I write.
I was wondering about 'display:none' though. I wondered if it might be ignored by search engines if it's 'display:none'. Just a thought...Yes, what has happened is I have some hard coded text that appears on a page, inside a DIV. I'd like to hide the text (display:none?), and put an image in its place instead.
When I set the DIV to display:none, the image I set for the background doesn't seem to appear - which makes sense, since I set it to none.
LiLcRaZyFuZzY,
You've got an awesome workaround with the span. However, all I have is an <h1> inside a DIV.
Maybe I could talk the person handling the HTML into adding a span. If it were there, and not included in the CSS, nothing different would happen to it, right?
Thanks, all for your help with this!a span tag doesnt do anything, it has no influence on the outputIn that case, I think what I said is valid enough.
Thanks,
Schomeryes, you would go like this :
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>background</title>
<style type="text/css">
<!--
h1{
height: 2em;
width: 10em;
background: url('image.png') center center no-repeat;
}
h1 span{
display: none;
}
-->
</style>
</head>
<body>
<h1><span>Header</span></h1>
</body>
</html>Could you give a little more information? As far as I can see, you want to show an image. You don't want to show the text... What is the text for if you don't want to show it?
Is this for a heading or something - for SEO (sometimes people want to have text in their <h1> tag but don't want it to be seen - they show a background image instead)? For this, you can put your image in the background of your heading. Some people use something like "text-indent:-9000px" to achieve this.Originally posted by BonRouge
Some people use something like "text-indent:-9000px" to achieve this.
that could render bad in some browsers, couldnt it?I'm sure it could. I wasn't exactly recommending it... I just said 'some people do this'. OK, so I guess I should think before I write.
I was wondering about 'display:none' though. I wondered if it might be ignored by search engines if it's 'display:none'. Just a thought...Yes, what has happened is I have some hard coded text that appears on a page, inside a DIV. I'd like to hide the text (display:none?), and put an image in its place instead.
When I set the DIV to display:none, the image I set for the background doesn't seem to appear - which makes sense, since I set it to none.
LiLcRaZyFuZzY,
You've got an awesome workaround with the span. However, all I have is an <h1> inside a DIV.
Maybe I could talk the person handling the HTML into adding a span. If it were there, and not included in the CSS, nothing different would happen to it, right?
Thanks, all for your help with this!a span tag doesnt do anything, it has no influence on the outputIn that case, I think what I said is valid enough.