Help with repeating background image

At
http://www.hammerstones.net/music1.htm,
i've inserted an iframe that seems to prevent the right edge
background image from displaying. You'll see, it's along the right
margin on all pages EXCEPT this one. All help is welcome to achieve
this look.
Dave

CSS Menu:
a { text-decoration: none }
a:link {
    color: #FFF;
    background: #666;
a:visited { color: #999 }
a:hover, a:active, a:focus {
    background: #333;
    text-decoration: underline;
    border-bottom:4px solid gold;
/**horizontal navbar**/
nav ul, nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size:20px;
    font-weight:bold;
    text-align:center;
nav li a {
    float: left;
    display:block;
    padding: 6px;
    line-height: 1.2em;
    width: 8em;
HTML:
<nav>
<ul>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
<li><a href="#">Some link</a></li>
</ul>
</nav>
What it looks like:
Nancy O.

Similar Messages

Need Help with Complex Background Images

Hey, Macromedia, I mean, Adobe Dreamweaver users. I have a
dilemma, before you read further, look at this website:
https://statons.rtotogo.com/rtotogostore/rto_store/sign_in.asp.
Notice the background images. The light tan stripe at the top, the
orange/yellow stripe beneath it, and the darker tan color that
encompasses the rest of the background. When you go to a longer
page on the site, the top two colors do not repeat, and as the page
shrinks on smaller pages, so does the darker tan background. How
can I do this? I've seen it done before, and I read the source
code, but I am confused as to how I can accomplish this..... Please
advise! I am in desperate need of your expertise!
Thanks in advance for the help.
Chuck

It's controlled using CSS check out the css script and the
backgounds are
set to repeat along the x axis only
cheers
Ian
[email protected]
http://www.edwards-micros.co.uk
"ChuckRWD" <[email protected]> wrote in
message
news:e93ha7$lmi$[email protected]..
> Hey, Macromedia, I mean, Adobe Dreamweaver users. I have
a dilemma,
> before you
> read further, look at this website:
>
https://statons.rtotogo.com/rtotogostore/rto_store/sign_in.asp.
Notice
> the
> background images. The light tan stripe at the top, the
orange/yellow
> stripe
> beneath it, and the darker tan color that encompasses
the rest of the
> background. When you go to a longer page on the site,
the top two colors
> do
> not repeat, and as the page shrinks on smaller pages, so
does the darker
> tan
> background. How can I do this? I've seen it done before,
and I read the
> source code, but I am confused as to how I can
accomplish this.....
> Please
> advise! I am in desperate need of your expertise!
>
> Thanks in advance for the help.
> Chuck
>

How do I create Equal Height Columns with my Background Images?

Hi there,
here is my page http://www.allthingsprintuk.co.uk/ATPHome.html
My problem is that the side bar HTML list is coming off the page in IE. & also the html in the header can look awful due to browser settings.
My question is how do I create Equal Height Columns with my Background Images so that they fit with the HTML text? Is there a good link you can point me to, or a tutorial?
The only way I can see by doing it is slicing my images up into 3 (top middle & bottom) & then setting the middle to repeat y????
Or does anyone know of a way to create rounded corners WITH drop shadows in CSS that will work on all browsers?
Thanks in advance
Louisa

Try these http://www.pixelan.com/

Repeating background images in tables

I am working on a web page with a background image in a
table. I have also inserted a table inside this same table to
include some text. When I preview this in Netscape/Firefox and
increase the text size a couple of times from the browsers menu,
the table with the image starts repeating as the text increases in
size. I don't mind the text changes sizes, but is there a way to
stop the table from repeating the background image? This is a
problem since the repeating image looks terrible.

On that page, change this -
</head>
to this -
<style type="text/css">
table.special { background-repeat:no-repeat; }
</style>
</head>
and then change your table tag from this -
<table width="100%" height="606" border="0" align="center"
cellpadding="0"
cellspacing="0">
to this -
<table width="100%" border="0" align="center"
cellpadding="0"
cellspacing="0" class="special">
(there is no table height attribute - it's invalid HTML)
> b, be too small, dependent upon which browser they are
viewed in.
Impossible. A background image will not change size in
different browsers.
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
==================
"chimesey" <[email protected]> wrote in
message
news:[email protected]...
>
quote:
Originally posted by:
Newsgroup User
> Use CSS -
>
> table { background-repeat:no-repeat; }
>
> --
> 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
> ==================
>
> I am trying to do the same thing, and my bg images seem
to either
> a, repeat somewhat
> or
> b, be too small,
> dependent upon which browser they are viewed in.
>
> I will try to use the code suggested above, but where
exactly would I
> insert
> it?
> This is the code for the 'table within the table'...
>
> <table width="100%" height="606" border="0"
> align="center" cellpadding="0" cellspacing="0">
> <tr>
> <th width="35%" height="95"
> scope="col"><h1>ten</h1></th>
> <th width="26%"
scope="col"><h1>year</h1></th>
> <th width="39%"
scope="col"><h1>plan</h1></th>
> </tr>
> <tr>
> <td height="325"><table width="100%"
height="266"
> border="0" cellpadding="0" cellspacing="0">
> <tr>
> <th scope="col"> </th>
> <th background="../smiths.jpg"
> scope="col"> </th>
> <th scope="col"> </th>
> </tr>
> </table> <p> </p>
>
>
> Ta!
>

Repeating Background Image Download Question

When you use a repeating background image does the browser
only download it once and then repeat it on their computer?
I wanted to use a gradient background image so I figure to
cut down the dowload size I'd just take a 1 pixel wide slice and
repeat it, does that work?

It works perfectly, I use Photoshop to make gradients and
then insert the psd onto a page, where you get a conversion dialog,
i select 100 for the jpeg quality and uncheck the sharpen color
edges checkbox, you can use gifs if you want, then in your
stylesheet use background-repeat: repeat:x;
or y if you want to have a right to left gradient.
Look at this site i am working on, it uses alot of PS
gradients, all with repeat-x
http://plcstrings.com/

How do I Customize RoboHelp 11 Responsive HTML5 to include repeating background image?

Hello,
How do I add a repeating background image (not logo) to the layout found in RoboHelp 11 Responsive HTML5?
Is this something that has to be done inside of Dreamweaver?
Where are the RoboHelp 11 Responsive HTML 5 default themes (skins) stored on the computer?
I have seen the following files in RoboHelp 11 and would like to know if it is possible to edit
these files?
Responsive_Layout.fpj
C:\Program Files (x86)\Adobe\Adobe RoboHelp 11\RoboHTML\Samples\en_US\EmployeeCare2\EmployeeCare2Project\!ScreenLayout!\Responsive_La yout
Glossary.slp
Index.slp
SearchResults.slp
Table_of_Contents.slp
Topic.slp
C:\Program Files (x86)\Adobe\Adobe RoboHelp 11\RoboHTML\Samples\en_US\EmployeeCare2\EmployeeCare2Project\!ScreenLayout!\Responsive_La yout
By default, there are two themes found in Responsive HTML 5. They are:
Theme1_Standard
Theme2_Government
Where are these themes located under RoboHelp 11?
Thanks in advance for your response.
James

Post moved to HTML5 Layouts forum.
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

Help with Dreamweaver flash image viewer

Hi all
Would like some help with Dreamweavers Flash image viewer.
Everything is working properly except when i try to link a picture, and have set the imagelinkTarget value to _blank the link always navigates away from my site and does not open in a new window.
I have tried all the values for the imageLinkTarget and nothing works..
Here is my code
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0, 28,0','width','190','height','190','src','images/ad1','quality','high','flashvar s','flashlet={imageLinkTarget:\'_blank\',captionFont:\'Verdana\',titleFont:\'Verdana\',sh owCo ntrols:false,frameShow:false,slideDelay:5,captionSize:14,captionColor:#000000,ti tleSize:10,transitionsType:\'Fade\',titleColor:#333333,slideAutoPlay:true,imageU RLs:[\'images/image1.jpg\',\'images/image2.jpg\',\'images/image3.jpg\',\'images/ image4.jpg\'],slideLoop:true,frameThickness:2,imageLinks:[\'http://www.bowlsaustralia.com.au\',\'http://www.smh.com.au\'],frameColor:#333333,bgColor:# FF9966,imageCaptions:[\'Bowls Australia\',\'Sydney Morning Herald\']}','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFl ash','flash_component','ImageViewer.swc','movie','images/ad1' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0, 28,0" width="190" height="190">
          <param name="flash_component" value="ImageViewer.swc" />
          <param name="movie" value="images/ad1.swf" />
          <param name="quality" value="high" />
          <param name="FlashVars" value="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:'Verd ana',showControls:false,frameShow:false,slideDelay:5,captionSize:14,captionColor :#000000,titleSize:10,transitionsType:'Fade',titleColor:#333333,slideAutoPlay:tr ue,imageURLs:['images/image1.jpg','images/image2.jpg','images/image3.jpg','image s/image4.jpg'],slideLoop:true,frameThickness:2,imageLinks:['http://www.bowlsaustralia.com.au','http://www.smh.com.au'],frameColor:#333333,bgColor:#FF9 966,imageCaptions:['Bowls Australia','Sydney Morning Herald']}" />
          <embed src="images/ad1.swf" quality="high" flashvars="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:' Verdana',showControls:false,frameShow:false,slideDelay:5,captionSize:14,captionC olor:#000000,titleSize:10,transitionsType:'Fade',titleColor:#333333,slideAutoPla y:true,imageURLs:['images/image1.jpg','images/image2.jpg','images/image3.jpg','i mages/image4.jpg'],slideLoop:true,frameThickness:2,imageLinks:['http://www.bowlsaustralia.com.au','http://www.smh.com.au'],frameColor:#333333,bgColor:#FF9 966,imageCaptions:['Bowls Australia','Sydney Morning Herald']}" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFl ash" type="application/x-shockwave-flash" width="190" height="190"> </embed>
        </object>
</noscript>
any help would be greatly appericated
Ken

I just googled and found lots of folks with the same problem. One fellow wrote this as a soluton:
"All you have to do is
remove the values from the imageLinks in the flash element. That
should fix it."
Does it?
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

Help with repeating image

At
http://www.hammerstones.net/music1.htm,
i've inserted an iframe that seems to prevent the right edge
background image from displaying. You'll see, it's along the right
margin on all pages EXCEPT this one. All help is welcome to achieve
this look.
Dave

try closing your iframe tag
</IFRAME> wherever you intend it to end.
not only is your right side missing the background image, but
your footer is not showing either. anything after your iframe code
is not showing.

Best practice for Spark repeating background image in a SkinnableContainer?

In my old Flex 3.5 code I would accomplish this by dropping an Image into a Canvas and hitting the Canvas with some css style stuff to get the repeat. The Image tag had a source property that would take a web address so I could dynamically grab different images from the web based on some conditions. Little bit more trouble with Flex 4.5 and Spark but I'm trying to get there.
Here Adobe docs explain how to *embed* a background image:
http://help.adobe.com/en_US/flex/using/WS422719A4-7849-4921-AF39-57FF567B483B.html#WS063B0 491-B7AB-4b00-A39F-E44310BCB0E0
They use a BitmapFill object in the skin.

    <s:Rect id="background" left="3" top="3" right="3" bottom="3" alpha=".25">
        <s:fill>
            <s:BitmapFill source="@Embed(source='../../assets/myImage.jpg')"/>
        </s:fill>
    </s:Rect>
Problem is I need to do this without embedding the image. In my old code I grabbed the image from web (set source property on Image tag to web address). What's the best practice for achieving this with a skinnable container? The BitmapFill object used above won't take a web address for a source.
Thanks in advance.

Use BitmapImage with a fillMode of repeat:
<s:BitmapImage source="http://www.google.com/intl/en_com/images/srpr/logo2w.png" width="100%" height="100%" scaleMode="stretch" fillMode="repeat" />

Problems with the background image in IE

Hi I've been optimizing some pages for the different browsers in Dreamweaver CS4. They all work fine in Safari, Firefox and Opera, Internet Explorer is, however not showing the background image I have selected. I can't for the life of me see what's going wrong! Any help wopuld be appreciated. here is the code on my index page which I built from a template. I don't know if it's the editable areas that are going wrong!
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>test site</title>

<link href="oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>

<meta name="Description" content="facedivorce.com.com is an online resource tool to help guide you through the various stages of divorce. Simply click on before, during or after divorce to find everything you could ever need to do with divorce.
" />
</head><meta name="keywords" content="test
" />

<body class="oneColFixCtrHdr">
<div id="container">
<div class="oneColFixCtrHdr" id="header">
    <table width="740" border="0" align="center">
      <tr>
        <td border="0" height="38" ></td>
        <td align="right" valign="bottom">
          <p class="TextButtons"><a href="index.html" class="TextButtons">Home</a>   <a href="featuredcompany.html" class="TextButtons">Featured Company</a>   <a href="youngpeople.html" class="TextButtons">Young People</a>    <a href="andmore.html" class="TextButtons">And More</a>    <a href="blog/index.html" class="TextButtons">Blog</a></p>
        </td>
      </tr>
      <tr>
        <th height="48" align="left" valign="bottom">
<h1><a href="index.html" title="test"><img src="images/test_logo.png" alt="test" width="245" height="46" border="0" align="left" /></a></h1>
</th>
        <td align="right" valign="bottom"><a href="#"><img src="images/facebook-logo.png" alt="FaceBook Button" width="48" height="48" border="0" align="bottom" /></a> <a href="#"><img src="images/twitter_square.png" alt="Twitter Button" width="48" height="48" border="0" align="bottom" /></a><a href="#"><img src="images/blogbutton.png" alt="Blog Button" width="49" height="47" border="0" align="bottom" /></a>    </td>
      </tr>
    </table>
    

Hi
The fact you are using a Mac is why both myself and JCellini assumed you where using a pre IE7 version.
But the code you are using to test in IE will cause a problem with any 'virtual machine' such as crossover, because it cannot reference anything outside its own assigned section of the drive, and referencing the png in the way you are would be for it an invalid reference, it also would not work in any browser when you uploaded the site.
Change - background-image:url(file:///Macintosh HD/Users/myname/Documents/websites/test/Test/images/test_back.png);
To - background-image:url(images/test_back.png);
But if the region is not editable I would suggest you temporarily make it so, externalize your css to a css file, insert a link to the external css file in your head content, then lock the region once again. This way you will always be able to edit your css without worrying about 'locked regions'.
PZ
www.pziecina.com

Repeating Background Image

Hey guys,
I've been coding websites for like 4 years now and have used CSS styling long enough for it to effect the way my brain handles coding concepts. Anyway, I also happen to have a CS minor and have been playing with Java again lately. I was wondering if there is any way to make an image (ImageIcon or whatever) repeated for a background for like a JPanel or something. I imagine if there isn't any predefined function for that then it would require some spiffy paintComponent (or paint) code.
But all i'm really trying to do is make a background that is a repeated image. Do i just need to make a really long (or wide) image and hope that the user doesn't exceed that dimension? or is there some way to make an image repeat as a background?
Any help or direction would be greatly appreciated. Thanks in advance!

Awesome,
I've read into this some and looked at a few tutorials. This definitely looks like something I was looking for. Would this be your suggestion for a background (that's only repeated on the x-axis) of a list of JButtons.
An good example of the effect i'm trying to get is in NetBeans (5.5). (according to default settings) Just under the list of files you're currently editing, there is a list of buttons ( "back", "forward", "find previous occurrence", "find selection", etc). This list of buttons (and it's background) is the effect that I'm going for.
My plan (which is very VERY html-ish) was to have two border images (left and right) and then have the repeated background in the middle with the JButtons (and their transparent background) on top of the repeated background.
It looks like it's definitely possible to use TexturePaint for this, but I just wanted to make sure that it was the suggested method. Thanks for your help, I really appreciate it.

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. =)

Problems with the background image size in a photobook

Hi there, I really need help here. When I make a photobook I want to display my images large, taking the whole page. To do that I put the image as a background and it's OK. My problem is that when I do this, iPhoto always crops it. I have to use the move tool to move the image up and down, left or right to chose a best position. I don't want to do this, I want my image to be shown perfectly from end to end. I have to resize the image in many ways, even used the book's native resolution but it still doesn't work. If I choose "fit photo to frame size" I end up with two stripes at the top and the bottom of the page.
Please help me, what size should I resize my image to, so that iPhoto displays it as it is?
Thank you

Hi
The fact you are using a Mac is why both myself and JCellini assumed you where using a pre IE7 version.
But the code you are using to test in IE will cause a problem with any 'virtual machine' such as crossover, because it cannot reference anything outside its own assigned section of the drive, and referencing the png in the way you are would be for it an invalid reference, it also would not work in any browser when you uploaded the site.
Change - background-image:url(file:///Macintosh HD/Users/myname/Documents/websites/test/Test/images/test_back.png);
To - background-image:url(images/test_back.png);
But if the region is not editable I would suggest you temporarily make it so, externalize your css to a css file, insert a link to the external css file in your head content, then lock the region once again. This way you will always be able to edit your css without worrying about 'locked regions'.
PZ
www.pziecina.com

Help with repeatable region

HI I'm currently designing a site and am using master/detail
pages linked to a database.
The master detail page set function in dw8 automatically
creates a repeatable region on the master page. I'm trying to add
an image to that specific repeat region so that each result shows
up with that image behind it (the image i'm using is a blank
rectangle with a specific borderframe so that it appears that each
result has this specific border)
If i try adding as background image the image repeats itself
but is out of line with the results! Any ideas how i can go about
achieving what i'm trying to do, that is assuming I haven't totally
bewildered you all in trying to explain it!!!!

can i do that for each specific result? or will it not just
border all results in that style
the border i want is to match with button images etc... which
have a glow effect edge to them

Button with full background image

Hello,
I want to have a button with a image as background.
The background image has to fill the complete button background.
If you see the screenshot (url) , there is space around the image.
I have add a red border to see that the button size != background image.
I also tryed style with -fx-background-repeat: repeat-x;
[http://office.techniconsulting.be/~peeters/button.png]
Button button = new Button();
ImageView imageViewOn = new ImageView();
imageViewOn.setImage(....);
ImageView imageViewOff = new ImageView();
imageViewOff.setImage(imageViewOff);
button.setText(this.name);
button.setGraphic(imageViewOff);
button.setContentDisplay(ContentDisplay.CENTER);
button.setStyle("-fx-border-color: red; -fx-border-width: 1;");

Maybe not the perfect solution, but you can make the background transparant of the button so you won't see the button.
button.setStyle("-fx-background-color: rgba(0%,0%,0%,0)}");Else I would say, don't use a button and create your own.
-Stackpane
--ImageView with image
--text
For events, you can put events on the StackPane..
Edited by: FXdude on 25-jan-2013 5:02

Help with repeating background image

Similar Messages

Maybe you are looking for