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. -
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.
BarryGoogle 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 -
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.
LioleePutting 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="#<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XDVDENF8NGXZN">
<input type="image" src="http://www.flightmiracle.com" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
" alt="Cart" />
<area shape="rect" coords="1206,263,1422,307" href="#<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XDVDENF8NGXZN">
<input type="image" src="http://www.flightmiracle.com" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
" 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 SilvaHi,
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!
SMSpindrift 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 saxenaHi 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
-
How to get the Last cell in HSSF (Apache's POI)?
Dear experts, Please show me how to get listof sheet names in an excel file. Thanks.
-
Table for output type of a delivery document
Hi guys, Would you know where could I find the output type of a delivery document espcially after I posted a GI in Shipment? Basically, It should reflect in devlivery document. So I am not sure if I should look at the delivery tables or goods issue.
-
External hard drive sometimes not appearing in Finder
I bought an external hard drive in a Smart Drive 2.5" HDD enclosure for use with my MacBook. Sometimes it works perfectly when I plug it into my USB, but sometimes it doesn't show in finder. If I wait for a long time it will usually show up eventuall
-
Problems Using Image Processor to Resize Images
Hello, I'm perplexed on this one. In the past, I've used scripts in Photoshop to downsize my large Camera RAW images to an appropriate 1920 x 1080 size for subsequent export to Premiere Pro. Worked like a charm numerous times. Now, when I t
-
Need help to connect from MacBook Air to a Dell 1610HD projector.
I need to mirror the display on my MacBook Air to a projector, I've gone to the System Preferences and it detects my Apple TV but not the Projector need help.