Auto-streching a x-repeated background vertically

Hi!
I wondering if this is possible:
I have a background image in my main_content div that is repeated on x-axis. The problem is I need the background to stretch vertically, if there is some long content on the page.
How would you make an image that is x-repeated stretch vertically on a web page? Or if it can't be done, what approach should I take?
Any help will be appreciated!

Sorry, but static images cannot be stretched. The best you can do is to use a seemless image and repeat it both ways.
#div {
background: url(your-BG.jpg) repeat
Or use a compatible background color to fill-in areas beyond the BG image's height.
#div {
background: #92A2C4 url(your-BG.jpg) repeat-x
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Similar Messages

Vertical repeating background slice from image

Hi. I'm trying to slice a portion of a Photoshop CS4 image and use it as a vertical repeating background at the top of a web page. Then I'm overlaying the full image in the horizontal center of the web page. No matter how much I try, the background slice image comes out a little washed out compared to the full image -- with a slight border to each slice.
What am I doing wrong? I've tried saving the image slice as GIF, JPG, and PNG, but they all produce the same result. Thanks.

I had the slice set to 2px wide. Once I zoomed in very close, I could see that the right pixel was lighter than the left one all the way down the slice. I had feather set to 0 and it still did this. I sliced it down to 1px and that fixed it.

Repeating background not repeating fully

Hi, on the page I have created below, I have made links with the green repeating background that can be seen. However I'm trying to get the background to expand to the width of the page. I've done this before successfully but when I enter my css to do it again, there must be an error.
http://angelsmovingservices.com

karina1717 wrote:
Hi, on the page I have created below, I have made links with the green repeating background that can be seen. However I'm trying to get the background to expand to the width of the page. I've done this before successfully but when I enter my css to do it again, there must be an error.
http://angelsmovingservices.com
Use this CSS and it should work:
#wrapper #header {
    /* float: left; */
    width: 980px;
    text-align: center;
    background-image: url(http://angelsmovingservices.com/images/movers-button.jpg);
    background-repeat: repeat-x;
I have removed the float by commenting it out and also inserted the image to the header. this means you don't need that image in the next CSS covering links.
#wrapper #links {
    width: auto;
    height: 35px;
    background-color: #5A7F0E;
    /* background-image: url(http://angelsmovingservices.com/images/movers-button.jpg);
    background-repeat: repeat-x; */
Good luck.

How to stop the auto change of the desktop background picture ?

How to stop the auto change of the desktop background picture ?

Well . . thanks, but I already have done that and I still have the problem. The background changes to the standard picture galaxy not to one of the options. Sorry my question wasn't clear enough.
Thanks.

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

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.

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/

Dynamic / re-sizing repeatable background

I need a dynamic / re-sizing repeatable background. It's a
200,200,200 to 255,255,255 gradient so I don't care about
distortion. I can't rationalize with the boss he wants it full
screen gradient no matter the resolution and he's driving me nuts.
Thanks,
Bill
Edit:
Here's my code:
<style type="text/css">

</style>
The background doesn't even show up when I preview it. I've
searched every help forum I can find on this and all are about
non-repeating backgrounds not showing up.

1. Don't use spaces in your filenames
1b. Backgrounds normally repeat, so it's not necessary to
restate that -
> background-repeat: repeat;
2. Rush your boss to the mental institution
3. This is not a resolution issue, it's a browser viewport
size issue
4. Rush your boss to the loony bin
5. To do this, you'd have to -
a. load the page
b. sniff the available space with client-side javascript
c. send the results back to the server so that a script there
can
dynamically resize the image to be used
d. fetch the image and page again
e. finally display it with the resized image
It's completely nuts....
This is why they say that bosses are like seagulls - they fly
in, crap on
everything, and then fly away.
> The background doesn't even show up when I preview it.
No doubt it's because you have used a root relative link to
the background
image, but do not have preview with temp files enabled in
your preferences.
The only way you can see images linked with root relative
links in a preview
is with temp files enabled.
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
==================
"William Rickert" <[email protected]> wrote
in message
news:[email protected]...
>I need a dynamic / re-sizing repeatable background. It's
a 200,200,200 to
> 255,255,255 gradient so I don't care about distortion. I
can't rationalize
> with
> the boss he wants it full screen gradient no matter the
resolution and
> he's
> driving me nuts.
>
> Thanks,
> Bill
>
> Edit:
>
> Here's my code:
>
> <style type="text/css">
> 
> </style>
>
> The background doesn't even show up when I preview it.
I've searched every
> help forum I can find on this and all are about
non-repeating backgrounds
> not
> showing up.
>

CSS Repeating Background

Hi
Could somebody talk me through implementing a repeating page
background using CSS (with attached stylesheet). I think I know
what the CSS should be but I'm not sure how to introduce the image.
The image is a simple Vertical bar with gradient running from
Full to transparent - you know the sort of thing!
Would be great if somebody could give me a very quick
tutorail as a reply so that I can see what I'm missing.
Thanks
C

body
background-image: url(your.gif);
background-repeat: repeat-x
"BlueEyedGirl" <[email protected]> wrote in
message
news:f22hs3$iqp$[email protected]..
> Hi
>
> Could somebody talk me through implementing a repeating
page background
> using
> CSS (with attached stylesheet). I think I know what the
CSS should be but
> I'm
> not sure how to introduce the image.
>
> The image is a simple Vertical bar with gradient running
from Full to
> transparent - you know the sort of thing!
>
> Would be great if somebody could give me a very quick
tutorail as a reply
> so
> that I can see what I'm missing.
>
> Thanks
>
> C
>

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

Combining 100 pngs with transparent background, vertically into one image PSE9

As the question suggests,
In PSE9 is it possible to combine 100+ PNG files (with identical dimensions & transparent background) into a single PNG file where the images are stacked vertically? and without trimming/cropping the transparent part of the image! I want to retain the exact original image dimensions so that they all stack neatly and precisely.
So far what I've tried is opening up the 100 PNG files in PSE9, create a new document with transparent background using the same width as the individual files and the height set to the individual file height multiplied by 100. (i.e. original image is 36 x 120 so the new file will be 36 x 12000) Then I get stuck! Whenever I drag a single file into the newly created document, it seems to be cropped to the image edges and no longer retains it's original height and width. Not to mention that hand dragging 100 files seems like a long-winded way of doing things... My automate button seems to be greyed out (so no contact sheet?) and I can't find any other automated process.
Any help would be greatly appreciated,
Thanks
N.
PSE 9 on Win 7

Please compare the resoultion of the two documents too. And a better way of arranging the layers would be to use distribute option in the move tool. You can find more about the move tool at http://helpx.adobe.com/photoshop-elements/using/moving-copying-selections.html#main-pars_h eading_0
Thus your workflow would be:
Create a new document with the required dimension.
Use File>Place to place all your png files on the created document as layers
Use distribute option in move tool
A still better workflow would be to use put all the files in a folder and write an ExtendScript to read the files and place them as layers on the document of said dimension

Applescript to start, stop and repeat background screensaver

HI.
I am very neww to applescript.
Please help me fix this applescript?
I get the error:
"Can’t make current application into type string."
This is my applescript
repeat
do shell script
                    "/System/Library/Frameworks/ScreenSaver.framework/Resources/ScreenSav erEngine.app/Contents/MacOS/ScreenSaverEngine -background &> /dev/null &"
                    delay 300
                    tell application "ScreenSaverEngine" to quit
delay 1
end repeat
Much appreciated!

Got it! Obivously a rookie mistake
repeat
          do shell script "/System/Library/Frameworks/ScreenSaver.framework/Resources/ScreenSaverEngine.a pp/Contents/MacOS/ScreenSaverEngine -background &> /dev/null &"
          delay 300
          tell application "ScreenSaverEngine" to quit
delay 1
end repeat

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

I have my swf file embed into an html page and currenly have
the background set to #000000. I want to change this to a jpg image
that repeats for the entire background. I want the swf file to
appear with a transparent background so the repeating image shows
through.
I have searched forums, but nothing seems to work for me. The
jpg image will be name "back.jpg" and is going to be located in the
same folder as the swf and html files.
GreenMartian

I finally found this tech note on making the flash movie with
a transparent background. If anyone needs this info.
Transparent
flash movie
Then, all I needed to do was set html background image to my
jpg file, and it worked fine.

How to make server behaviors repeat region vertical?

I have done many "Server Behavior, Repeat Region" showing vertical list without any other setup, now I’m doing a new one and is showing horizontal which doesn't make any sense. Does anybody know why and how to fix this “bad behavior”?

This is very simple page no external or internal css is for internal use only to retrieve data base information. I currently have to more from different sites working fine without any third party app or any extra coding effort. here are codes.
Thank you guys for your prompt response.
<?php require_once('Connections/customers.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
return $theValue;
$maxRows_Recordset1 = 10;
$pageNum_Recordset1 = 0;
if (isset($_GET['pageNum_Recordset1'])) {
$pageNum_Recordset1 = $_GET['pageNum_Recordset1'];
$startRow_Recordset1 = $pageNum_Recordset1 * $maxRows_Recordset1;
mysql_select_db($database_customers, $customers);
$query_Recordset1 = "SELECT * FROM customers";
$query_limit_Recordset1 = sprintf("%s LIMIT %d, %d", $query_Recordset1, $startRow_Recordset1, $maxRows_Recordset1);
$Recordset1 = mysql_query($query_limit_Recordset1, $customers) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
if (isset($_GET['totalRows_Recordset1'])) {
$totalRows_Recordset1 = $_GET['totalRows_Recordset1'];
} else {
$all_Recordset1 = mysql_query($query_Recordset1);
$totalRows_Recordset1 = mysql_num_rows($all_Recordset1);
$totalPages_Recordset1 = ceil($totalRows_Recordset1/$maxRows_Recordset1)-1;
?>
<!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=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Untitled Document</title>
</head>
<body>
<table width="158%" border="1">
<tr>
<th scope="col">ID</th>
    <th scope="col">Name</th>
    <th scope="col">Last Name</th>
    <th scope="col">Address</th>
    <th scope="col">City</th>
    <th scope="col">State</th>
    <th scope="col">Zip Code</th>
    <th scope="col">E-mail</th>
    <th scope="col">Phone</th>
    <th scope="col">Username</th>
    <th scope="col">Password</th>
    <th scope="col">Role</th>
</tr>
<tr>
    <?php do { ?>
      <td align="left"><?php echo $row_Recordset1['id']; ?></td>
      <td align="left"><?php echo $row_Recordset1['name']; ?></td>
      <td align="left"><?php echo $row_Recordset1['lname']; ?></td>
      <td align="left"><?php echo $row_Recordset1['address']; ?></td>
      <td align="left"><?php echo $row_Recordset1['city']; ?></td>
      <td align="left"><?php echo $row_Recordset1['state']; ?></td>
      <td align="left"><?php echo $row_Recordset1['zip']; ?></td>
      <td align="left"><?php echo $row_Recordset1['email']; ?></td>
      <td align="left"><?php echo $row_Recordset1['phone']; ?></td>
      <td align="left"><?php echo $row_Recordset1['username']; ?></td>
      <td align="left"><?php echo $row_Recordset1['password']; ?></td>
      <td align="left"><?php echo $row_Recordset1['role']; ?></td>
      <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</tr>
</table>
</body>
</html>
<?php
mysql_free_result($Recordset1);
?>

Auto-streching a x-repeated background vertically

Similar Messages

Maybe you are looking for