Tiling a background image

I've recently moved over from GoLive, and I am re-doing my site template in DW. I want to do a background image that will expand as needed (be really long on a long page, not so long on a short one, etc.) and can't figure out how. My old one was done as one column of a table, so if the second column kept going, so did the image in the first column (see http://www.bikeraceinfo.com/about-us.html , it's the red/white/green stripe down the left side, and is a separate image from the red/white/green stripe that folds around from the image across the top). I am using a 3-column layout provided by DW ("3 column fixed, header and footer"). I've tried doing a tiled background in the "container", didn't work (nothing showed up at all). Tried a tiled background in "main content", it did put the stripes in, but since "main content" in my layout is centered, that wouldn't work, and it only showed up where there weren't words. Tiling it in the "body" puts it outside of the container, so it doesn't line up with the top graphic, and gets swallowed up and disappears on a small monitor. I tried putting in another div which would contain the tiled graphic, but it didn't seem to understand a height of "100%" to mean that it should go all the way to the bottom of the page. What do I do?
Carol

From what I understand, I think you are looking for a technique called "Faux Columns."
It looks to me as though you are trying to rebuild your set using CSS instead of tables for layout. That's a good idea! I think that you need to be cautious about using height in your layout because the most comfortable position is to allow the content of an element to determine that. Not always of course, but where you have content that changes between pages it will help.
Nancy O shows you a layout using faux columns here:
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
And you can see the image that she has used to make the faux columns here.
http://alt-web.com/Images/BG/tri-color-bg.gif
It would be eaier to advise if you could post a link to the new page and someone could probably tell you exactly which element to put an image into but effectively the image can go in the containing element.
I hope that helps and that I haven't misunderstood your question
Martin

Similar Messages

Tiling a background image in a container

I have a template with header, one sidebar each side, and a main content section (from a DW stock template). The left sidebar has my navigation menu, doesn't even fill the whole screen vertically. The main content section can go on for many screens. I want to put a tiled image (results in some colored vertical stripes) in the sidebar, to start showing up under the navigation menu, and continuing all the way to the end of the main content section. I can get it to do the tiling, but only for the length of the nav menu. I have the following code for this sidebar:
.thrColAbsHdr #sidebar1 {
position: absolute;
top: 190px;
left: 1px;
width: 150px;
height: 100%;
background-image: url(../bikeraceinfo2/images/left.jpg);
background-repeat: repeat-y;
When I inserted the "height: 100%" line, it managed to pull the stripes out about an inch below the nav menu; without that they were completely hidden (but there). The old version, if you want to see what I'm trying to do, is at www.bikeraceinfo.com (that was accomplished by putting it in a table column, so it automatically kept going with the longest column).
How do I convince it to keep going to the bottom of the main content section?

From what I understand, I think you are looking for a technique called "Faux Columns."
It looks to me as though you are trying to rebuild your set using CSS instead of tables for layout. That's a good idea! I think that you need to be cautious about using height in your layout because the most comfortable position is to allow the content of an element to determine that. Not always of course, but where you have content that changes between pages it will help.
Nancy O shows you a layout using faux columns here:
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
And you can see the image that she has used to make the faux columns here.
http://alt-web.com/Images/BG/tri-color-bg.gif
It would be eaier to advise if you could post a link to the new page and someone could probably tell you exactly which element to put an image into but effectively the image can go in the containing element.
I hope that helps and that I haven't misunderstood your question
Martin

Stopping tiling in a table background image

I'm trying to stop the tiling of the background image within
a table in Dreamweaver 8.
It seems to be different then "no-repeat" for the general
background.
Was hoping someone could help me out.
Thanks.

You have no tiling control there at all.
Change this -
<table width="612" height="1081" border="0"
background="ess_web_ad_bg.jpg">
to this -
<table width="612" height="1081" border="0"
background="ess_web_ad_bg.jpg"
style="background-repeat:no-repeat;">
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
==================
"Ro-Dogg" <[email protected]> wrote in
message
news:[email protected]...
> THANKS!
>
>
>
>
> <!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=iso-8859-1" />
> <title>Untitled Document</title>
> <style type="text/css">
> 
> </style>
> </head>
>
> <body>
> <table width="612" height="1081" border="0"
> background="ess_web_ad_bg.jpg">
> <tr>
> <td width="21" height="143"> </td>
> <td width="557"> </td>
> <td width="20"> </td>
> </tr>
> <tr>
> <td height="294"> </td>
> <td rowspan="3" valign="top"> <div
class="style4"><span
> styleclass="style_HeadlineText">Are Your Employees a
Road
> Block?</span></div>
> <div class="style2"><span
>
styleclass="style_HeadlineText"> </span></div>
> <span class="style2"
styleclass="style_HeadlineText">
Did You Know
> That</span>
> <ul class="style2">
>
10%-12% of all applicants have a criminal history
> </li>
>
43% of resumes contain significant inaccuracies about
> experience, education or job ability </li>
>
8.5% of applicants who authorized background checks had
> criminal convictions</li>
>
> <div class="style2">
> <div>
The potential costs and liabilities of
unscreened or
>
insufficiently screened employees are enormous. Employers
can be
> held
> legally and financially responsible for things they
should have known
> about
> their employees.</div>
> </div>
>
> <li class="style2">
Employers lose 79% of all negligent hiring and
> retention lawsuits </li>
> <li class="style2">
Two-thirds of negligent hiring trials result
> in
> average awards of $600,000 in damages </li>
> <li class="style2">
30% of all business failures are caused by
> employee theft </li>
> <li class="style2">
The Small Business Administration estimates
> that
> for every dollar invested in employee screening a $5 to
$16 return is
> generated</li>
>
> <p align="center" class="style1"><span
> styleclass="style_SubheadingText">FOLEY SERVICES INC.
PROVIDES
> COMPREHENSIVE
> EMPLOYEE SCREENING SERVICES TO BUSINESSES OF ALL
SIZES</span></p>
> <div class="style2">
> <div>
We can conduct specific individualized background checks
> in
> all of the areas listed below, or provide screening
service packages
> tailored
> to your needs. </div>
> </div>
> <li class="style2">
Criminal Records Checks: Patriot Act
> Inquiry,
> Sex Offender Registry, Federal and Non-Federal criminal
history checks
>
> </li>
> <li class="style2">
Background and Reference Checks:
> Verification of
> Employment, Education, Reference, Social Security
Numbers, and
> Professional
> credentials </li>
> <li class="style2">
Motor Vehicle Reports </li>
> <li class="style2">
Financial/Healthcare Sanction
> Checks</li>
>
> <span styleclass="style_SubheadingText">
> <p align="left" class="style2">Foley Services has
a 15-year track
> record
> of servicing our client's with professionalism, courtesy
and respect.
> Let
> Foley Services put our expertise and experience to work
for you by
> helping
> you hire the right people for the job.</p>
> </span>
> <div align="center"> </div>
> <div align="center">
Click on the link below for further detailed
> information.<br />
>
<a href="
http://www.foleyservices.com/t-ebc_facts.aspx">FOLEY
> SERVICES EMPLOYMENT SCREENING
SERVICE</a></div>
> <div align="center"> </div> <div
align="center">
or
> Contact:<br />
>
Kirk Spooner<br />
> National Accounts Representative<br />
>
1-800-253-5506 x469
<br />
> <a
>
href="mailto:[email protected]">[email protected]</a></div></td>
> <td> </td>
> </tr>
> <tr>
> <td height="204"> </td>
> <td> </td>
> </tr>
> <tr>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <td height="191"> </td>
> <td> </td>
> <td> </td>
> </tr>
> </table>
> </body>
> </html>
>
>

Create repeating / tiled background images

I may have missed this in the previous versions of Adobe Photoshop.
Is there "a way / or method" to create repeating / tiled background images in photoshop?
Many times a "tile" for a tiled background is quite small at around 150px x 150px.
1:
It would be very nice to be able to work on the tile, be able to zoom in and out of it, and actively see a functioning live tiled background.
Yes it might be a bit like a kaleidescope, but it would be live and you would see any harshness in the pattern and can remedy glitches it in real time.
2:
It would also be very nice to be able to "draw / paint / edit" off the edge of the tile and have the effect carried over to the other side...
Yes just like in Asteroids.
I think creating Tiled BG's is a very strong contender for being one of the more frustrating things I do with Photoshop. I hope the above ideas can be added to PS6.
Just to you you know... DPaint IV for the Amiga did this very well back in 1990'ish.

There will not be any substantial changes to CS6 to add new features beyond the beta. We are too far along in the process for that. To accomplish what you desire, can you use the pattern feature to tile? For any new features you wish to request, you can to to this website http://feedback.photoshop.com/photoshop_family people can vote on the favorite features.
Pattie
Use the Rectangle Marquee tool on any open image to select an area to use as a pattern. Feather must be set to 0 pixels. Note that large images may become unwieldy.
Choose Edit > Define Pattern.
Enter a name for the pattern in the Pattern Name dialog box.

Template Problem: Tiling background image gone and duplicate .swf headers

Problem 1: I have been working with a template, and creating
new files from the template without incident. Recently I created a
new file from the template and found that the tiling background
image (dots appearing on the right and left of the page) was gone.
The tiling image is present in the template, but not in files
created from it. Any guess how I broke that?
Problem 2: In my template I have an editable region wherein I
can place a .swf animation. When I upload my page made from the
template, a pair of .swfs appear stacked on top of each other, not
just the single .swf graphic. Any guess what I am doing wrong
there?
The problem page can be viewed here (
Shop
Page), and the template files are located here (
Template
right-click and Save-As).
I appreciate any help you can offer.
*Using Dreamweaver CS3 on Mac OS 10.5.2

> Regarding that tiling image problem? the image in my
template file has a
> relative address, but when I make a new file from the
template the
> location of
> the image is absolute, and points at my computer.
This will ALWAYS happen when one of the following obtains:
1. The linked file is OUTSIDE the root of the current site.
2. DW *THINKS* that the linked file is OUTSIDE the root of
the current site
(how could this happen? Here's a for example - the path to
the root folder
looks like this -
C:\whatever\joe's files\blah blah blah\thefilename.jpg
Fix either of those issues, and the problem will go away.
Might that be your problem?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"adam@blueapplestudio" <[email protected]>
wrote in message
news:fuo8dk$8sh$[email protected]..
> Thanks to the newsgroup users who have helped out with
this. I will be
> getting
> a newsreader soon, as the Adobe forum seems to be a bit
flawed.
>
> Regarding that tiling image problem? the image in my
template file has a
> relative address, but when I make a new file from the
template the
> location of
> the image is absolute, and points at my computer. This
seems to fix it:
>
> Open the template and make a new file from the template.
> Make a minor change to the template, save, and update
all linked files.
> Undo the change just made to the template, save and
update again.
>
> If you look at the new file-from-template you will find
the file needs to
> be
> saved (as denoted by the asterisk by its name) and the
tiling background
> is now
> corrected.
>
>

Just 1 Background image to fill the browser & NOT tiled images

After reading some of the suggestions given in this forum, I gather that I have to use CSS to get around this problem. What I did was:
in a Notepad text editor, typed & saved as mystyle.css
body
background-image:url('gradient-3-max.jpg');
background-repeat:no-repeat;
(*note: fr the CSS tutorial > How to > external style sheet. I may not have understood it completely.
Reads: ...... Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:)
<head>
<link rel="stylesheet" type="text/css" href="mystyle" />
</head>
I added this tag in my HTML document, however, the background is still tiled.
Where did I go wrong? I am a newbie to flash, so kindly guide me thru each step
Thank you!
Karen

This works in modern CSS3 supporting browsers. But not pre-IE9.
http://alt-web.com/TEST/Resizable-BG.shtml
Nancy O.

How can I make an image tile length of browser without using it as background image?

I understand that if you use the rectangle tool and stretch it to the edge of the page, triggerring the red margin, the tiled image is supposed to stretch the length of the browser. Although this works for width, tiling horizontally, for some reason, it doesn't work for length, tiling vertically. When I preview my work in browser, the tiled image doesn't extend along with the footer as I scroll down the page.
When I use the image as background fill and tile it, then it works, but I need to use a different image for the background.

Hi
As you have mentioned you can either use browser fill with tile fitting or design the browser background image outside of Muse using any image editor like Photoshop and then use as browser fill which would include both images the one you want to use as background image and the one that you want to use as Tile on page section.
Thanks,
Sanjit

MS Word Background image not converting

I have Microsoft Word 2007 & Acrobat Pro 9. I created a document in Word, and that doc has a background image. However, when I try to convert it to a PDF, one of two things happens: 1) the PDF is created with no background image, or 2) the background image is reduced in size & tiled in repeating rows in the background. Neither of these is acceptable! I've tried the following:
From in Word -->Print-->Acrobat PDF
From Acrobat -->Create PDF-->From File
From Word -->Save As-->PDF
From Acrobat-->set background image
This is quite frustrating, since I don't want to re-do everything in Photoshop just to render the PDF properly. I set the image as a background in Word because I want it to cover the whole 8.5"x11" space without any margins. The image is a 95 dpi JPG sized at 8.5"x11"

