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

Similar Messages

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

Promoted Links Tile Background Image Size Issue

I am brand new to using sharepoint and I am having an issue with the images attached to the promoted link tiles. No matter what size I change the file too, I can not get the tile to show the whole pictures.
I have tried changing the image size for multiple different pictures in both photoshop and illustrator to 128px and 150px, with no luck!
Does anyone have any advice on how to make the pictures fit in the tiles or how to start with an illustrator or indesign image and format it correctly to display in the tile view?
As many details as possible will help since I just started using this program!
Thank you!

Hi,
According to your description, my understanding is the promoted link tile can’t show the whole image.
By default, When image with a blank space around, it would be transformed properly in promote link tile, I suggest you modify the image to make it with blank space around.
For about modifying image, I suggest you post a question to the corresponding forum such as Photoshop forum:
https://forums.adobe.com/community/photoshop
Feel free to reply if there are still any questions.
Best regards
Patrick Liang
TechNet Community Support

Loading background image

Hey all i'm having a little difficulty loading an image as a background. This is the code currently used to create several panels and add to a main container:
import java.awt.*;
import java.awt.event.*;
import java.util.Random;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.*;
import java.io.*;
public class MainPanel extends JFrame implements ActionListener {
     private JMenuItem newGame, endGame, exitApplication; // File menu items
     private JRadioButtonMenuItem easyLevel, mediumLevel, hardLevel; // Level menu items
     DiePanel diePanel;
     QuestionPanel questionPanel;
     PicturePanel board;
     public MainPanel (){
          // Call & set up DiePanel
          diePanel = new DiePanel();
          diePanel.setBorder (BorderFactory.createEtchedBorder());
          diePanel.setPreferredSize(new Dimension(254,86));
          diePanel.setVisible(true);
          // Call & set up QuestionPanel
          questionPanel = new QuestionPanel();
          questionPanel.setBorder (BorderFactory.createEtchedBorder());
          questionPanel.setPreferredSize(new Dimension(304,86));
          questionPanel.setVisible(true);
          // Call & set up BoardPanel
          board = new PicturePanel(diePanel, questionPanel);
          board.setPreferredSize(new Dimension(622,622));
          board.setVisible(true);
          diePanel.setBoard(board);
          // Add panels to container
          Container c = getContentPane();
         c.setLayout (new FlowLayout());
         c.add(diePanel);
         c.add(Box.createHorizontalStrut(20));
         c.add(questionPanel);
         c.add(board);And i create the main JFrame with this:
import javax.swing.JFrame;
import javax.swing.SwingUtilities;
public class Main {
     public static void main(String [] args) {
         SwingUtilities.invokeLater(new Runnable() {
              public void run() {
                   JFrame MainPanel = new MainPanel();
                   MainPanel.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                   MainPanel.setSize(800, 800);
                   MainPanel.setVisible(true);
                   MainPanel.setTitle("Math's Mayhem");
}I've tried numerous ways to try and load an image but to no avail! Do i need to use layered panes or is there a more simple way?

Anand_EKM wrote:
Also meanwhile you can visit the link [Setting Background Image on JFrame|http://javaallinone.blogspot.com/2008/03/setting-background-image-on-jframe.html]
The code presented in the link above (probably) works, but should NOT be copied verbatim! It has several problems:
1. That code loads and creates the image each time the JPanel's paintComponent() method is called, which is terribly inefficient. It should be modified so that the image is loaded once (when the JFrame or JPanel is first created) and cached. paintComponent() should then simply call g.drawImage().
2. You should also create the Image via ImageIO.read() rather than new ImageIcon(...).getImage() as done in that example, to avoid unnecessarily creating an ImageIcon. It's not a huge deal, but your code will be cleaner and more readable.
3. I'm not sure why this example wants to do things such as setting the preferred/minimum/maximum sizes and layout used in the paintComponent() body.
Edited by: BoBear2681 on Apr 2, 2008 12:48 PM

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

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

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">

</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?
>
>

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.

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> 
    <div id="wrapper"> 
        <header>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>

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

Won't display background image in browser.

My background image displays in dreamweaver and in the live view but it doesn't display in the browser when I try to view in a browser or when I publish the website. I have spend hours looking for a solution and I am not sure what the problem is. I have checked the code on the following websites and it comes out ok:
http://jigsaw.w3.org/css-validator/validator
http://validator.w3.org/check
I have also tried my code with and without the overflow: hidden; under #container where the image should be displayed. (i was trying a new way to design -ie without basic grid and floating everything so the container can be removed if needed)
here is my code. Please help!!! thank you in advance!!!
<!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>Jan Kardys' Literary Agency</title>
<style type="text/css">
#header {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    float: left;
    width: 930px;
    color: #3F9;
#Menu_bar {
    float: left;
    width: 190px;
#Page_Content {
    float: right;
    width: 725px;
    height: 500px;
#footer {
    float: left;
    width: 930px;
#Main_content {
    float: left;
    width: 510px;
#xtra_content {
    float: right;
    width: 190px;
#container {
    width: 930px;
    margin: 0 auto;
    background-image: url(/Images/Parchment.gif);
    overflow: hidden;
</style>
<script src="file:///C|/Users/james/Documents/DREAMWEAVER SITES/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/james/Documents/DREAMWEAVER SITES/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
</style>
</head>
<body>
<div id= "container">
<div id="header"><h1>Jan kardy's Literary Agency</h1></div>
<div id="Menu_bar">
<ul id="Vertical_menubar" class="MenuBarVertical">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Jan Kardys</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Rescources</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Education Connection</a>
        </li>
        <li><a href="#">Submission Guidelines</a></li>
        <li><a href="#">First Steps to Publishing</a></li>
        <li><a href="http://advancenetworkingunicorn.blogspot.com/">Advanceced Networkinig Blog</a></li>
        <li><a href="#">Library & Publishing Events</a></li>
</ul>
    </li>
    <li><a href="#">Client Links</a></li>
    <li><a href="#">Art Gallery</a></li>
    <li><a href="#">Contact Jan Kardys</a></li>
</ul>
</div>
<div id="Page_Content">
<div id="Main_content">Content for id "Main_content" Goes Here</div>
<div id="xtra_content"><h3>News & Events
    </h3>
    <p><a title="http://scotlandpubliclibrary.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://scotlandpubliclibrary.org/">Scotland Public Library</a>, Scotland, CT April 21, 2011 6-8pm<br />
</p>
    <p><a title="http://www.plymouthct.us/library.htm" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://www.plymouthct.us/library.htm">Plymouth CT Library</a>, Plymouth, CT April 30, 2011 10am<br />
    </p>
    <p><a title="http://www.hplct.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://www.hplct.org/">Hartford Public Library</a>, Hartford, CT May 7, 2011 10am<br />
    </p>
    <p><a title="http://www.middleburghlibrary.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://www.middleburghlibrary.org/">Middleburgh Library</a>, Middleburgh, NY May 14, 2011 1pm<br />
    </p>
    <p><a title="http://dewlib.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://dewlib.org/">Dewitt Community Library</a>, Dewitt, NY June 21, 2011 7pm<br />
    </p>
    <p><a title="http://gilfordlibrary.org/gpl/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://gilfordlibrary.org/gpl/">Gilford Public Library</a>, Gilford, NH July 7, 2011 6:30-7:30pm<br />
    </p>
    <p><a title="http://www.athollibrary.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://www.athollibrary.org/">Athol Public Library</a> Athol, MA July 14, 2011 5:30pm<br />
    </p>
    <p><a title="http://www.goshenpublib.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://www.goshenpublib.org/">Goshen Public Library</a> Goshen, CT July 23, 2011 11am<br />
    </p>
    <p><a title="http://columbiactlibrary.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://columbiactlibrary.org/">Saxton B. Little Free Library</a>, Columbia, CT July 26, 2011 6:45pm<br />
    </p>
    <p><a title="http://hampden-library.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://hampden-library.org/">Hampden Public Library</a>, Hampden, MA Sept. 10, 2011 10:30am<br />
    </p>
    <p><a title="http://fortlee.bccls.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://fortlee.bccls.org/">Fort Lee Public Library</a>, Fort Lee, NJ Sept. 14, 2011 7:00pm<br />
    </p>
    <p><a title="http://prosserlibrary.info/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://prosserlibrary.info/">Prosser Public Library</a>, Bloomfield, CT October 3, 2011 6:00-8:00pm<br />
    </p>
    <p><a title="http://iwwg.org" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://iwwg.org">IWWG. org</a>, New York City, October 16, 2011 2:30-6pm<br />
    </p>
    <p><a title="http://www.hchlibrary.org/" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://www.hchlibrary.org/">Henry Carter Hull Library</a>, Clinton, CT October 24, 2011 6:30pm<br />
    </p>
    <p><a href="http://town.canton.ma.us/library" title="http://town.canton.ma.us/library">Canton Public Library</a>, Canton MA Janurary 7, 2012 2:00pm<br />
    </p>
    <p><a href="http://www.town.sturbridge.ma.us/Public_Documents/F0000F86A/library" title="http://www.town.sturbridge.ma.us/Public_Documents/F0000F86A/library">Joshua Hyde Library</a>, Sturbridge, MA March 24, 2012 10:30am<br />
    </p>
    <p>Otis Library Norwich, CT April 14, 2012 12:00am-2:00pm<br />
    </p>
</div>
</div>
<div id="footer"> <h6>Webpage designed by James S. Molina</h6></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("Vertical_menubar", {imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</div></body>
</html>

In regard to the files you currently have on your server, the links to your Spry menu files are still pointing to your local computer. This is caused when a site has not yet been defined in Site Manager, so DW is forced to link them locally.
To fix your page, just go into code view and remove the part of the link path that I have underlined and made BOLD.
<script src="file:///C|/Users/james/Documents/DREAMWEAVER SITES/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/james/Documents/DREAMWEAVER SITES/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

Background Image in JPanel.

Hi, I am trying to set a background image to my JPanel. So far everything ok. However When I add labels to this panel as well the image is displayed but the label is not! I tried to make a search on google, and I found some links pointing to this forum, however none of them (which) I have seen show how to display a backgroun image and a label on top.
What I tried to to is override the paint method of the JPanel. Here I did the following code:
public void paint(Graphics g){
   Image i = this.myImage // Were myImage is of type Image with a loaded image in.
   g = super.getGraphics();
   g.drawImage(i, 0, 0, this);
   super.paint(g);
}However this code brings the label and the image always blinking. I can imagine the reason for this is that the paint method is called all the time, and thus the image and the label are being painted all the time and so there is the blinking effect.
Does anyone know how I can set a background image to my JPanel in an efficient way?

No Gosling? I just retried it and it works for me.
Maybe you're having trouble with the image URL.
Try it with a local image.

Link on background image

Similar Messages

Maybe you are looking for