Print Story Doing the CSS/HTML impossible: clickable BKG IMG
It's impossible to make a background image in CSS clickable. There are work-arounds which don't work, tricks that don't truck, and solutions that the authors vote up with their sock puppets.

Necessity of invention is a mother. (endnote: had to set to text-only; any tags b0rked everything into unreadableness).



NOTE: while IE, FF, Chrome, & Opera all display this correctly, DreamWeaver (CS6) and every other coding platform I've tried vomit blood, so do not be put off by Adobe lameness.

I chose h5 & h6 because who the fuck uses those tags except in tutorials?

Other info: Background pic is 1300×165, "headpic" is the basic pic container, "outer" is the outer frame and "header" is.. unused in this, I think. The normally useless z-index tag is somewhat important. You can substitute the Lorem Ipsum with any SEO shit; the display text has to fill the space of the graphic and carry on at least one extra line. Set the h6 property to "inherited" for testing/viewing (not "visible" or the underlines will fuck your hspace!).

CSS:

#outer {
z-index:2;
position:relative;
width:76%;
border:solid 7px #fff;
background-color:#fff;
margin:0 auto;
}

#header {
position:relative;
width:100%;
height:6.2em;
margin-bottom:2px;
display:none;
}

    #headpic {
    position:relative;
    height:165px;
    width:relative;
    background:#fff url(/img/background_graphic.jpg) no-repeat top left;
    margin-bottom:2px;
    }

    #headpic a
    {
        position: absolute;
        height: 165px;
        width: auto;
    }

    #headpic a h6
    {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 1;
        font-weight: bold;
        color: #E8E8E8;
        visibility:hidden;
        position:absolute
        width: inherit;
        z-index: -1
    }

    #headpic a h5
    {
        font-family: Verdana, Geneva, sans-serif;
        font-size: xx-large;
        font-weight: bold;
        color: #E8E8E8;
        visibility: visible;
        position: absolute;
        left: 6px;
        bottom: -34px;
        width: inherit;
        z-index: 100
    }

HTML:

<div id="outer">
        <div id="headpic">
        <a href="/index.html" title="Home"><h6>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h6>
        <h5>site_name</h5>       
        </a></div>

    <div id="menu">
            <ul>
            <li><a href="/docs/menu1.html">menu1</a></li>
            <li><a href="/docs/menu2.html">menu2</a></li>
            <li><a href="/docs/menu3.html">menu3</a></li>
            <li><a href="/docs/menu4.html">menu4</a></li>
            <li><a href="/docs/menu5.html">menu5</a></li>
            </ul>
    </div>
    </div>

I think that's it. Enjoy.

< Cannibals; Art Thief | Naming Conventions pt2 >
Doing the CSS/HTML impossible: clickable BKG IMG | 2 comments (2 topical, 0 hidden) | Trackback
Suggestion by anonimouse (2.00 / 0) #1 Tue Aug 13, 2013 at 08:23:35 AM EST
Can't you create an image with a z-index and link it to an AREA tag and achieve pretty much the same effect.

I haven't tried it - just wanting to know if anyone was gullible enough to try.


Girls come and go but a mortgage is for 25 years -- JtL
I know nothing of these things REC by Breaker (2.00 / 0) #2 Wed Aug 14, 2013 at 04:47:41 PM EST
But eh, hope you're feeling better.


Doing the CSS/HTML impossible: clickable BKG IMG | 2 comments (2 topical, 0 hidden) | Trackback