You may need to check Acrobat and be sure you have Display Large Images selected. If that is not the issue, it may be a setting in your print options of WORD. Programs like WORD and PPT often have the default set to not print background images because they use so much toner in a regular printer. Since you are using a digital printer that option is not needed.

How to save a background image on a mac?

I want to save a background image on this webpage
http://www.twitterbackgrounds.com/tiled-twitter-backgrounds
when I used windows i would just rt click and save background and it would save only the background. when i do that with the mac it saves the whole page. can anyone help me. i can fine any help online. I am new to a mac. alexandra.

HI,
Go here and check out the bottom right side of the page.
http://www.twitterbackgrounds.com/tiled-twitter-backgrounds
Use their e-mail to ask if their images are Mac OS X friendly and if so which Mac OS X version.
Please click My Settings right side of this page and tell us which Mac OS X your MacBook is running.
Thanks! Your forum profile is important... it helps us to help you.
Please do not post twice for the same topic.
http://discussions.apple.com/message.jspa?messageID=10578998#10578998
Carolyn

Why am I having issues with the background image here?

body {
    text-align:left;
    font-family:Tahoma, Geneva, Helvetica, Arial, sans-serif;
    font-size:11px;
    line-height:17px;
    color:#8a8683;
    margin:0;
    padding:0;
* html body {
    overflow:hidden;
* html div#content {
    height:100%;
    overflow:auto;
div#colBg2 {
    width:519px;
    height:100%;
    margin:0 0 0 449px;
    background:url(/images/colBg2.png) repeat-y top;
    z-index:600;
table#colText {
    height:100%;
    width:433px;
    text-align:left;
    z-index:700;
<div id="colBg2">
<div id="colText">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
</div>
What this is supposed to do is show background image colBg2.png as a column extending from the top of the viewport to the bottom, whether there's enough text to fill it or not. If it doesn't, then it shouldn't produce a scrollbar. It uses 100% vertical height hacks, as demonstrated in the code above.
When there's more text than the viewport can handle, there's a scrollbar, and the colBg2 successfully scrolls along with the text contained in colText. HOWEVER... when that background scrolls upwards so we can go down the page, it stops tiling. It stops wherever the viewport ends.
If I stretch the window to reveal more of the column, no problem. It tiles just fine, and extends all the way to the end of the screen. But not if I scroll down.
Anyone know if I'm doing anything wrong with this code, or if there's an obvious fix that isn't occuring to me?

I was just about to prepare that for you guys when I had a quick flash to try applying the background image directly to the table instead
of a containing div. I'm sure there was a reason I used a containing div to begin with, but can't for the life of me remember why right now. I'm sure it'll hit me at some point and I'll probably be back here when it does, but so far eliminating the containing div altogether has produced the desired effect. =)

Background Images Do Not Display

Hi --
On this page:
http://www.thelegatogroup.com/test/
I have the DIVs #left and
#right and each has a background image. My problem is that
neither display
either in preview or when live. I can, however, see the
images in DW's
design view.
The DIV #left should display this image:
http://thelegatogroup.com/test/assets/backgrounds/home_piton.jpg;
The DIV #right should display this image:
http://thelegatogroup.com/test/assets/page_elements/divider.jpg
The CSS appears correct and the rules point to the correct
files, the images
are on the server, the page validates, and yet no images.
Can someone take a look and help me see what I'm missing?
Thanks,
John

Good luck! 8)
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Tarvardian" <[email protected]> wrote in message
news:[email protected]...
> Because I don't use background images very often, and I
didn't know any
> better. Now I do.
>
> Thanks for your help. I appreciate it.
> John
>
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
>> Remove this -
>>
>> background-attachment: fixed;
>>
>> You don't need it. Why did you use it?
>>
>> --
>> Murray --- ICQ 71997575
>> Adobe Community Expert
>> (If you *MUST* email me, don't LAUGH when you do
so!)
>> ==================
>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>> ==================
>>
>>
>> "Tarvardian" <[email protected]> wrote in
message
>> news:[email protected]...
>>> Hi Murray --
>>>
>>> Thanks for taking a look. You were right...the
path was incorrect. But
>>> fixing that, unfortunately, doesn't fix the
problem. I've even used an
>>> absolute page for below file, and it still
doesn't display correctly.
>>> Oddly enough, when I use remove the rule:
background-repeat: no-repeat;
>>> the image appears. It's tiled -- which I don't
want -- but it appears.
>>>
>>> Any idea what's going on?
>>>
>>> John
>>>
>>>
>>> "Murray *ACE*"
<[email protected]> wrote in message
>>> news:[email protected]...
>>>> Your links are incorrect.
>>>>
>>>> background-image:
url(../assets/backgrounds/home_piton.jpg);
>>>>
>>>> This one implies that the image would be
here -
>>>>
>>>>
http://www.thelegatogroup.com/assets/backgrounds/home_piton.jpg
>>>>
>>>> but it's not - it's here -
>>>>
>>>>
http://www.thelegatogroup.com/test/assets/backgrounds/home_piton.jpg
>>>>
>>>> --
>>>> Murray --- ICQ 71997575
>>>> Adobe Community Expert
>>>> (If you *MUST* email me, don't LAUGH when
you do so!)
>>>> ==================
>>>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>>> ==================
>>>>
>>>>
>>>> "Tarvardian" <[email protected]>
wrote in message
>>>> news:[email protected]...
>>>>> Hi --
>>>>>
>>>>> On this page:
http://www.thelegatogroup.com/test/
I have the DIVs
>>>>> #left and
>>>>> #right and each has a background image.
My problem is that neither
>>>>> display
>>>>> either in preview or when live. I can,
however, see the images in
>>>>> DW's
>>>>> design view.
>>>>>
>>>>> The DIV #left should display this image:
>>>>>
http://thelegatogroup.com/test/assets/backgrounds/home_piton.jpg;
>>>>> The DIV #right should display this
image:
>>>>>
http://thelegatogroup.com/test/assets/page_elements/divider.jpg
>>>>>
>>>>> The CSS appears correct and the rules
point to the correct files, the
>>>>> images
>>>>> are on the server, the page validates,
and yet no images.
>>>>>
>>>>> Can someone take a look and help me see
what I'm missing?
>>>>>
>>>>> Thanks,
>>>>> John
>>>>>
>>>>
>>>
>>
>

Background Image on a Component

How do I add a background image to a component, in this case, a scrollpane containing a drawing area. This is for a level editor for my game. I want a level's background image to be drawn and tiled so the user can get a better preview of what the level will really look like. Is there an easy way to do this?

Do you have a little code-snippet on how to use this
class? The only things I've ever needed to do in
graphics is loading, transforming, and drawing images,
so I'm a bit in the dark on anything outside that.I think something like this will do it. I don't know for sure though since I've never used it:
private BufferedImage bImage;
// ... constructors, code blahdy blah, construct the bufferedimage here etc.
public void paintComponent(Graphics g) {
// the Rectangle2D in user space used to anchor and replicate the texture:
Rectangle2D anchor = new Rectangle2D.Double(0,0,20,20);
// the actual paint object:
TexturePaint tpaint = new TexturePaint(bImage, anchor);
Graphics2D g2d = (Graphics2D) g;
g2d.setPaint(tpaint);
// g2d.fillRect(0,0,getWidth(), getHeight());
}

Background Images on Frame

I'need put a Image as a background of my Frame (.java) and not see on awt, swing and otrher user controls this option. How i'do to make this?

Hi,
try
public class VendingPanel extends JPanel {
private ImageIcon   backgroundImage = new ImageIcon(this.getClass().getResource("coffeebckg.jpg"));
     * Implements the code needed to show the background image. Note that all
     * panels that are placed on top of the background image <b>must</b> have opaque
     * set to false
     * @param g
    public void paint( Graphics g )
        // First draw the background image - tiled
        Dimension d = this.getSize();
        for( int x = 0; x < d.width; x += backgroundImage.getIconWidth() )
            for( int y = 0; y < d.height; y += backgroundImage.getIconHeight() )
            g.drawImage( backgroundImage.getImage(), x, y, null, null );
            // Now let the regular paint code do it's work
            super.paint(g);
}Frank

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

Is there a way to control how a background images appear on all browsers?

I have created a site that includes a fixed background image so that the only thing that scrolls is the main container that holds all the content. But I don't want it tiled. I want this one image to fill the entire screen behind the container. Is this possible to control from my end (by settings or by sizing the image in a certain way) or is this something that I can't control at all?

This http://www.onextrapixel.com/2012/03/02/using-css-background-size-responsively/ may help

Tiling a background image

Similar Messages

Maybe you are looking for