Background Image & hotspot/links

How can I make a hotspot of a table cell which has a
background image?
I have a table with 9 cells, all of which have different
background images and text inside them.
I had to make the images background in order to make the text
so the page improves on search engine rankings, so i can't insert
images and attach links to them.
Just linking the text is no good either.
Hope you can help.
thanks

Hello,
You can link the text and expand the link area to fill the
table cell.
Try the code below.
Does that work?
<style type="text/css">
<!--
td.celllink a {
display: block;
text-decoration: none;
color: #000;
padding: 20px;
border: 1px solid #000;
td.celllink a:hover {
background-color: #0066FF;
-->
</style>
<table width="600" border="0" cellspacing="2"
cellpadding="0">
<tr>
<td class="celllink"><a
href="something.htm">Test</a></td>
<td class="celllink"><a
href="something.htm">Test again</a></td>
<td class="celllink"><a
href="something.htm">Test once more</a></td>
</tr>
</table>
Something to be aware of:
Users with a different text size setting in their browser
will result in the
text being in a different spot over the image and possibly
even beyond it.
Take care,
Tim
"little bob" <[email protected]> wrote in
message
news:gqovag$b97$[email protected]..
> Thanks,
>
> yes, that does make sense, but wont the transparent
image push down the
> text in the cell?
>
>

Similar Messages

  • Making background image clickable link

    I have several div tags with background images in them.  I want to make the background images clickable links.  what is the easiest way to do this?

    Yes, the background image can be made clickable.
    Here is the link to get the info to one method: http://ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-clickable-link/
    Basically it is written like this:
    ==CSS==
    #bkgrdimage {
        background-image:url ('image.png');
        display:block;
        height:??px;       (image height)
        width:??px;        (image width)
        text-indent:-9999px;  
    ==HTML==
    <a href="http://????" title="Title of Link" id="bkgrdimage">Basic Text For this Link</a>
    The text indent places the "basic text for this link" outside the browser screen.

  • Link on background image

    I created and inserted a  background image in the Container. It includes "link buttons" built into the image in Photoshop, meaning images intended to be clicked in order to move to another page.  I can't create hotspots/image maps to use to create links because the image is a background image.
    How do I create the actual hyperlinks to make the "buttons" function as navigiation links?
    Thanks for your suggestions.
    Barry

    Google is your friend.
    Search term
    "Links on background images"
    First link in search result
    http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/
    #yourdiv {
        background-image:url(image.png);
        display:block;
        height:58px;
        text-indent:-9999px;
        width:200px;
    You will need to style the position of the div(s)
    Learn CSS
    Shane

  • Hotspot on Background Image

    I'm trying to create a Hotspot imagemap link in a blank area
    of the page that has a background image defined from a CSS header.
    Since there is no live page image there, I can't figure out how to
    create a hotspot on that page. Is this possible to do?

    No
    Walt
    "mnadell" <[email protected]> wrote in
    message
    news:g1hgng$iif$[email protected]..
    > I'm trying to create a Hotspot imagemap link in a blank
    area of the page
    > that
    > has a background image defined from a CSS header. Since
    there is no live
    > page
    > image there, I can't figure out how to create a hotspot
    on that page. Is
    > this
    > possible to do?
    >

  • How to add a link in a header created only of a background image

    Hi, I created my website with CSS in Dreamweaver. Here is a sample page:
    http://www.bfranklincrafts.com/NewSite/BonneyLCalendar.html
    The header is created with a background image. How do I put in a link in the header that when they click on Ben Franklin Crafts & Frames would take them to the home page? I have nothing to attach my link to?!?!
    Thanks.
    Liolee

    Putting a clearpixel or transparent.gif over your background image won't work very well if CSS is turned off.
    My preference would be to take your Business Name out of the background image and replace it with real text inside an <h1> tag in the foreground - where it will be visible to search engines, screen readers and translators.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • A a:link has background image

    I have a bkg img in my nav and bottom nav. (navBkg.jpg) These navs are styled very specifically for the nav and bottom Nav in my css.  However all the a links are displaying this background, rather than just the nav and bottom Nav.  You can see it in the lower box (Eva prim's Snack of the Week Club) where it says "...read more."
    http://carriecoren.com/test/Sept9
    here's the css:
    @charset "UTF-8";
    #column3 img {
              margin-left: 10px;
    @font-face
    font-family: myFirstFont;
    src: url(Gondola_SD.ttf); 
              margin:0;
              padding:0;
    a, a:link, a:hover {
                        background-image: url(../images/whtBkg.jpg);
    body {
              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
              font-size: 14px;
              color: #222;
              line-height: 18px;
              margin-right: auto;
              margin-left: auto;
              text-align: left;
              background-image: url(../images/blue_bg_vert.jpg);
              background-repeat: repeat-x;
              background-color: #000;
    #container {
              width: 960px;
              margin-right: auto;
              margin-left: auto;
              margin-top: 0px;
              margin-bottom: 0px;
              text-align: left;
              background-color: #FFF;
              background-image: url(../images/containerBkg.jpg);
              background-repeat: repeat-y;
    #content  {
              width: 920px;
              padding-right: 20px;
              padding-left: 20px;
    #header {
              background-image: url(../images/header.jpg);
              background-repeat: no-repeat;
              padding: 0px;
              height: 280px;
              width: 960px;
              text-indent: -9999px;
              margin-top: 0px;
              margin-right: 0px;
              margin-bottom: 0px;
              margin-left: 0px;
    /* column 1 */
    #column1 {
              width: 590px;
              margin-top: 30px;
              margin-right: 0px;
              margin-bottom: 20px;
              margin-left: 10px;
              border: medium solid #888;
              background-image: url(../images/column1art.jpg);
              padding-bottom:50px;
              float: left;
    #column1  p{
              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
              font-size: 14px;
              color: #222;
              line-height: 22px;
              padding-left: 253px;
              padding-right:10px;
              padding-bottom:10px;
    #column1  h1{
              font-weight:normal
              font-family: Gondola_SD.ttf;
              font-family: "Gondola SD", "Gondola SD - Swash";
              padding-top: 20px;
              padding-left: 240px;
              padding-bottom:10px;
              font-size: 20px;
              word-spacing: 95%;
              text-transform: uppercase;
              line-height: 30px;
              text-align: center;
    /* column 2 */
    #column2 {
              background-color: #FFF;
              padding: 0px;
              width: 250px;
              margin-top:30px;
              margin-right: 20px;
              margin-bottom: 0px;
              margin-left: 10px;
              float: right;
              padding: 0px;
    #column2 li {
              list-style-type: none;
              display: inline;
              padding: 0px;
              margin-top: 0px;
              margin-right: 8px;
              margin-bottom: 0px;
              margin-left: 0px;
    #column2 a, a:link {
              margin-top: 0;
              margin-right: 0px;
              margin-bottom: 0;
              margin-left: 0;
              padding-top: 0;
              padding-right: 0;
              padding-bottom: 0;
              padding-left: 0;
    /* column 3 */
    #column3 {
              width: 550px;
              margin-right: 0px;
              margin-bottom: 20px;
              margin-left: 10px;
              border: medium solid #888;
              padding: 20px;
              float: left;
              height: px;
              background-color: #FFF;
    #column3  p{
              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
              font-size: 14px;
              color: #222;
              line-height: 22px;
    #column3  h2{
              font-weight:normal
              font-family: Gondola_SD.ttf;
              font-family: "Gondola SD", "Gondola SD - Swash";
              padding-bottom:10px;
              font-size: 16px;
              word-spacing: 95%;
              text-transform: uppercase;
              line-height: 30px;
              text-align: left;
    #column3  a, a:link{
              color: #33C;
              background-color: #FFF;
              background-repeat: no-repeat;
    #column3  a:hover{
              color: #33C;
              font-weight: bold;
    h1{
              padding-bottom:10px;
              font-weight:normal
              font-family: Gondola_SD.ttf;
              font-family: "Gondola SD", "Gondola SD - Swash";
              padding-top: 20px;
              font-size: 20px;
              word-spacing: 95%;
              text-transform: uppercase;
              line-height: 30px;
              text-align: center;
    /* the main nav */
    #nav {
              width: 960px;
              height: 35px;
              margin-bottom: 10px;
              padding-top: 5px;
              padding-right: 0px;
              padding-bottom: 0px;
              padding-left: 0px;
              text-align: center;
              font-size: 14px;
              line-height: 30px;
              font-family: "Gondola SD", "Gondola SD - Swash";
              border-top-width:thin;
              border-color:#000;
              background-image: url(../images/navBkg.jpg);
              background-repeat: repeat;
    #nav ul { /* this is the main nav list */
              list-style:none;
              margin-bottom:0px;
              width:100%;
              margin-top: 0px;
    #nav li {
              display: inline;
              background-image: url(../images/navBkg.jpg);
              background-repeat: repeat-x;
    #nav li a, a:link {
              padding-right:25px;
              padding-left:15px;
              text-decoration:none;
              background-image: url(../images/navBkg.jpg);
              background-repeat: repeat-x;
              vertical-align: bottom;
              width: 100%;
              padding-top: 0px;
              padding-bottom: 0px;
              margin-top: 0px;
    #nav li a:hover{
              background-image: url(../images/navBkgHover.png);
              background-repeat: repeat-x;
              padding-top: 6px;
              margin-top: 0px;
              width: 100%;
    /* bottom nav */
    #bottomNav {
              width: 960px;
              background-color: #003399;
              margin: 0px;
              padding-top: 0px;
              padding-bottom: 0px;
              border-top-width: 9px;
              border-top-style: solid;
              border-top-color: #000;
              text-align: center;
              background-image: url(../images/navBkg.jpg);
              background-repeat: repeat-x;
              float: left;
              height: 25px;
    #bottomNav ul {
              list-style:none;
              font-weight:bold;
              margin-bottom:0px;
              margin-top: 0px;
              padding-top: 0px;
              padding-bottom: 0px;
    #bottomNav li {
              margin-right:0px;
              position:relative;
              padding-right: 10px;
              padding-left: 10px;
              padding-top: 0px;
              padding-bottom: 0px;
              display: inline;
    #bottomNav a, a:link {
              margin-right:0px;
              padding-right: 10px;
              padding-left: 10px;
              padding-top: 7px;
              padding-bottom: 7px;
              display: inline;
              margin-top: 10px;
              margin-bottom: 0px;
              color: #DDD;
    #bottomNav a:hover {
              color:#DDD;
              background:#660000;
    #pinterest {
              width: 250px;
              margin-right: 0px;
              margin-bottom: 20px;
              margin-left: 0px;
    #twitter {
              background-color: #FFF;
              width: 250px;
              margin-right: 0px;
              margin-bottom: 20px;
              margin-left: 0px;
              height: 100%;
              margin-top: 15px;
    #social {
              width: 250px;
              height: 58px;
              background-color: #FFF;
    #copyright {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9px;
              line-height: 20px;
              color: #222;
              text-align: center;
              width: 100%;
              float: left;
    #contact {
              margin: 0px;
              height: 140px;
              width: 50px;
              padding-right: 10px;
              padding-left: 20px;
              border: thin solid #222;
              padding-top: 40px;
    .clear {
              width: 900px;
              color: #EEE;
              margin-top: 100px;
              margin-right: 0px;
              margin-bottom: 0px;
              margin-left: 0px;
              clear: both;
    #container #content #clear {
              width: 700px;

    OK, you didn't need to post your CSS here, it's available on the page.
    But I am confused. Perhaps I am misreading you here.
    You have your bottom nav and your top nav. Then you have your "read more" which is not nav-it's just a link. Doesn't have your nav background.
    When you set the rules for links for Column 3, you set the way the "read more" would work:
    #column3  a, a:link{
              color: #33C;
              background-color: #FFF;
              background-repeat: no-repeat;
    #column3  a:hover{
              color: #33C;
              font-weight: bold;
    So when you hover, it turns bold and maintains the same color. And the background for links in Column 3 is white, which is the background for column 3. Really not needed.
    Additionally, the W3C Validator is finding problems with your page. Please fix those, then get back to us.

  • Replacing images used as a link with background image

    OK - I'm embarrassed to say that what I'm trying to do is
    blindingly
    obvious, and I've used Dw for several years - and do most of
    the work
    in code view but I'm having a senior moment and can't do what
    I want.
    I've read that when you use images on a page for background
    styling,
    for example the logo, or an image of a professional body such
    as IEE,
    it is more semantically correct to use CSS background images
    rather
    that a <img src=
    tag
    So I have a div in which I put the background, but then
    perhaps quite
    logically you can't directly put a link to it. So how do you
    do it.
    I've tried to ensure there was a block element so when you
    hover l
    mouse over it you get a block link - but no joy.
    maybe my dyslexia early is the sign of premature brain fade
    ~Malcolm N....
    ~

    You cannot place a link on a background image. However, you
    can place a
    link on a transparent image floated over the background.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "Malcolm N_" <[email protected]> wrote in message
    news:[email protected]..
    >
    > OK - I'm embarrassed to say that what I'm trying to do
    is blindingly
    > obvious, and I've used Dw for several years - and do
    most of the work
    > in code view but I'm having a senior moment and can't do
    what I want.
    > !!!
    >
    > I've read that when you use images on a page for
    background styling,
    > for example the logo, or an image of a professional body
    such as IEE,
    > it is more semantically correct to use CSS background
    images rather
    > that a <img src=
    > tag
    >
    > So I have a div in which I put the background, but then
    perhaps quite
    > logically you can't directly put a link to it. So how do
    you do it.
    >
    > I've tried to ensure there was a block element so when
    you hover l
    > mouse over it you get a block link - but no joy.
    >
    > maybe my dyslexia early is the sign of premature brain
    fade ;-)
    >
    > --
    >
    > ~Malcolm N....
    > ~

  • Image map + link in background image

    Is it possible to put an image map and link to a background
    image of a table?

    no but you can put a 1px by 1 x blank transparent image over
    the background image and add an image map to that

  • Fitting background image size according to link text

    I am using a list for my navigation. I have a background
    image which is shown on the LI. If the text in the link is longer
    than the width of the image then the background image is repeated.
    How can I stretch the width of the image?
    Does it look like I am putting the background image in the
    right place? Am I doing this right? Thanks a lot
    <style type="text/css">
    BODY {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: small;
    PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px;
    FONT-FAMILY: "Trebuchet MS", arial, helvetica, sans-serif;
    BACKGROUND-COLOR: #fff; TEXT-ALIGN: center; min-width: 740px
    #navbar {CLEAR: both; MARGIN: 0px; WIDTH: 760px;
    bgColor=#cccccc
    #navbar LI {
    background-image: url(britishalliance/navback.gif);
    PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;
    LIST-STYLE-TYPE: none
    #navbar UL {
    LIST-STYLE-TYPE: none;
    #navbar A:link {
    background-image: url(britishalliance/navback.gif);
    BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px;
    PADDING-LEFT: 6px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM:
    5px; COLOR: black; LINE-HEIGHT: 10px; PADDING-TOP: 5px;
    WHITE-SPACE: nowrap; TEXT-DECORATION: none
    </style>
    <DIV id=navbar>
    <UL><LI><A href="">aaaaaa aaaa
    aaaaaaaaaa</A>
    <LI><A href="">aaaaa aa aa aaaaaaaa</A>
    <LI><A href="">aaaaa aa aaaaaaaa</A>
    <LI><A href="">aaaaaaaaa</A>
    <LI><A href="">aaaaaaaaaaaaa aaaaaaaaa</A>
    <LI><A href="">aaaaaa aa</A></LI>
    </UL></DIV>

    > How can I stretch the width of the image?
    You cannot. But you can prevent it from tiling with CSS.
    > Does it look like I am putting the background image in
    the right place?
    It's not necessary to have it on both the <a> and the
    <li> tags.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "Hydrowizard" <[email protected]> wrote in
    message
    news:[email protected]...
    >I am using a list for my navigation. I have a background
    image which is
    >shown
    > on the LI. If the text in the link is longer than the
    width of the image
    > then
    > the background image is repeated. How can I stretch the
    width of the
    > image?
    > Does it look like I am putting the background image in
    the right place? Am
    > I
    > doing this right? Thanks a lot
    >
    > <style type="text/css">
    > BODY {
    > PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: small;
    PADDING-BOTTOM:
    > 0px;
    > MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY:
    "Trebuchet MS",
    > arial,
    > helvetica, sans-serif; BACKGROUND-COLOR: #fff;
    TEXT-ALIGN: center;
    > min-width:
    > 740px
    > }
    > #navbar {CLEAR: both; MARGIN: 0px; WIDTH: 760px;
    bgColor=#cccccc
    > }
    > #navbar LI {
    > background-image: url(britishalliance/navback.gif);
    > PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px;
    PADDING-BOTTOM:
    > 0px;
    > MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
    > }
    > #navbar UL {
    > LIST-STYLE-TYPE: none;
    > }
    > #navbar A:link {
    > background-image: url(britishalliance/navback.gif);
    > BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px;
    PADDING-LEFT: 6px;
    > FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 5px;
    COLOR: black;
    > LINE-HEIGHT:
    > 10px; PADDING-TOP: 5px; WHITE-SPACE: nowrap;
    TEXT-DECORATION: none
    > }
    > </style>
    >
    >
    > <DIV id=navbar>
    > <UL><LI><A href="">aaaaaa aaaa
    aaaaaaaaaa</A>
    > <LI><A href="">aaaaa aa aa
    aaaaaaaa</A>
    > <LI><A href="">aaaaa aa aaaaaaaa</A>
    > <LI><A href="">aaaaaaaaa</A>
    > <LI><A href="">aaaaaaaaaaaaa
    aaaaaaaaa</A>
    > <LI><A href="">aaaaaa
    aa</A></LI>
    > </UL></DIV>
    >

  • How can you make an image an hotspot link for an email or paypal account?

    I have completed my first website using fireworks first then dragging it to dreamweaver cs6. My client is ready to launch their site. Two issues. I am literally trying to hotspot link an image for an email and paypal account. A few of my friends who are also website designers are having the same issue. Can this problem be solved so I can get paid?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    <img src="FlightMiracle.fw.png" width="1600" height="3000" usemap="#Map" border="0" />
    <map name="Map" id="Map">
      <area shape="rect" coords="1281,34,1396,69" href="#mailto:[email protected]" alt="Contact" />
      <area shape="rect" coords="1001,27,1163,71" href="#&lt;form target=&quot;paypal&quot; action=&quot;https://www.paypal.com/cgi-bin/webscr" method=&quot;post&quot;&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;cmd&quot; value=&quot;_s-xclick&quot;&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;hosted_button_id&quot; value=&quot;XDVDENF8NGXZN&quot;&gt;
    &lt;input type=&quot;image&quot; src=&quot;http://www.flightmiracle.com" border=&quot;0&quot; name=&quot;submit&quot; alt=&quot;PayPal - The safer, easier way to pay online!&quot;&gt;
    &lt;img alt=&quot;&quot; border=&quot;0&quot; src=&quot;https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width=&quot;1&quot; height=&quot;1&quot;&gt;
    &lt;/form&gt;
    " alt="Cart" />
      <area shape="rect" coords="1206,263,1422,307" href="#&lt;form target=&quot;paypal&quot; action=&quot;https://www.paypal.com/cgi-bin/webscr" method=&quot;post&quot;&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;cmd&quot; value=&quot;_s-xclick&quot;&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;hosted_button_id&quot; value=&quot;XDVDENF8NGXZN&quot;&gt;
    &lt;input type=&quot;image&quot; src=&quot;http://www.flightmiracle.com" border=&quot;0&quot; name=&quot;submit&quot; alt=&quot;PayPal - The safer, easier way to pay online!&quot;&gt;
    &lt;img alt=&quot;&quot; border=&quot;0&quot; src=&quot;https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width=&quot;1&quot; height=&quot;1&quot;&gt;
    &lt;/form&gt;
    " alt="cart" />
      <area shape="rect" coords="1185,32,1271,77" href="#fmabout" />
    </map>
    </body>
    </html>

  • Spry Tabbed Panels and Pop Up Link from Image Hotspot

    I've created an image map with Hotspot links to either send to another web page or to open a previously created Pop Up window with information.
    I've imported my image, image map and Hotspots into a tab
    The issue I'm having is when clicking on the hotspot (within the Spry tabbed panel), to open the pop up page; it doesn't work
    If I select a Hotspot which sends users to another web page, that works ok.
    Would appreciate it if someone else who has run into this and what your recommendation is for a fix.
    thanks, R Silva

    Hi,
    Unable to post to a public server; however I've attached the files so the code can be reviewed.
    thanks

  • Help needed making background image a clickable link

    Hi guys,
    I want to make the background of my site an advertising background where the background image is clickable.
    I've tried a few tutorials but none seem to be working
    What I've got is this as my CSS...
    #skin {position: absolute;
        width: 100%;
        height: 800px;
        margin-left: auto;
        margin-right: auto;
        top: 0px;
        left: 0px;
        z-index: -1;
        background-position: fixed;
    ...and this as my HTML...
    <div id="skin"><a href=""><img src="background.jpg" /></a></div>
    It kind of works but the link is only a thin strip either side of the screen for some reason and doesn't span the whole image background.
    Does anyone have any ideas as to where I'm going wrong?
    Thank you very much and hope to hear from you!
    SM

    Spindrift wrote:
    Basically, what I want to do is have an advertising skin as the background (can just be a dummy container div to act as the background) of my website, so that it fills the area outside my sites' container div and opens a link when clicked on.
    Does anyone know how I can do this?
    This can be done relatively easily but it's not very pretty. You will need to use a full-size image for the background, unless you plan to repeat it and set the clickable container to exactly that size. See code and screenshot below. Tested in FF, Chrome and IE9.
    <head>
    <style>
    body {
        width:100%;
        height:100%;
        margin:0;
    #background {
        background: #000 url(your-background-image.jpg) no-repeat 0 0;
        display: block;
        height: 1280px; /* change to your image height */
        position: fixed;
        width: 1920px; /* change to your image width */
    #wrapper {
        background-color: #FFFFFF;
        border: 1px solid #333333;
        left: 50%;
        margin-left: -480px; /* half the width */
        min-height: 500px;
        position: absolute;
        width: 960px; /* wrapper width - unclickable area */
    </style>
    </head>
    <body>
    <a href="" id="background"></a> <!-- This is your clickable background -->
        <div id="wrapper"> <!-- This is your non-clickable wrapper -->
            <header>
            </header>
            <main>
            </main>
            <footer>
            </footer>
        </div>
    </body>

  • CSS Background Image - Newbie needs help

    Good Afternoon,
    I'm trying to place a background image in the body of my
    page. Pasted below is the code:
    Questions:
    1. When viewed in the browser, only part of the image can be
    viewed, and no vertical scroll bar is available to view the bottom
    portion of it. Is there a setting to toggle such that the entire
    image can be viewed?
    2. As part of the background image, I have text that I want
    to use as hotspots for links to other pages in the site. Do I need
    to place a table or use some other technique to enable use of
    hotspots?
    Thanks from a very Green Newbie.
    Sid

    > 1. When viewed in the browser, only part of the image
    can be viewed, and
    > no
    > vertical scroll bar is available to view the bottom
    portion of it. Is
    > there a
    > setting to toggle such that the entire image can be
    viewed?
    Background images will never force scrollbars.
    > 2. As part of the background image, I have text that I
    want to use as
    > hotspots for links to other pages in the site. Do I need
    to place a table
    > or
    > use some other technique to enable use of hotspots?
    Yes. You cannot put hotspots on background images. Be aware
    that this is
    the worst (well, publishing a page made in Microsoft
    Word/Publisher is the
    worst) way to make a web page.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "Sid Childers" <[email protected]> wrote in
    message
    news:eksuka$56i$[email protected]..
    > Good Afternoon,
    >
    > I'm trying to place a background image in the body of my
    page. Pasted
    > below
    > is the code:
    >
    > Questions:
    > 1. When viewed in the browser, only part of the image
    can be viewed, and
    > no
    > vertical scroll bar is available to view the bottom
    portion of it. Is
    > there a
    > setting to toggle such that the entire image can be
    viewed?
    > 2. As part of the background image, I have text that I
    want to use as
    > hotspots for links to other pages in the site. Do I need
    to place a table
    > or
    > use some other technique to enable use of hotspots?
    >
    > Thanks from a very Green Newbie.
    > Sid
    >
    > <style type="text/css">
    > <!--
    > body {
    > background: url(Homepage.jpg) no-repeat;
    > }
    > -->
    > </style>
    >

  • Inserting 2 background images in to you site

    I've seen many sites with more than 1 background images. How
    can I do that with Dreamweaver CS3?
    I am very curious and I need to know how to do that. I am a
    newbie. Please don't give me horrible instructions. If you could
    please just give me a link to a tutorial or if it is very simple
    just tell me how to do it =]

    Ok, try this, it will give you something to play with. Copy
    all of the code
    below between the *** and *** and paste it into a new html
    page.
    I did not make the top div 1000px wide, that would cause
    quite a few people
    to scroll left to right, but change it if you prefer. Your
    bottom div will
    grow in size depending on content.
    Now someone else may have a better suggestion for you, but
    this is one way
    you can do what you seem to want to do.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN"
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #topdiv {
    width:90%;
    margin:auto;
    min-height:800px;
    background-image:(right click your mouse, go to Code Hints |
    URL Browser,
    and find your bakcground image file);
    background-position:center;
    background-repeat:no-repeat;
    border:#000066 thin groove;
    background-color:#FFFFCC;
    #bottomdiv {
    width:90%;
    margin:auto;
    border:#3333FF thin groove;
    background-color:#33FF99;
    background-image:(right click your mouse, go to Code Hints |
    URL Browser,
    and find your background image file);
    </style>
    </head>
    <body>
    <div id="topdiv">put 1000 x 800 in the #topdiv css rule
    above in the head
    tag. You will need to put all of your content containers
    inside this div to
    keep bg image inplace.</div>
    <div id="bottomdiv">Put repeating image in #bottomdiv
    in the CSS rule in
    your head tag.. If you have content that is going to match up
    to content in
    the topdiv, you will need to keep same size &
    margins.</div>
    </body>
    </html>
    "Cyberhuntera" <[email protected]> wrote in
    message
    news:[email protected]...
    >I want a background design image(1000x800) center;top and
    a repeating
    > background image(5x5) wich is behind the background.
    >
    > I am novice still, but I want to learn everything about
    HTML.
    > For now I know basic HTML and CSS - almost nothing about
    it :(
    >

  • LinkListExplorer iview BackGround Image path not working

    HI All ,
    As i am using Layout set LinkListExplorer for few external links , when i am giving image name for eg growth.jpg in  background image path,  which is placed at /etc/public/mimes/images it is not showing anything , the same is working for NewsBrowser Layout set  . I have tried many thing all possiblities but no success .
    Pls help me in this regard.
    Shwetang saxena

    Hi Vedant,
    APEX only replaces the #WORKSPACE_IMAGES# variable within APEX itself. This is quite logical, because what you see in the APEX developer space is generated by PL/SQL from the database, so APEX can change what it wants. APEX can't access the files however, that's logical to because APEX would need premissions on the server and an Oracle directoryto start doing changes to files.
    So if you want to point to the image directory in the CSS file you need to provide the full path.
    Regards,
    Joni

Maybe you are looking for