How to repeat a background image to cover the height of the page?

Hi
I have a page with an image alinged to the top in a table and
I have a pattern in the background of the cell in the same table
I need that background of the cell to repeat it self along
the height of the page, so when someone views the page at a higher
resolution, the background image will repeat it self to cover the
extra space.
I've tried setting the height of the table to percentage, but
the table doesn't cover the height of the page.
I could also make the table really long so when viewed at
higher resolution there wont be any blank space at the bottom, but
this makes an unnecessary and long scroll when viewed at lower
resolution.
Someone told me to use css but i have now idea how to
implement that.

make sure you have set your page margins to 0 if you don't
want the default
margin top left. Cut and paste the following into the head of
your document
just before the closing </head> tag.
then if you want to repeat a background image in a cell, you
need to create
a rule to do this:
.cellback {
/*this repeats the image across the page horizontally*/
/* if you want to repeat down the page, then change to
repeat-y */
background: url(pics/whatever.gif) repeat-x;
you can combine this background image rule with the other
margin setting so
you have:
<style type="text/css">
<!--
body {
margin: 0;
padding:0;
.cellback {
background: url(pics/whatever.gif) repeat-x;
-->
</style>
You then apply to the class to your cell
<td clas="cellback">
Examples here:
http://www.dreamweaverresources.com/tutorials/pagebackgrounds/cellbackground.htm
this shows how to use a background image for your entire
page:
http://www.dreamweaverresources.com/tutorials/pagebackgrounds/examplehor.htm
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.perrelink.com.au
- Web Dev
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.adobe.com/devnet/dreamweaver/css.html
> I have a page with an image alinged to the top in a
table and I have a
> pattern
> in the background of the cell in the same table
> I need that background of the cell to repeat it self
along the height of
> the
> page, so when someone views the page at a higher
resolution, the
> background
> image will repeat it self to cover the extra space.

Similar Messages

  • Expand the Background Image to Cover the Entire Region Title

    I have a region title that contains an image and it has a height of 2 rows but the background image (blue image) is not expanding in the area (the css contains repeat for the background). The application uses theme 2. Can someone help?
    CSS:
    .rc-title {
        background: url("../images/bg-region-blue-l.gif") repeat scroll 0 0 transparent;
        float: left;
        width: 100%;
    div.rc-blue-top
        background: url("../images/bg-region-blue-l.gif") repeat scroll 0 0 transparent;
        float: left;
        width: 100%;
    }I created the application on APEX.ORACLE.COM:
    Workspace: RGWORK
    User: TESTER
    Password: test123
    Application : CSRSR (33558)
    Select Signage from the menu (only choice).
    You will see that one of the tabular forms has Nameplates and an image, another tablular form has an image but no text (Nameplates) even though it is there. I would live the blue to cover both the image and the text.
    Please help
    DB: 10g
    APEX 4.1
    APEX 4.2 (APEX.ORACLE.COM) works the same way.
    Robert
    http://apexjscss.blogspot.com

    sect55 wrote:
    fac586 ,
    I would like to try the second option:
    >
    Another option would be to eliminate the problem by moving the nameplate images out of the region titles. There's horizontal space within the regions that will allow these images to be positioned to the left of the tabular forms, which would look OK.
    But how do I reference the horizontal space within the regions? I looked at the template for the region:
    <div class="rounded-corner-region float-left-100pct" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
    <div class="rc-blue-top"><div class="rc-blue-top-r">
    <div class="rc-title">#TITLE#</div>
    <div class="rc-buttons">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</div>
    </div></div>
    <div class="rc-body"><div class="rc-body-r"><div class="rc-content-main">#BODY#<br />
    </div></div></div>
    <div class="rc-bottom"><div class="rc-bottom-r"></div></div>
    </div>and couldn't find out to put the image in the horizontal space.
    Can you please help me by providing the details? There are two options, depending on the role you see the nameplate images playing on the page. I've used the two regions to provide one example of each.
    *1. Nameplate as eye-candy:* If there's sufficient information in the region title, region content and item labels to make the nameplate images superfluous in providing information to the user, and you're just using them to improve the appearance of the page, then they can be applied purely using CSS.
    /* Nameplate image as CSS eye-candy */
    #nameplates-ndc div[id$="catch"] {
      min-height: 36px;
      padding-left: 113px;
      background: transparent url(#WORKSPACE_IMAGES#nameplate_ndc.gif) top left no-repeat;
      background-size: 103px;
    }Note the use of the CSS3 <tt>background-size</tt> property to resize the image. If the app has to run in browsers that don't support this then you'll have to drop it and create an image of the exact size required for use in the <tt>background</tt> rule.
    *2. Nameplate as content:* If the nameplate images are necessary to provide information to the user, then they have to be included in the region (and they must have an <tt>alt</tt> attribute providing an alternative representation of the information contained in the image).
    Put the image in the region Header:
    <img src="#APP_IMAGES#nameplate_n.gif" width="103" alt="Nameplate (name only)" />and float it so it sits alongside the form:
    /* Nameplate image as page content */
    #nameplates-name .rc-content-main img {
      float: left;
      margin-right: 10px;
    }

  • How to set a background image to fill the entire screen on any device in a spark mobile application

    Hi,
    I started developing a mobile application with Flex.
    I'm trying to set a background image to fill the whole screen. I've been stucked at this point for days now. I tried everything and no solution seems to work for me.
    I'm using a TabbedViewNavigatorApplication and i need to set some background images on views.
    I need my image to fill the entire screen on any device. i don't need to mantain image aspect ratio,  just need it to be fullscreen. This seemed to work when setting a custom skin on the TabbedViewNavigatorApplication, however this blocked all my views for some reason and all components contained in view became invisible.
    Can you please tell me how can i achieve this?
    Kind regards,
    Dan

    Basically you need a larger image which can accommodate any device. The trick is to show only what each device can display, so therefore some clipping will occur based on device. Have something centered and towards margins have a  gradient or just plane colors that way the stuff in the middle will be visible on every device while nobody will care if you are clipping from the color fill.
    C

  • When viewing some websites my desktop background image shows as the page background...why...and how do I fix this?

    It seems that the current version of Firefox does not understand how to process style sheets. Instead of the stylesheet background color or image, I am now seeing my PC's desktop background image. This does not happen with IE or Chrome. When checking the error console, I get "Warning: Unknown property 'zoom'. Declaration dropped. Source File: http://trustserve.net/themes/ModernBlue/templates_cached/EN/global.css Line: 4"
    I am not trying to zoom.
    Any ideas on how to fix this. I can't use Firefox with these problems and I really liked it prior to these problems.

    I thought I had it disabled. I enabled aero and then disabled to be sure, and still have the problem, but that was a very good idea. Thanks.
    The problem started shortly after I installed two new programs, a graphics program, and an anti-virus. I just removed both programs and restarted the computer and that seems to have solved the problem. Your idea about Aero gave me the idea that one, or both of these programs changed some of my system settings. I am now going to install them, one at a time, and see if the transparency problem returns. I'll post my findings.

  • How to place a background image, so that the text layer, without having to use a text box

    Hello,
    I have a problem with the placement of the background image. When I normally formatted text on a page and add the image you want on the background of the text and the handle on the back is still image over text, just no longer responds to wrap text.
    The second problem is adding a new page to the document. I have unfinished document and I need to add a page before the current ... how?
    This is a new Pages.
    Thanks for the advice

    Helps to know exactly what version of Pages you are using.
    I assume Pages 5.1. But the last post makes me wonder.
    Text Wrap only works on text under an object. Either it is in front causing text wrap or it is in the background with none. It is unclear what you are trying to achieve.
    Click at the very beginning of your text:
    Insert > Section Break/Page Break
    Peter

  • How do I add an image already in the page to a slide show ?

    It seems so simple: I have a couple of images already spread out on a page, but later on I decide to collect them into a simple slide show after all. So I drag this Slide Show widget into place, and now ? Yeah, I know, I should use the button to select new images into it, or drag them as files from my Finder onto the Slide Show. But I already have them sitting on my page ! Isn't there a quicker and better way ? I tried copying and pasting in a lot of ways, and I can change the existing (three) sample images, but it's not even so easy to do it. Anyone ?
    BTW, I know I could use Compositions, and at least they offer a simple + button to add extra instances to the widget. But I'd like to these plain vanilla Slide Show widgets in this situation.

    Hi,
    I used a blank slideshow, and then I dragged an existing image from the page and drop to the slideshow, it works absolutely fine, check this screenshot
    is that what you are referring here, or did I miss anything

  • How do I remove background images from a PDF?  Using Adobe Acrobat 6.0 Standard.

    I have a file I need to print off, but the document is 100 pages lond and each page as a very obnoxious background image that makes it difficult to read the content, and I really don't want to waste the ink.
    I have tried a few things with no luck:
    -Tried replacing document background color in the 'Accessibility' tab in preferences.
    -Tried unchecking the 'Display large images' field in the 'Page Display' tab in preference - this leaves a dark gray background that I can't get rid of, which is almost as bad as the original image.
    -Tried several combinations under the 'Color Management' tab in preference to lessen the gray background achieved from the previous step.  I can only brighten the shade slighty, but there is still a fair amount of gray background.
    I just want a white background, or a clear background, and I have not seen any article or help topic on how to accomplish this.  Please help!
    Mike

    You might want to see if you can select the background with the object touchup tool. If so, can you then just delete the selected object. May take a while to go through the document, but if it solves the problem you are ahead. You may be able to select it with JavaScript and repeat the process. My point of using the object touchup tool is that it may not be a background set by Acrobat, but something that is simply labeled as an image from the Acrobat viewpoint.

  • How to add different background image for submenu items???

    Hi all,
    I'm pretty new to web design and CSS in particular. Here's my problem...
    I've got a Spry horizontal menu bar (untouched as yet), and I want to have a different background image for my submenu items than that of my menu items. From searching the internet I think that I need to apply a class to the submenu item (please correct me if I am wrong).
    How would I go about doing this and how would I assign the class to just the submenu items?
    Also ideally I want to have my first and last menu items to have rounded corners on one side (therefore making a rounded edge menu bar), is it possible to have a different background image for individual menu items? If so, how?
    Really appreciate any help!

    Thanks for the link! I've managed to sort the background issue, and it seems to be working fine!
    Just one little issue left to tackle...
    I want my text to be centered in my top menu items BUT aligned left in my drop down menu items. I have managed this but the text hugs the left hand side. I've tried adding a little margin to the left but that doesn't seem to affect anything???
    Here's my CSS... Any ideas which class I should be targeting or why adding the margin isn't working would save my tearing the rest of my hair out! thanks! (screenshot attached).
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        cursor: default;
        width: auto;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
        z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        margin: 0;
        list-style-type: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 120px;
        float: left;
        height: 24px;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
        background-repeat: repeat-x;
        background-color: #333333;
        background-image: url(../images/navbar_bg.jpg);
        border-right-width: 1px;
        border-left-width: 1px;
        border-right-style: solid;
        border-left-style: solid;
        border-right-color: #000000;
        border-left-color: #666666;
    ul.MenuBarHorizontal li li
        list-style-type: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: auto;
        float: left;
        height: 24px;
        background-color: #333333;
        background-image: none;
        padding: 0;
        margin: 0;
        left: -1px;
    ul.MenuBarHorizontal li li a
        list-style-type: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        float: left;
        height: 24px;
        background-image: none;
        font-size: 12px;
        font-weight: normal;
        border: 0px 0 0;
        width: 120px;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        padding: 0;
        margin: 0;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
        margin: 0;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: 120px;
        position: absolute;
        left: -1000em;
        height: 24px;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
        left: auto;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        height: 24px;
        width: 120px;
        margin-top: -5%;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal li a
        display: block;
        cursor: pointer;
        text-decoration: none;
        font-style: normal;
        text-transform: capitalize;
        text-align: center;
        white-space: normal;
        padding: 0px;
        height: 24px;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 20px;
        margin: 0px;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        background-color: #000000;
        background-image: url(../images/navbar_bg_hover.jpg);
        background-repeat: repeat-x;
        line-height: 22px;
    ul.MenuBarHorizontal li li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        background-color: #000000;
        background-image: none;
        background-repeat: repeat-x;
        width: 120px;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
        background-repeat: repeat-x;
        background-position: 95% 50%;
        background-color: #333333;
        background-image: url(../images/navbar_bg.jpg);
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
        background-repeat: repeat-x;
        background-position: 95% 50%;
        background-color: #000000;
        background-image: url(../images/navbar_bg_hover.jpg);
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
        position: absolute;
        z-index: 1010;
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;

  • How do I fit a background image to fill the entire page?

    Hi,
    could anyone please tell me how I use e.g. a jpeg image as a background image that fits the entire page without getting horizontal or vertical scroll bars?
    Thanks

    Hi Pziecina and Nancy O.,
    thank you so much for your mails. However, I'm still trying to figure this out.
    @ Pziecina...I studied the source code of your webpage and tried to insert parts of it into my own page in different variations. The solution to my problem must have something to do with CSS and img src height and width. All I get is a white page. I found out that an image size set in Photoshop apparently doesn't have any effect on whether the image fills the browser 100% or not.
    @ Nancy O. What I'm trying to do is to use one single image as background for a single page on the website, I'd like to construct. An image that opens up to the entire width of the screen...not just the browser. I imagine this with layers of transparent/solid color for text fields. I studied the website page, you suggested and a repeat action is not what I aim for. And I realize that maybe I'm thinking too much in Photoshop terms...thinking I can do similar actions in Dreamweaver.  I'm well aware of the whole thing being 'too much' in terms of design and usability but if you check out www.frauhaus.dk I think that works beautifully, although it doesn't open up to the entire screen. I'd like to see if that design concept will work for my own website or if it's going to be too confusing.
    And to both of you I really appreciate your time and input, thanks. Even though I'm still getting grey hairs as a beginner I keep thinking that there's got to be a solution to this.
    Best regards from MissRaspberryDream

  • I would like to know how to stretch a background image using HTML

    Hello Seniors of Sun,
    I gota small doubt in HTML, can any one please help me in solving it,
    I would like to know how to stretch a background image using HTML? I have tried and tried to figure this out and cannot..
    so any one kindly help me in this...
    waiting for reply...

    Please note that this is not an HTML forum.
    You can use an image tag on a DIV positioned behind the rest of the page, so that could actually work. And if you want to use body:background, then look up an HTML/CSS reference and see if there are any other body attributes or CSS stuff that applies to the background image.

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

  • How can I make an image placed in the body tag expand to the entire width of the browser?

    How can I make an image placed in the body tag expand to the entire width of the browser?I

    background-repeat -- best used with small image tiles.
    background-gradient  - Ultimate CSS Gradient Generator - ColorZilla.com
    background-size:cover - Resizable Full Page Background Image
    Nancy O.

  • Background image to fill the whole screen

    Hi everybody
    Please assist,
    1st question : I want to add the background image that fit the whole screen. I have tried to put image background however it leaves white spaces on the edges and another thing is that after adding the background image when I add content in the tables the background image start to repeat.
    This is the website example I want to achieve : www.inesjaksic.com , www.grupa-desperado.com
    www.street-heroes.com
    2nd question : How to add the scroll bar on the text content, so when you scroll only the text moves.
    Website example : http://www.kls.com/page.php?p=about/biography/index
    Thank you in advance for your help.
    Kind regards
    Vusi
     

    #1 Background images are static.  They don't resize to fill the browser viewport without a lot of additional tricks which may or may not work in all browsers.   Moreover images that resize quickly become distorted.   For best all around results, build your page to a fixed-width target audience (990px is usually fine for most users).  Use a seamless background tile or gradient slice and repeat it vertically (repeat-y), horizontally (repeat-x) or both ways (repeat).
    #2 Use CSS overflow and height property.
    #divName {
    height: 400px;
    overflow: scroll;
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • How do i get my image to fill the whole page in pages

    I am making an epub book and would like the image on my cover page to fill the whol page without the large white borders around it. How can I do that in pages. I know you can't export a document as an epub if it has floating objects in it but i don;t know if thats a problem for this application or not. Thanks

    Menu > File > Page Setup > create a custom paper size of 9" x 13.5" > set all margins to 0 > Format > Any Printer > OK
    Create your custom cover as a jpeg and crop to 9" x 13.5" or proportional pixel equivalent.
    Import your cover onto the first page of your ebook.
    Inspector > Wrap > Object Placement > Inline...
    Stretch cover image to fill the page.
    Menu > File > Export > ePub > Use first page as book cover image
    Haven't tried this myself, but this is what is recommended.
    Peter

  • How do I import an image directly from the internet without printing and scanning it in first?

    How do I import an image directly from the internet without printing and scanning it in first?

    You can also Ctrl click on the image, save the image to your desktop and open it in Photoshop.
    1.
    2.
    3. Open in Photoshop by double-clicking on the saved image on your Desktop or Cmd o in Photoshop.
    I don't see any point to copying and pasting from a browser into a new file in Photoshop.
    If you want to put an image onto an already open image in Photoshop, use the File > Place... command and select your saved image.
    Gene

Maybe you are looking for

  • TS1347 Day View in Calendars - iPhone 4S upgraded to ios 7.1 and no more Calendar Day View??

    I upgraded my IPhone 4S to ios 7.1 and now I can no longer view my Calendar by Day only.  I have a toggle at top of Calendar that allows me to switch between a monthly calendar, or monthly calendar with a few appts on bottom of screen that I have to

  • Cannot select landscape photos as a desktop background from iPhoto events.

    In the desktop preferences screen, when choosing a desktop background, I am able to see all of the normal options at the left. However, when I choose an image from the "iPhoto Albums" section, only vertically oriented images work. Landscape-oriented

  • Update Termination during Billling

    Hi , We are facing one major issue at the time of billing, the scenario  is, Scenario : we have maintained the TEXT ID  for serial number in order item ,and we have made settings such that the value in Text id  gets copied to the same id in Delivery

  • IPad Music Playlist very laggy in iOS 5

    I have noticed that when selecting playlists in the new music player of iOS 5 that my iPad 2 music software hangs and is very laggy in trying to scroll down, and when selecting a playlist. Is there a problem with the new software / iOS? Any one else

  • Page header on mode_show_help

    How can I change the page header on the page that gets opened by calling mode_show_help? I'd like to have the help pages maintain the consistancy of the look of the portal. thanks, adam