Background Image repeating for table cells

I am trying to put different images as the background to all
the cells in a table, so I can put text over the top of them, but I
cant have an image without it repeating. Ive tried going into the
code and adding background-image: "no-repeat" but that hasn't
worked. I know nothing of CSS and it seems really confusing - so if
this is the answer please give me CSS for dummies instructions.
Layers drive me bonkers as no 2 browsers display them in the same
place.
URL is:
http://www.visionsportsmedia.com/BillyTestSite/test
At the moment only cell one is a background image, the rest
are images inserted normally.
Hope you can help.
Thanks.

Your question reflects the confusing mess your life will be
if you persist
with web authoring without taking the time to learn some HTML
and CSS.
You have -
<th height="351" colspan="6" "scope="col">
Note the extra doublequote just before 'scope'.
Also note that your preloads (look at the body tag) as well
as your image
swaps (look elsewhere - everywhere you see 'file:///') are
all broken -
pointing to files on your hard drive. Finally, you might want
to just think
about making a page where there is no readable content
(everything here is
in images). It will get a zero search engine ranking....
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
==================
"little bob" <[email protected]> wrote in
message
news:gqo8jh$ejo$[email protected]..
>I am trying to put different images as the background to
all the cells in a
> table, so I can put text over the top of them, but I
cant have an image
> without
> it repeating. Ive tried going into the code and adding
background-image:
> "no-repeat" but that hasn't worked. I know nothing of
CSS and it seems
> really
> confusing - so if this is the answer please give me CSS
for dummies
> instructions. Layers drive me bonkers as no 2 browsers
display them in the
> same
> place.
>
> URL is:
http://www.visionsportsmedia.com/BillyTestSite/test
>
> At the moment only cell one is a background image, the
rest are images
> inserted normally.
>
> Hope you can help.
>
> Thanks.
>

Similar Messages

Background image in a table

Older versions allowed you to insert a background image into a table or cell. CS4 does not have that option. Does anyone know how to do this. Thanks

You need to use CSS to create a rule so that the table cell shows a background image. Example: Place the following in the head of your document, or take the style and place it in your current stylesheet.
CSS:
<style type="text/css">
.cellback {
background: url(pics/bckgroundhor.jpg) no-repeat; /* this background will not repeat */
</style>
HTML:
and then give the cell the class of cellback
<td class="cellback">
Example here:
http://www.dreamweaverresources.com/tutorials/pagebackgrounds/cellbackground.htm

How to insert an in-line image into a table cell using Pages on OS X?

How can I insert an image into a table cell using Pages (OS X) without it becoming the cell background? I want it to be a regular in-line image, but can't figure out how to do this for the life of me. Thanks!

Welcome to Discussions.
To insert an image into a cell, select the cell, then go to the Graphics Inspector and from the Fill drop down choose Image Fill and then select then image you want. You can now select from a new drop down how you want the image to fit.
Walt

NavBar Background Image repeats in Netscape

Portal generates the following HTML to place an image in a NAVBAR:
<TABLE BORDER="0" class="RegionBorder" background="http://www.gevityhr.com/pls/portal30/docs/293.GIF" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
This works great in IE 5.0 the image shows up once. In Netscape 4.x the image repeats for each navbar element.

On Sun, 25 Jun 2006 00:29:18 +0000 (UTC), "Hydrowizard"
<[email protected]> wrote:
> Also for some reason the background image in the navbar
div is not shown in
>macs using firefox and mozilla (internet explorer in macs
shows it) and linux
>users. What is the cross browser solution for this?
Thanks
Could it just be timing out? The server is EXTREMELY slow.
Gary

Background image in a table not in the document

hello forum, i would like to put a background image in a table so that I am able to put things on top of the image and so it moves with the table. I can only figure out how to do it in the page properties so that it is static on the page. Can anyone please tell me if what I am trying to do is possible? thank you in advance. Jim.

Hi John,
thanks for your hint, now I've got it. And so I was able to integrate/to play with Gramps hint in some variations too.Hans-G.

Scaling of images in a table cell

Hi,
I have an issue aboute the scaling of images in a table cell. The table layout is fixed but the images can vary. I tried to transform the images but every time the transformation matrix has a scaling != 1.0 the function results in an error.
The following code is used.
PageItem pi = myCell.getNthChildPageItem(0);
TransformationMatrix[] matrix = pi.transformValuesOf(kCoordinateSpacesInnerCoordinates.value);
TransformationMatrix scalemat = matrix[0].scaleMatrix(OptArg.makeDouble(0.5), OptArg.makeDouble(0.5));
Unit[] matValues = UnitUtils.createDouble(scalemat.getMatrixValues());
pi.transform(
enums.kCoordinateSpacesInnerCoordinates.value,
VariableTypeUtils.createEnumeration(enums.kAnchorPointCenterAnchor.value),
VariableTypeUtils.createUnitList(matValues),
OptArg.makeVariableType(VariableTypeUtils.createEnumeration( enums.kMatrixContentScaleValues.value ) ),
OptArg.noBoolean()
Any suggestions?
Regards,
tom

Hi!
You may try to vary the settings for property "type"
navigation
function
reporting
result
If this does not help to solve your issue open a ticket at SAP Support.
There are several UIElements which show such a behaviour and you have no (documented) chance to change this.
Hope this helps.
Regards,
Volker

Main Wrapper, Container and background-image repeat problem-and Footer :-)

Hi everyone,
First off, i tried almost every idea i could get to solve this on my own but now im...aaa...
Well, the problem is i have a main wrapper with a background image repeat. A header,menu, body container - which has a left column and right column. I want that main wrapper,body container and both of the columns to grow auto according to content. I tried the height:100%. When i float the columns the text from left column spills over on to the footer. The left column also does not autogrow towards the footer?! I was able to set the footer at the bottom which i want it to remain at the bottom of the main wrapper, but the main wrapper and the columns do not grow automatically...I guess it has something to do with float and the clear properties but what???
body{
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
font-size: 11px;
font-family: verdana;
text-align: center;
background:url(back_index3.png) repeat-x scroll 0 0 #E4E4E4;
#main_wrapper {
width: 959px;
margin:0 auto;
margin-top:80px;
background:url(backslice.png) repeat-y;
height:auto;
min-height:800px;
#header {
width: 959px;
margin-left: auto;
margin-right: auto;
height:119px;
background:red;
padding-top: 0px;
padding-bottom: 0px;
#topmenu {
background-color:#blue;
height:30px;
margin:0px;
width: 959px;
margin-left: auto;
margin-right: auto;
#body_container {
height:100%;
width: 949px;
margin: 0 auto;
#content {
float:left;
width: 645px;
background:yellow;
border-right:1px solid #ffffff;
padding:10px;
height:100%;
text-align:left;
#sidebar {
float:left;
width: 283px;
background:#234234;
height:100%;
#footer {
clear:both;
height:200px;
background-color: #686768;
margin:0 auto;
border-top: 1px solid #F6F6F6;
text-align:center;
width: 100%;
<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<div id="footer">
asd
</div>
</body>
</html>
Thanks in advance if somebody can help me out here.
you can see an image of the problem in the attachement down thr... thnx

<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<br clear="all" />
<div id="footer">
asd
</div>
</body>
</html>
Hope this will work well

Preview what a background 'Image Repeat' will look like?

I want to preview some website background images that I have which are 1 pixel wide without having to upload to the website and refresh the page. Is there a way to preview images repeating in either Adobe Bridge or Adobe Photoshop or any product in the Adobe Creative Cloud for that matter without having to upload to the website and refresh the page? I would ideally like to scroll through the images and have it simulate the repeat horizontal style.

Not sure that is what I'm looking for.
I have over 2000 different gradients for website backgrounds that I just want to scroll through to pick the one I want but I need the image to repeat horizontally so that I can see it because it's only 1 pixel wide ...
Ideally, I would like to just be able to hit my arrow key down and down and down and preview what the background would look like super quickly so I can pick the one I like best.
Hopefully that makes better sense.
Thanks!
Something like this website, but where i don't have to upload files to the web.
http://lab.rails2u.com/bgmaker/

Background image in a table 3x3

I have a tables set 3 x 3
I wish to have a different coloured circle background in
each.
I have created a .bmp file and tried to add it but it just
fills the box with the colour of the .bmp file
I have also resized the .bmp file and still it does the same
even when the file size was 10x10 dpi
Please can someone tell me what I am doing wrong.
I am using dreamweaver and selecting .bmp as the BG file in
the properties of each box within my table.
I think it only does the BG colour, but why is it asking for
a file?
<table width="40%">
<tr>
<td background="grey dot bg.bmp">
<div align="center">a</div></td>
<td background="blue dot bg.bmp">
<div align="center">b</div></td>
<td><div align="center">c</div></td>
</tr>
<tr>
<td><div align="center">d</div></td>
<td><div align="center">e</div></td>
<td><div align="center">f</div></td>
</tr>
<tr>
<td><div align="center">g</div></td>
<td><div align="center">h</div></td>
<td><div align="center">i</div></td>
</tr>
</table>
is there an easier way?
thanks for your help.

You should be using css, not background image via the
property inspector.
Here's an example you can examine. Look at the css code in
the head of the
document.
http://dreamweaverresources.com/forum/circles/
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.macromedia.com/devnet/dreamweaver/css.html
- CSS Tutorials
"not very clever" <[email protected]> wrote
in message
news:e34drk$lhb$[email protected]..
>I have a tables set 3 x 3
>
> I wish to have a different coloured circle background in
each.
>
> I have created a .bmp file and tried to add it but it
just fills the box
> with
> the colour of the .bmp file
>
> I have also resized the .bmp file and still it does the
same even when the
> file size was 10x10 dpi
>
> Please can someone tell me what I am doing wrong.
>
> I am using dreamweaver and selecting .bmp as the BG file
in the properties
> of
> each box within my table.
>
> I think it only does the BG colour, but why is it asking
for a file?
>
>
>
> <table width="40%">
> <tr>
> <td background="grey dot bg.bmp">
> <div align="center">a</div></td>
> <td background="blue dot bg.bmp">
> <div align="center">b</div></td>
> <td><div
align="center">c</div></td>
> </tr>
> <tr>
> <td><div
align="center">d</div></td>
> <td><div
align="center">e</div></td>
> <td><div
align="center">f</div></td>
> </tr>
> <tr>
> <td><div
align="center">g</div></td>
> <td><div
align="center">h</div></td>
> <td><div
align="center">i</div></td>
> </tr>
> </table>
>
>
> is there an easier way?
>
> thanks for your help.
>
>
>

Can I Place an Image in a Table Cell?

I have a table in ID CS3. Can I place an image in one, or more than one, table cell? I see a place to manage fills, but don't see an option for images.

I am working on a calendar project and variously want to: (1) put an individual image in a box, (2) put a continuous image behind more than one box like two dates side by side, (3) put a continuous image in multiple boxes that although they constitute a multiple of boxes, might not be rectangular, (4) put text over any or all of the preceeding.
I can places gridlines on the page, create text and image boxes for for each date, and the join the images boxes as necessary. Then for the box lines I could use an empty table or I could draw them individually and group them. This would get me what I want. I just thought this might be done easier with a table.

Problem with images inside of table cells

I've run into a problem on this web page:
http://www.solidrocknet.org/index2.html
The the background of the table cells which contain an image
is showing
through in the form of a strip at the bottom of the cell. You
can see
this as a black strip in the cells which contain the logo
graphic,
centerpiece photo, and the photo strip and as a blue strip
under the 4
separate photos on the bottom.
These problems are appearing in Firefox. It almost looks
correct in
IE6/7 except that the blue strip appears under the bottom
photos.
Can anyone see what I am doing wrong?

The best practice is to include -
a img { border:none; }
in your CSS so that any image inside an anchor tag is
prevented from having
the border.
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
==================
"K0rrupt" <[email protected]> wrote in
message
news:f5i5fc$bhp$[email protected]..
> sometimes browsers like to display a blue lines around
pictures. So as
> good practice you should add it.
>

CSS - background image repeat-y

Hello,
QUESTIONThis works great in IE v6.0. How can I get the
background position to work in Firefox 2.0?
Instead of a tiled background that I can control where it
begins to tile within a DIV, in Firefox 2.0 it displays
the image once and doesn't tile like it does in IE. Argh!
background-image:
url(images/SideNav/side_nav_bottom_repeat.gif);
background-repeat: repeat-y;
background-position: 0% 218px;
I just went through a CSS training video and applied some of
the things taught.
It was very helpful thanks you. However it worked in IE but
not in Firefox.
http://movielibrary.lynda.com/html/modPage.asp?ID=279
5. Adding Colors and Backgrounds
Movie: Positioning backgrounds
Is there a work around for Firefox?

Zero is zero no matter what units you have on it. I am not
aware of any
mixed unit issue like that.
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
==================
"Alexander Ross" <[email protected]> wrote in message
news:f0rkhi$kht$[email protected]..
>I have some vague recolection about weird behaviors with
mixed units. Try:
>
> background-position: 0px 218px;
>
> If not, post a link to your page
>
>
>> background-image:
url(images/SideNav/side_nav_bottom_repeat.gif);
>> background-repeat: repeat-y;
>> background-position: 0% 218px;

Background image repeat-y not showing

I have done a search here without success.
I have a rough setup of a site that will show the background
repeat-y in a div in IE but will not display it in firefox or
safari.
My css and and xhtml validate W3C.
I am no pro and have tried several things I can think of
without any luck.
Here is the url
http://www.asmc.ca/index2.html
Thanks in advance

The problem was that the div on which the background image
was applied was
collapsing around its non-floated descendents. You needed to
do something
to clear those floats before closing the div#innerwrapper.
The
'overflow:hidden' style forces the browser to establish a new
block context
for that div, effectively clearing the floats within, and
allowing the div
to wrap even the floated elements.
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
==================
"Bryan628" <[email protected]> wrote in
message
news:g6qsdt$350$[email protected]..
> Thanks Murray,
> That did the trick. So it was happening for 2 reasons?
> 1 the div I had it on?
> 2 the overflow hidden code?
>
> What does the overflow hidden mean/do
> And thanks again guys
>
>
>
quote:
Originally posted by:
Newsgroup User
> Change your #innerwrapper rule to this -
>
> #innerwrapper {
> height: auto;
> width: 768px;
> background: url(images/body_bkgrnd.jpg) repeat-y;
> overflow:hidden;
> }
>
> and see if that helps.
>
> --
> 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
> ==================
>
>
> "Bryan628" <[email protected]> wrote in
message
> news:g6qqk1$1ag$[email protected]..
> > And thanks for your time.
> >
http://www.asmc.ca/index2.html
> >
> > Bryan
>
>
>
>
>

Spry Menu Bar - Different Background Image Wanted for menu items

Hi, I've looked everywhere for help with this and just haven't found any answers yet ...
I want my Dreamweaver CS5.5 menu to look like this design I've done in PhotoShop ...
It's a simple one level list with no sub-levels.
Everything is good, except I can only set one background image for all the menu items at this level.
I want the first, last, and all the middle, menu items to use different background images.
I have no idea where or how to insert the code to set a different background image for each individual menu item ...
I know I could use images set one on top another in a column with rollover image swop, but the spry menu opens the door for dynamic content so I'm keen to get it working.
Manchester city council has a great example of this style of menu design working at - http://www.manchester.gov.uk/
They've got funky indenting of the text as well.
~~~~~~
This is the code for my menu list ...
<div class="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Groups</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
         <li><a href="#">Help</a></li>
    </ul>
</div>
This is how I set the background image (but I can only define one image) ...
I set the image background to "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg" through ...
CSS Styles
SpryMenuBarVertical.css
ul.MenuBarVertical a
I then select the background category
and browse to the image file.
doing this changes my CSS code as follows ...
ul.MenuBarVertical li
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 170px;
    margin-top: 4px;
    margin-bottom: 4px;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical ul
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 170px;
    left: -1000em;
    top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #0000;
    text-decoration: none;
    font: normal 12px Verdana, Geneva, sans-serif;
    background: #EEE url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
~~~~~~
These are the three images I want to apply to the top middle and bottom menu items :
Top menu item background image - "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg"
Middle menu items background image - "Menu-Nav-Bar-Pic-Mid-v1-w170px-h32px.jpg"
Bottom menu item background image - "Menu-Nav-Bar-Pic-Bot-v1-w170px-h32px.jpg"
~~~~~~
As I am unable to set the menu items individually, this is how the menu looks like on my website at the moment ...
~~~~~~
So near yet so far ! I'm hapy with the verdana font, the image size and spacing, but the background images I just can't set them right.
I'd really appreciate any help on this as I'm out of ideas.
Thank you.

The easiest way is to use pseudo elements.
To style the first and last menu items ifferently to the rest, merely add :first-child and :last-child respectivly as follows
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarVertical li:first-child a {
    background-color: red;
    color: white;
ul.MenuBarVertical li:last-child a {
    background-color: green;
    color: yellow;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
In your case, in liue of the background colour, you would have an image.
Gramps

Placing text beside image in a table cell?

I'm creating business cards (using a Printworks template), and I want to place text to the right of the inserted picture.
I've copied and pasted the jpg fine onto the left side of the cell, yet when I try to type text, the cursor only lets me begin typing at the bottom right side of the photo, not up at the top right side, where I want the info to start.
Further, when I try to insert a Text Box into the cell, it won't go inside.
So, my question: *How do I get image and text together inside a table cell?*

I made an ultimate test.
I grouped a jpeg picture and a shape in which I inserted a piece of text. You may see it on the screenshot.
I inserting the group in the cell hoping that the group will be correctly displayed.
Nada, only the picture appears.
If I select the object embedded in the cell, copy it, paste it in an other location, I may ungroup it but the now separated shape no longer contains the original text
Yvan KOENIG (VALLAURIS, France) lundi 7 juin 2010 17:55:18

Background Image repeating for table cells

Similar Messages

Maybe you are looking for