Background image tile

I need to stretch a 1px wide pic across a canvas as the
background image. I have seen some AS3 solutions, but I was hoping
for a more general solution. Anybody?

This works:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
width="700" height="700">
<mx:Canvas width="500" height="500"
backgroundImage="assets/images/1px.jpg" backgroundSize="100%"/>
</mx:Application>

Similar Messages

Background image not repeating in IE6

I have a background image in a cell of a 1x1 table -
http://savanabar-leros.com/art7tables.shtml
the image is set to repeat x and y.
In FF2 and IE7 it displays as expected.
In IE6 the background image is not repeated
For the moment I've increased the size of the image to
compensate - but
obviously I would like to know what I have done wrong. It's a
very temporary
fix anyway as increasing the text in IE6 shows the text
dropping out the
bottom of the background image.
Jo

I was trying to find this the other day - something to do
with /75 being the
percentage of transparency I think.
Frankly I would love to use an "easy way out" - I have tried
and failed
despite having been given some excellent help - how oh how
please do I do
this?
Jo
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> What you see there *is* using the htc files. If I would
remove them, the
> transparency disappears, but the background image tiles.
Why don't you
> take the easy way out, and make the background image
have a reduces
> opacity and contain the underlying image bits as well?
>
> --
> 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
> ==================
>
>
> "josie1one" <joleros[nospam]@yahoo.com> wrote in
message
> news:[email protected]...
>> But... it I remove the htc file it is not
transparent - and yet yours is.
>> I got in a mess with the transparency and there are
two versions... with
>> the htc file and the ie2.css fix. Removing one of
them seemed to prevent
>> transparency.
>> Did you *only* remove the htc file and nothing else?
If so, I don't know
>> what to do <whimper>
>>
>> --
>> Jo
>>
>>
>> "Murray *ACE*"
<[email protected]> wrote in message
>> news:[email protected]...
>>>
http://www.murraytestsite.com/savana.html
>>>
>>> You can see that indeed the png image is not
tiling to fill the table.
>>> If I remove the htc files from the CSS, it does
do so. I conclude that
>>> there must be something in the htc file code
that is causing this to
>>> happen....
>>>
>>> --
>>> 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
>>> ==================
>>>
>>>
>>> "josie1one" <joleros[nospam]@yahoo.com>
wrote in message
>>> news:[email protected]...
>>>>
http://savanabar-leros.com/images/screen.jpg
>>>> Thanks for looking.
>>>>
>>>> --
>>>> Jo
>>>>
>>>>
>>>> "Murray *ACE*"
<[email protected]> wrote in message
>>>> news:[email protected]...
>>>>> Post a screenshot of what you are
seeing, please Jo....
>>>>>
>>>>> --
>>>>> 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
>>>>> ==================
>>>>>
>>>>>
>>>>> "josie1one"
<joleros[nospam]@yahoo.com> wrote in message
>>>>>
news:[email protected]...
>>>>>> I've cleared my cache but still
seeing non-repeating background on
>>>>>> both computers in IE6. Must be me -
thanks Murray.
>>>>>>
>>>>>> --
>>>>>> Jo
>>>>>>
>>>>>>
>>>>>> "Murray *ACE*"
<[email protected]> wrote in message
>>>>>>
news:[email protected]...
>>>>>>> You're talking about the
translucent reddish rectangle? Looks fine
>>>>>>> to me in IE6.
>>>>>>>
>>>>>>> --
>>>>>>> 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
>>>>>>> ==================
>>>>>>>
>>>>>>>
>>>>>>> "josie1one"
<joleros[nospam]@yahoo.com> wrote in message
>>>>>>>
news:[email protected]...
>>>>>>>> Really? I've now reduced the
size of the image if you wouldn't
>>>>>>>> mind testing. Displays
perfect in FF2 even with Ctrl+ but not on
>>>>>>>> two computers in IE6. In
fact it seems to cycle through several
>>>>>>>> backgrounds before
displaying a narrow background.
>>>>>>>>
>>>>>>>> --
>>>>>>>> Jo
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> "Murray *ACE*"
<[email protected]> wrote in message
>>>>>>>>
news:[email protected]...
>>>>>>>>> It's repeating for me in
IE6, Jo.
>>>>>>>>>
>>>>>>>>> --
>>>>>>>>> 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
>>>>>>>>> ==================
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> "josie1one"
<joleros[nospam]@yahoo.com> wrote in message
>>>>>>>>>
news:[email protected]...
>>>>>>>>>>I have a background
image in a cell of a 1x1 table -
>>>>>>>>>>
http://savanabar-leros.com/art7tables.shtml
>>>>>>>>>> the image is set to
repeat x and y.
>>>>>>>>>>
>>>>>>>>>> In FF2 and IE7 it
displays as expected.
>>>>>>>>>>
>>>>>>>>>> In IE6 the
background image is not repeated
>>>>>>>>>>
>>>>>>>>>> For the moment I've
increased the size of the image to
>>>>>>>>>> compensate - but
obviously I would like to know what I have done
>>>>>>>>>> wrong. It's a very
temporary fix anyway as increasing the text in
>>>>>>>>>> IE6 shows the text
dropping out the bottom of the background
>>>>>>>>>> image.
>>>>>>>>>>
>>>>>>>>>> --
>>>>>>>>>> Jo
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>
>>>>
>>>
>>>
>>
>>
>
>

