Make background image a link?

paul j · Dec 20, 2004

Is this possible?

I have a large graphic as a header image which I would like to make
"clickable" so that visitors can return to the main page but I can't figure
out how.

Any thoughts?

Neal · Dec 20, 2004

Is this possible?

I have a large graphic as a header image which I would like to make
"clickable" so that visitors can return to the main page but I can't
figure
out how.

Is it background or content? Pick one. Content can be clickable.
Background can't.

paul j · Dec 20, 2004

Is it background or content? Pick one. Content can be clickable.
Background can't.

..topleft {
background-image: url(topleft.jpg);
width: 847px;
height: 204px;
}

[---]

<div class="topleft"></div>

mbstevens · Dec 20, 2004

paul said:
Is this possible?

I have a large graphic as a header image which I would like to make
"clickable" so that visitors can return to the main page but I can't
figure out how.

Any thoughts?

You can *approximate* the effect you *might* want by using the z-index.

A large foreground image can be placed on <body> and all other content
placed in objects that are above it in the z-index. Google z-index to
learn particulars.

Jeffrey Silverman · Dec 20, 2004

.topleft {
background-image: url(topleft.jpg);
width: 847px;
height: 204px;
}

[---]

<div class="topleft"></div>

Try this.

Add "display:block" to the css definition

Change <div class="topleft"></div>

to

<a class="topleft"></a>

later...

paul j · Dec 20, 2004

.topleft {
background-image: url(topleft.jpg);
width: 847px;
height: 204px;
}

[---]

<div class="topleft"></div>

Click to expand...

Try this.

Add "display:block" to the css definition

Change <div class="topleft"></div>

to

<a class="topleft"></a>

later...

That works, but it isn't clickable...adding "href" to it causes it to fail
validation.

Kris · Dec 20, 2004

<11v6tufyi0whn$.dlg@P7Ax8zefAz8re8ranuGa9rebruMUdruPHeYaPrabru9haSE5r56r
eThufrufRu4p.org>,

paul j said:
That works, but it isn't clickable...adding "href" to it causes it to fail
validation.

How will visitors without the ability to see images be able to use your
site?

paul j · Dec 20, 2004

<11v6tufyi0whn$.dlg@P7Ax8zefAz8re8ranuGa9rebruMUdruPHeYaPrabru9haSE5r56r
eThufrufRu4p.org>,

How will visitors without the ability to see images be able to use your
site?

Making an image a link renders the site unnavigable?

Kris · Dec 20, 2004

<6xvtadh6k2up$.dlg@P7Ax8zefAz8re8ranuGa9rebruMUdruPHeYaPrabru9haSE5r56re
ThufrufRu4p.org>,

paul j said:
Making an image a link renders the site unnavigable?

No. When using an appropriate alternative text on the image, those users
are catered for. However, how would you set an alternative text on a
background image?

Neal · Dec 20, 2004

paul said:
.topleft {
background-image: url(topleft.jpg);
width: 847px;
height: 204px;
}

[---]

<div class="topleft"></div>

To have a link, you need two things. An anchor, and content to click.
Right now you have neither.

Within the div you should include an anchor link, and then the image you
want clicked as the content. Or, if you really have to have it in the
background, use a transparent image in the content, same size as your div
(margin:0;padding:0; as well). In either case, the image's alt value
will be what you want no-image users to encounter as link text.

Try something like this, not tested (and BTW "topleft" is cruddy style.
I'll use "logo" because that's what this is):

CSS

..logo {
background-image: url(topleft.jpg);
width: 847px;
height: 204px;
}

..logo a img {
margin: 0;
padding: 0;
}

And HTML

<div class="logo">
<a href="index.html">
<img src="transparent.png" height="204" width="847" alt="Logo Text Goes
Here">
</a>
</div>

Starshine Moonbeam · Dec 23, 2004

<cqgm8dr9t0hq.dlg@P7Ax8zefAz8re8ranuGa9rebruMUdruPHeYaPrabru9haSE5r56reT
hufrufRu4p.org>, paul j ([email protected]) dropped a +5 bundle
of words...

Is this possible?

Not with a background image.

I have a large graphic as a header image which I would like to make
"clickable" so that visitors can return to the main page but I can't figure
out how.

Any thoughts?

Animate a background image	0	May 4, 2022
Background image not showing up on html page	3	Sep 23, 2023
I just want a background image	5	Jan 3, 2020
Make 'Image X' spin 360deg on y-Axis until reset button clicked	1	Jan 22, 2023
How do I remove the background of an image (Pygame)	0	Dec 23, 2022
Code for background image in website?	3	Jul 19, 2022
Change to background image.	5	Dec 18, 2018
How Do I Set text on an Image and use the image as a border?	7	Mar 16, 2023

Make background image a link?

paul j

Neal

paul j

mbstevens

Jeffrey Silverman

paul j

Kris

paul j

Kris

Neal

Starshine Moonbeam

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads