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
>

Similar Messages

CSS Problem - Background repeat & Max/Min Width

I have the problem at lower resolutions that the content div sticks out of the main document.
Or in fact, the content isnt sticking out, its the background repeat that is in the right of the screen thats pushed into the doc.
And also the background repeat isnt always repeating till bottom. It doesnt matter how big a negative margin is.
How can i let the background repeat right stick to the end of the document instead of the width of screen?
How can i let the repeat continue so it goeas all the way down?
Here's the CSS:
@charset "utf-8";
/* CSS Document */
/* Main Floats */
html,body {
     height:auto;
     min-width:800px;
     width:auto;
     background: #FFFFFF url(../Art/Background.png) no-repeat center;
     background-attachment:fixed;
     color:#000;
     margin:auto;
#BackGrRepeat1{
     float:right;
     height:auto;
     width:auto;
     min-width:800px;
     background: transparent url(../Art/greenfade_right.png) repeat-y right top;
     background-attachment:fixed;
     margin-right:-0px;
     margin-top:-10px;
     margin-bottom:-150px;
#BackGrRepeat2{
     float:left;
     height:auto;
     width:auto;
     min-width:800px;
     background: transparent url(../Art/greenfade_left.png) repeat-y left top;
     background-attachment:fixed;
     margin-left:-0px;
     margin-top:-10px;
     margin-bottom:-150px;
#WContainer{
     margin: 10px auto;
     width:80%;
     background:none;
     min-height:50%;
     line-height: 130%;
#WHeader{
     padding: .5em;
.TabbedPanelsContentGroup{
     min-width:600px;
.VTabbedPanels .TabbedPanelsTabGroup {
     float: left;
     width: 172px;
     background: none;
     margin: 0;
     margin-left:-3em;;
.VTabbedPanels .TabbedPanelsContentGroup {
     margin-left: 172px;
     min-height:18em;
     padding: 2em;
     border-left: solid 1px #999;
     border-bottom: solid 2px #999;
     border-top: solid 1px #999;
     border-right: solid 2px #999;
#WFooter{
     clear: both;
     margin: 0;
     padding: .5em;
/* Text Styles */
h1{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#05692E;
font-weight: bold;
font-style:italic;
font-size: 3em;
line-height:105%;
h2{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#078330;
font-weight: bold;
font-size: 2em;
line-height:105%;
p{
font-family: "Verdana", verdana, arial, helvetica, sans-serif;
font-size: 1em;
margin-top: 0;
.small{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
font-size: .7em;
text-align:center;
/* Menu Buttons */
.TabbedPanelsTabGroup ul{
list-style-type: none;
padding: 0px;
margin: 0px;
.TabbedPanelsTabGroup li{
list-style-type: none;
padding: 0px;
margin: 0px;
.Button a{display:block;}
.Button a:hover{background-position:left bottom;}
a.Button {display:none}
/* Text Images */
.floatright
float: right;
width: 100%;
margin: 5px auto;
background-color: #fff;
padding: 5px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
div.floatright img
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
.floatleft
float: left;
width: 100%;
margin: 5px auto;
background-color: #fff;
padding: 5px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
div.floatleft img
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
/* Message Screens */
#message{
     margin: 50px;
     min-height:18em;
     padding: 2em;
     border-left: solid 1px #999;
     border-bottom: solid 2px #999;
     border-top: solid 1px #999;
     border-right: solid 2px #999;

I think you're going about this the wrong way. When you float content, it is removed from the normal flow. That's why your floated right background doesn't reach page bottom.
Look at this DEMO of a centered liquid layout page.View source in browser.
http://alt-web.com/TEMPLATES/CSS2-Liquid-Page.shtml
Using my demo as an example, you could place a repeating, solid light-green image in the body to give the page its borders. Add another repeating background to the #wrapper division.
Add a 3rd background image or light color to the #content division.
Use floats for sidebar content only.
Hope this helps.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.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.

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

CSS and Background Images

I am trying to create a page using CSS. I have a background
image that tiles like I want it to. Here is the CSS:
padding: 0;
Margin: 0;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position:center;
I want some of my various other divs to lay on top of this
background but have a different background color that overlays the
page background image. Instead of taking the background color I
specify, the main page background above shows through. For example
below, the dark brown background doesn't show:
#nav {
margin-left: 4px;
width: 802px;
height: 26px;
background-color:#211400;
Thanks in advance for helping.

This is what I did for mine:
background-image: url("../images/background.gif");
Erin
"Mike Dockray" <[email protected]> wrote:
>
Can u put floating background images in the CSS.
eg. background: #fff url(images/backgrd.jpg) bottom right no-repeat fixed;
if so what is the context, find the color but not the image, url is relative
to
what ????
(yes , i'm a newbie, first day on the case :)

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

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

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

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

CSS style -Background not showing ?

hi everybody ,
first of all i'm quite new to Dreamweaver and webdesign word so ... sorry if i make mistakes
when trying to prewiew my site , or in dreamweaver itself , i cant see my background (is a .png file made whit photoshop , a simple gradient whit some effects)
i tryed to use the site manage , and set the image default folde , but this didn't resolved anything !
this is my HTML code (oh yes , i'm writing the site in HTML5):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="CSS/SitoCSS.css" rel="stylesheet" type="text/css">
</style>
</head>
<body>
<div id="Principale"></div>
</body>
</html>
And the CSS style page:
@charset "utf-8";
/* CSS Document */
body {
          background-color: #03F;
          background-image: url(Images/sfondo.png);
          background-repeat: no-repeat;
          margin-left: 0px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
#Principale {
          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
          background-color: #000;
          float: left;
          height: auto;
          width: 901px;
thank you all
Bye !

Without seeing the live page its difficult to analyse BUT here's a couple of things you could look at:
1) Is the name of your folder really Images with a cap 'I' or is it images with a lower case 'i' ?
Images/sfondo.png
2) Is your png file saved as RGB and not CYMK color space?
3) Looking at what you have posted the path to your bg image is probably incorrcet
background-image: url(Images/sfondo.png);
Should be: (note the ../ infront of the Images folder name):
background-image: url(../Images/sfondo.png);

CSS shorthand background problem

Like many of you I'm sure, I prefer to write shorthand CSS.
In
Preferences I have shorthand checked for all five options and
"When
editing CSS rules" set to "According to settings above."
However when I try to write a shorthand background rule it
doesn't work.
I prefer to write my background as:
background: #fff url(../images/quoteleft.jpg) left top
no-repeat;
I should be able to type:
background: c
...and have DW's color swatch functionality kick in, then
url, then
browse, etc. But the only options it gives me are:
background-color
background-attachment
background-image
background-position
background-repeat
inherit
Does anyone know how to get DW's CSS shorthand working
properly?

Have you tried right clicking at that point?
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
==================
"ryansebiz" <[email protected]> wrote in
message
news:errb96$od$[email protected]..
> Like many of you I'm sure, I prefer to write shorthand
CSS. In Preferences
> I have shorthand checked for all five options and "When
editing CSS rules"
> set to "According to settings above."
>
> However when I try to write a shorthand background rule
it doesn't work. I
> prefer to write my background as:
>
> background: #fff url(../images/quoteleft.jpg) left top
no-repeat;
>
> I should be able to type:
>
> background: c
>
> ...and have DW's color swatch functionality kick in,
then url, then
> browse, etc. But the only options it gives me are:
>
> background-color
> background-attachment
> background-image
> background-position
> background-repeat
> inherit
>
> Does anyone know how to get DW's CSS shorthand working
properly?

CSS for background image not transfering from template to new page

I have a gradient .gif in my templates which suddenly no longer transfers from the template to a new page created from the template. Everything else about the template transfers. I'm using Dreamweaver CS5 on a Mac running OS 10.6. I've pasted the CSS from the template and the new page below. I've tried the usual voodoo--restart program, restart computer, repair permissions, delete preference file, delete personal configuration file.
CSS from Template:
.container {
    background-color: #ececec;
    background-image: url(../images/faux_column.png);
    background-repeat: repeat-y;
    height: 650px;
    width: 650px;
CSS from page created from Template looks to be the same, but is greyed out in the code, and the background-image entry is not present in the CSS styles inspector:
.container {
    background-color: #ececec;
    background-image: url(../images/faux_column.png);
    background-repeat: repeat-y;
    height: 650px;
    width: 650px;
Any suggestions greatly appreciated.

Unfortunately, I don't yet have a site where I can post the page. I'm new to this, and doing everything locally for now.
After careful rechecking, I found that the links for the template and the child were not the same, as you suspected. So I carefully changed the links to site root relative, which worked for the background CSS in my test image. I then did the same for all of the links to pages on my site, and checked that all were OK with Link Checker in DW. I guess that was a mistake, because now most of them don't work when tested in Firefox--I get the message File not found. Must be doing something wrong.

CSS image background issues - please help!!!

I have a stubborn file that doesn't seem to want to display image backgrounds called out by CSS. In my DW file I can see the background images in Design View, but when I go to Live View or preview in a browser they're not showing. No broken link or unrecognized file type icons - just not there. It doesn't matter if I'm working on the file locally or on my test server; the result is the same.
Example 1:
CSS callout looks like this:
#logo h1 {
float: left;
    width: 189px;
    height: 71px;
    background: url(/images/menu_logoblock.png) no-repeat top left;
HTML callout looks like this:
<div id="logo">
             <h1></h1>
     </div>
Example 2 (toggle image on rollover):
CSS callout looks like this:
a#prod1 {
        width: 193px;
        height: 140px;
        text-indent: -9999px;
        background: transparent url(/images/image_name.jpg) no-repeat 0 0;
        margin-left: 0;
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
a#prod1:hover {
            background-position: 0 bottom;
HTML callout looks like this:
<div id="products">
            <ul>
                <li><a href="#" id="prod1" title="Title" alt="Totle goes here"><strong>Title goes here </strong></a></li>
               </ul>
     </div>
I have successfully used both methods on other pages without problem, but for whatever reason can't get it to work today. I have a reset css file link to reset the browser defaults this time around and that's the only difference.

Did you save your images for the web in RGB mode? Most browsers don't support CMYK.
Is your code valid? Modern browsers are becoming less foregiving of code errors.
Code Validation Tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

CSS Repeating Background

Similar Messages

Maybe you are looking for