/    Sign up×
Community /Pin to ProfileBookmark

hiding text and displaying image background

Copy linkTweet thisAlerts:
Feb 12.2005

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,
Schomer

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@LiLcRaZyFuZzYFeb 12.2005 — yes, you would go like this :
[code=php]
<!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>

[/code]
Copy linkTweet thisAlerts:
@BonRougeFeb 12.2005 — 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.
Copy linkTweet thisAlerts:
@LiLcRaZyFuZzYFeb 12.2005 — [i]Originally posted by BonRouge [/i]

[B] Some people use something like "text-indent:-9000px" to achieve this. [/B][/QUOTE]

that could render bad in some browsers, couldnt it?
Copy linkTweet thisAlerts:
@BonRougeFeb 12.2005 — 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...
Copy linkTweet thisAlerts:
@schomerauthorFeb 12.2005 — 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!
Copy linkTweet thisAlerts:
@LiLcRaZyFuZzYFeb 12.2005 — a span tag doesnt do anything, it has no influence on the output
Copy linkTweet thisAlerts:
@BonRougeFeb 12.2005 — In that case, I think what I said is valid enough.
×

Success!

Help @schomer spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...