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

Similar Messages

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

Resizing 1) background images and 2) div's containing images

I just created a web page consisting of little more than an image (about 900 pixels) wide which is set at width=100% in a style sheet. It works great, but I'd like to substitute a smaller image (to reduce page loading time) in mobile devices.
If it was a background image, I could just declare two different background images based on screen size, but I don't know of any way to swap between images actually inserted in a page.
So, is it possible to give a background image a width in percentage, similar to a static image? In other words, if my screen was 651 pixels wide, then a static image inside a container spanning the entire screen should also be 651 pixels wide. Can I rig it so that a background image in that container would also be 651 pixels wide?
Of course, the obvious problem is height. If a background image measures 900 X 1200 pixels, and a screen is 600 pixels wide, then even if there's a style that makes the image 600 pixels wide, it would also have to calculate a height of 800 pixels, and I'm guessing that can't be done.
Anyway, I'd just like to know what kinds of tricks one can use in making background images and divs containing static images display in percentages based on screen size.
Thanks.

Use background-size:cover; for your background images.
Further reading: http://css-tricks.com/perfect-full-page-background-image/
EDIT:// For swapping out placed images, it's a little harder to do right now as there is no specified solution from W3C. Some people want to use the srcset attribute, others the <picture> tag. There is no perfect approach right now. See: http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good- thing/
One idea is you could hide the image and then load a background-image in the container which is smaller in size. But this would likely bloat your HTML and CSS as you use multiple images - the device will also load both images so you don't gain any real advantage unless you intend to show a croppoed or different image.
Other ideas: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
<div class="image">
     <img src="YourImage.jpg" alt="" width="500" height="250" />
</div>
@media only screen and (max-width: 480px) {
     .image img {display:none;}
     .image {
          background:url("YourImage_Mobile.jpg") no-repeat 0 0;
          background-size:cover;
Another idea is to show/hide the relevant image:
<img src="YourImage.jpg" alt="" width="500" height="250" class="desktop" />
<img src="YourImage_mobile.jpg" alt="" width="300" height="180" class="mobile" />
@media only screen and (max-width: 480px) {
     .desktop {display:none;}
     .mobile {display:block;}

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

Spry widget menu bar background image help

Does anyone know of a good tutorial for putting a background image behind the whole menu bar, not just each button, and a tutorial for putting images behind each button.
Also, does anyone have a good tutorial on creating some sort of gallery, with thumbnails, in dreamweaver.
Thank you, using cs4

You can start here for your spry menu.
http://livedocs.adobe.com/en_US/Spry/SDG/index.html
You can also use a background image in the container that you have your SM in. You can use in in conjuction with, or in place of images for the menu.
For the gallery, I would look at third party products.
gary

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

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

Fraiming container using a background image in body

I am very new to this. I am trying to frame the <container> using sunflower images in <body>. When you zoom in or out. The image in body does not float with the container. I have tried several tihngs but nothing works. What am I doing wrong? see nancylgrant.businesscatalyst.com/store.html

Add the highlighted line
body {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 100%;
    line-height: 1.4;
    font-size-adjust: none;
    font-stretch: normal;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    color: #000000;
    background-color: rgba(135, 151, 210, 0.5);
    background-image: url("http://nancylgrant.businesscatalyst.com/images/weatherboardbackgrnd4.png");
    background-repeat: no-repeat;
    background-position: center top;
    height: 100%;
    width: 100%;

Drawing images with transparent background on any AWT container control.

I have an AWT applet with some background image.
There is another image say of a size of an icon which
has a transparent background. This image can be
dragged anywhere on the applet.
I am using a panel of a size of an icon and drawing the
image on it. The whole panel is dragged when the user
drags the image.
The problem over here is, though the image has a
transparent background it is not appearing transparent
on the applet because the background of its container
i.e., the panel which is dragged along, itself is not
transparent.
My question is : "Is there a way to make a control, like a panel, background transparent in AWT or some other way that can produce a similar effect in AWT ?".
Please help me out.
Thanks.

Maybe the best way is to create your own component ( extending Component ) and then implementing paint() to do what you need.

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

How to add background image for a JInternalFrame Container?

JInternalFrame fr=new JInternalFrame();
//we added to desktop,
Container c=fr.getContentPane();
//how can we set background image for a internal frame??
thanks,
waiting,

You can let the container's border draw the background image: caution: some will find this image disturbing.
One nice thing about this solution is that you don't have to subclass any components.

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.

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 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());
}

Tiling a background image in a container

Similar Messages

Maybe you are looking for