Controlling Background Images!!!!!!!!!

Is it possible to control how a page's background image
tiles? For example, I have a band )approx. 300px tall) that I would
like to continuously tile horizontally, not verticaly. Can this be
done?

You can with the use of css:
.foo {background: url(headerbg.jpg) repeat-x;}
and then apply that class (foo is only an example :) to the
container or
to the body tag if you want it as the background to the
actual page.
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
"macromike" <[email protected]> wrote in
message
news:f58n5o$kms$[email protected]..
> Is it possible to control how a page's background image
tiles? For
> example, I have a band )approx. 300px tall) that I would
like to
> continuously tile horizontally, not verticaly. Can this
be done?

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

How do I keep the body background-image centered?

I have a body background-image that does not fill up the
entire window on the tops and bottoms of most monitors (it
strectches to the left and right just fine) and so I would like to
have it centered vertically with equal amounts of the
background-color #ECE5C8.
I assumed using background-position: 50% 50% would do the
trick and it does until switching to full screen mode and all the
content jumps upwards and messes up the whole site layout (IE
only-in friefox, the background-image still doesn't center) so
instead I have the background-position set to: 50% 0%.
Thanks a million to anyone who can help me get it centered, I
know there has to be an easy fix but I sure can't figure it out!
The site can be found here:
http://www.lightspacewebdesign.com/sacredsolas

There would be only two ways to make this layout 'work'.
1. Just make everything on that page a graphic. Then there is
no
possibility that resizing the text in the browser will blow
the layout.
This is a very bad idea for obvious reasons.
2. Have the text containing 'graphical box' built in pieces
so that as the
text expands, it can cause the box to expand as well. The
easiest way to do
this is with a top a middle and a bottom image of the box,
using each as the
background image of three stacked containers. Place the text
in the middle
container and as it expands, it will tile the middle
background image
vertically to give the impression of the box expanding. This
approach
doesn't lend itself to your background image, since there is
no way to tile
the background image to fill the newly created space.
Beyond that, I think you are a dead duck. The problem is not
that this is
what you were given to work with - it's that you didn't
understand how
unusable the design was when you accepted it. I think your
best option now
is to go back to the designer and explain to them how this
lovely layout
only works well in print, and not on the web. Show them how
it fails.
Solicit suggestions from them for how to make it work in a
medium where
there is no way to control the size of the text.
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
==================
"afriendofcheese" <[email protected]> wrote
in message
news:[email protected]...
> By "a rigid layout scheme that cannot allow flexibility"
I assume you mean
> that
> everything shouldn't be bound inside the position of the
background-image,
> but
> this is what the designer and client gave me to work
with.and so I have to
> make
> due.
>
> With that in mind, I hope someone out there can help me
out with this!
>

How to setup jpeg file as background image for all site pages and resolution stay same?

I have uploaded my new site to http://wwwtjhtestdec2012.businesscatalyst.com
I have background image set the same on all site pages but image is incorrectly zoomed way in on some pages (like Home page for example).
The Donate Page shows the correct resolution which I want displayed on all site pages.
How do I set all other site pages to match background image resolution of the Donate Page?
I am not sure what I am doing wrong that is changing this, or if it's possibly a bug?
I want the background image to be full screen on all site pages please advise how to resolve.
I would appreciate the assistance!
Thank you kindly!
Tammy

I have re-uploaded my site to http://wwwtjhtestdec2012.businesscatalyst.com.
If I set the Master page to Tile vertically that is only way I can get full screen background image of vegetables (without distortion).
Then however another issue occurs....
On Home Page of site I set same property to Tile and the background is better (no visible line where tiles meet---above the navigation tool bar--that is what I want for all pages associated to Master.
So logically, I tried setting a 2nd associated site page to same master, to Tile but on Statement of Faith Page, notice the horizontal line where tiles meet, above my navigation bar on that site page?
Why does Muse not handle both site pages associated to the same master identically?
Any of the other options besides Tile or Tile vertically cause the background to not fill entire screen.
Ideas?

How to Change log in background image without third party apps on Mountain lion

Hi I am trying to change the log in screen without using a third party app on OSX 10.8. every time I use Loginox the background image changes but if i create an image of that volume and reimage another mac with a different screen size the background becomes in tile mode. Does anyone know how to replace the log in background without the third party app?Thank you for the help.

Without third party application, you can not change the login screen linen background.
Best.

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

Full bleed background images

I have full bleed background images. They load correctly (proportionally) and quickly in firefox. In internet explorer, they take a long time to load and they are scaled disproportionally. Once I change the size of the browser window, they adjust to the correct scale. Once a page has gone through this motion, it stays correct when revisiting the page. On another computer, also in IE , they load incorrectly at first and after a few seconds, adjust to the correct scale. What can I do make sure the images load correctly in all internet browsers?

With CSS:
body {background: url(your_BGimage.jpg) repeat}
You need to use small, seemless images strips or tiles that are suitable for repeating across and down the page.
http://alt-web.com/Backgrounds.shtml
Large background images or photos do not resize in browser unless you build your site entirely in Flash.
Font-size is dependant upon the end user's browser settings. Viewport size doesn't effect text size.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/

Resizing Background Image

I did some google searching...but, I am seeking the ability
to have my
background image resize to the visitor's browser...not tile,
but rezise...I
see some older google articles on javascript and CSS3...but,
I see flash
sites do it enough and believe I have see DW sites do
it....For my tastes,
javascript is ok but CSS is preferred.
TIA.

Can't happen. Background images don't resize.
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
==================
"tweaked_eye" <[email protected]> wrote in message
news:ggckae$j8c$[email protected]..
>I did some google searching...but, I am seeking the
ability to have my
>background image resize to the visitor's browser...not
tile, but rezise...I
>see some older google articles on javascript and
CSS3...but, I see flash
>sites do it enough and believe I have see DW sites do
it....For my tastes,
>javascript is ok but CSS is preferred.
>
> TIA.
>
>
>

How do I add a background picture til my swing CUI

How do I add a background picture til my CUI. I�m using Swing - not using any JPanel.
Here my code:
class Start extends JFrame implements ActionListener
     JButton soeg, tilfoj, afslut;
     JTextField beskedText;
     JLabel besked;
     private Image baggrund;
     public Start()
          setTitle("Video Registrerings System");
          setSize(300,250);
          setVisible(true);
          addWindowListener(new WindowAdapter()               // Opretter vinues "lytter"
               public void windowClosing(WindowEvent e)
                    System.exit(0);
          Container c;
          c = getContentPane();
          c.setLayout(null);
          try
               URL imagename = new URL("file:/c:/jdk1.3.1_02/java/vrs_background.jpg");
               baggrund = createImage((ImageProducer) imagename.getContent());
          catch (Exception e) {}
          // Tilf�jer knapperne
          tilfoj = new JButton("Tilf�j ny video");
          tilfoj.setBounds(75,110,150,25);
          tilfoj.setVisible(true);
          tilfoj.addActionListener(this);
          c.add(tilfoj);
          soeg = new JButton("Video s�gning");
          soeg.setBounds(75,145,150,25);
          soeg.setVisible(true);
          soeg.addActionListener(this);
          c.add(soeg);
          afslut = new JButton("Afslut");
          afslut.setBounds(75,180,150,25);
          afslut.setVisible(true);
          afslut.addActionListener(this);
          c.add(afslut);
          //Tilf�jer tekstfelt og label
          besked = new JLabel("Besked:");
          besked.setBounds(10,45,50,25);
          besked.setVisible(true);
          c.add(besked);
          beskedText = new JTextField(" V�lg en af de nedenst�ende knapper");
          beskedText.setBounds(65,45,215,25);
          beskedText.setVisible(true);
          c.add(beskedText);
     }

Here is a link that might help you:
http://forum.java.sun.com/thread.jsp?forum=57&thread=219443

Can I control the position of the page background image?

Hi All!
My simple question: Can I control the position of the background image for example in a user-made style? I mean can I make the position of the image to center rather then tile? If it possible without editing the html code...

To create a background image for a region create a table nested within that region using the following definition <TABLE WIDTH="100%" HEIGHT="100%" CELLPADDING="0" CELLSPACING="0" MARGIN="0" BORDER="0"> and create an image call integrated into the <TD> tag within said table.

Placement of 2 background images

I want a background image for the body of my site like the one used here;
https://www.fortnumandmason.com/
The image they used is here;
https://www.fortnumandmason.com/Common/images/Global/bodyBkg015.jpg
They have used a big image, 100k i think. This seems wasteful. Is there a way of achieving the same thing but using smaller images and probably more divs?
I was thinking of adding a div around my container and setting it to be the pages's width and height, so in effect I could add CSS to 2 body tags. I could then have a background image for one aligned to the right, and background image to another aligned to the left.
The problem with that method is that as the window is resized, the background image will be moved and wont always touch the container div. Can I somehow set a background image to sit next to the container div? I think I could do this if the entire layout was in a 3 column table, but id rather find a CSS solution.
Thanks

I like the idea of a background image on the whole page. The difficulty with that is that you can't stretch a background image. But if you make the image large enough to cover and perhaps fade it into a color (or cleverly make the edges splice, so you can safely tile it...), you'll have all situations covered.
Take advantage of your graphics program...Fireworks, for example...to optimize the image to the most efficient size. If you need certain areas to be very clear, you can do selective jpeg optimization, where a selected area (need not be rectangular) is optimized to a higher percentage than the rest of the image.
I really don't like the slice and dice approach. The chance for breaking is very high. You have no way to control a viewer's penchant for enlarging the page or the text, and throwing the whole into disarray. The simpler, the better.
Keep in mind the image of nailing jello to a wall. Yeah, it slides down into a puddle.
Beth

Background image question

Hi,
I am trying to spread a gif image to cover the entire background of my page but the only options I see in page options is "no repeat" which only gives me one image in the top left corner, or else repeat which tiles the image. I think I'm missing some crucial step (or else some crucial part of my brain!)
Thanks,
Amanda

There are other ways to position a background image - see the following as a reference:
http://reference.sitepoint.com/css/background-position
However, what you are trying to do isn't going to work the way you want it to. Even at that size,the image files size is quite large. Unless, the image is a repeating one, there is no way to determine the size of the window of the person viewing your page... so how do you determine what size to make the image. The only reliable way is to make it repeat horizonally or vertically or all across the background.
You could have a fairly large image sitting in the middle of the window and have it fade out on each side of the image, into a complimentary colour, so that smaller window sizes will see mostly image, larger browser windows will see the image centered, but blended into the colour of choice on the external edges.
Maybe if you posted up an example of what you are trying to do, people may be be able to come up with an alternative. However, using a full photo image isn't going to work as you expect I'm afraid.

How to build proportionally scaled, full bleed background images correctly

How do I build full bleed proportionally scaled background images that proportionally scale to different sizes of browser windows and without leaving any blank spaces at the right or bottom? How do I make sure that the text also scales proportionally?

With CSS:
body {background: url(your_BGimage.jpg) repeat}
You need to use small, seemless images strips or tiles that are suitable for repeating across and down the page.
http://alt-web.com/Backgrounds.shtml
Large background images or photos do not resize in browser unless you build your site entirely in Flash.
Font-size is dependant upon the end user's browser settings. Viewport size doesn't effect text size.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/

Background image tile

Similar Messages

Maybe you are looking for