HTML background image stops being replicated in long page

This is a straight HTML (no JavaScript, no CSS) page with a tiled background image (128x128 pixel JPEG). After about 2/3 of the roughly 3,000 lines of this page the background image stops, with a smooth horizontal divide: the tiled image background above, and a white background below. The discontinuity moves up and down some while scrolling this page, but remains a clean horizontal break.
This is new behavior with Firefox 7. The background image was displayed throughout the full page with Firefox 6 and earlier.

Hi vestibule, the home page renders out to 42072.5px tall, and Firefox has a bug that limits backgrounds to a height of approximately 32735px tall. See [https://bugzilla.mozilla.org/show_bug.cgi?id=671302 Bug 671302 – cairo-gdi: large background-images and gradients don't work beyond ~ 32735px].
This bug is coming up on a year old and for some reason hasn't been fixed yet, perhaps because such long pages are relatively rare on the web. ??
Until that is resolved, to make the "transition" less jarring, you can add a matching background color (this is the closest I can come up with at the moment):
<br>body {
background-image: url(Image_Files/parchmnt.jpg);
background-color: #f8f8d4;
}

Similar Messages

  • Using Flash as HTML background image?

    Can I use a SWF as a HTML background image?
    I've tried this a couple of different ways...
    Any tricks to make this work?

    davidlieb wrote:
    > Can I use a SWF as a HTML background image?
    No, you can't use SWF in html background.
    The background does not allow any active content.
    Best Regards
    Urami
    !!!!!!! Merry Christmas !!!!!!!
    Happy New Year
    <urami>
    If you want to mail me - DO NOT LAUGH AT MY ADDRESS
    </urami>

  • Background image is being printed on some web sights eg bank receipts are printed with a coloured background

    '''when printing a receipt or statement from my one of my local banks the item is printed with a blue colour in the background, right clicking on the web page and selecting view background image displays this colour , how do i turn this colour off on the web sight to stop the waste of ink
    '''

    Well, I figured this one out as well. It was quite stupid
    actually. Like I said in my other "self-answered post" I'm going to
    briefly describe the solution for anyone who might need the help.
    When Crossword Forge exports your file for the web it makes a
    folder with that crosswords documents and it's background image.
    You told Crossword Forge what image to use for the
    background. Even though it makes a new jpg for your background, it
    still has to reference the original. Keep those originals in your
    local root folder. don't move them. Crossword Forge will have a
    hissy if it can't find the original image. Yeah, even though it
    creates a new image.

  • Css background image stopped working despite no code change

    My background image was working fine. Then, without me changing the code, it stopped working. The URL I referred to exists and ends in .jpg.
    When I first load Thimble the background shows up for a split second, then disappears again.
    Here is the code
    background-color:#051c1c;
    background-image:url("http://www.rosesandrattlesnakes.com/cssbg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: top center;
    color:white;
    font-family:'Trebuchet MS', sans-serif;
    text-align:center;
    padding:0;
    I tried removing the quotation marks. That didn't fix it. Tried removing www. That didn't fix it. Tried making the link https. That didn't fix it.
    Also, hints doesn't work, whether the checkbox is ticked or not.
    Gotta say Thimble kinda sucks. Sorry

    Hello,
    I am glad to hear that your problem has been resolved.
    If you have not already, please mark this thread as solved by marking the solution.<br>
    This will help other users experiencing similar problems find help faster and more efficiently.
    I hope you continue using our products and thank you for contacting Mozilla Support.

  • Background Image Cuts Off - Browser Scroll Isn't Long Enough

    Okay, fairly new to Dreamweaver, long-time graphic designer. That said, the answer will probably be easier than trying to explain the problem!
    Using the Page Properties, I set the following in the Appearance (CSS) tab:
    Background color to #000
    Appearance HTML Background image (contains the image in question, created in Photoshop)
    No-repeat
    This Photoshop image is kind of long (960 x 2232) because there is a bunch of text that needs to flow on top. I thought that I reached some sort of maximum in height and so I reduced the height of the image a little and the same problem--cut off at the bottom of the browser. Note that this cut off issue was not a problem until I extended the graphic to this long length. On other pages, it is much shorter and all is well.
    I've pasted a snapshot of the bottom of the web browser preview below. You can see that the scroll bar is at the bottom and there is just a small bit of the paper that is not showing. I would like the bottom of the paper to be seen with a little bit of the black background beneath that.
    My first instinct is that I'm missing a bottom padding effect, but can't find where to adjust that type of setting.
    Another Thought--I would much rather this graphic auto expand as the text flows over it, but did not know how to accomplish that, so I extended the graphic in the Photoshop file. Its not a tile type of image that can be repeated. It is an ancient looking paper, therefore, the top and bottom need to look a certain way, but the mid section could be tiled and repeated. So if this is a better route, please direct me on where to learn how to implement.
    Thanks a bunch!

    extra carriage returns were needed in the text frame to extend below the background image.
    Rule #1 in web design:
    Do not use non-breaking spaces, line breaks or empty <p> tags as a layout device.  It doesn't work in all devices or by all users.
    Rule #2 in web design: Use CSS to style your layout with margins, padding and min-height properties.
    HTML & CSS Tutorials - http://w3schools.com/
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Background image to fit in DW WYSIWYG editor using HTML

    I am trying to create an HTML background that will serve as the landing page on my website. I need help with formatting the image to fit the entire screen so that it does not scroll down or repeat. Also. Once this is done. I would like to upload it onto my website background page. I am using the WYSIWYG editor because for now. I can somewhat make sense of it. However am stuck trying to get the image to fit perfectly. I am not using CSS and don't wish to either. I understand HTML a little better. Please, help. I've been stuck for days at this rate.

    Unfortunately, you can't design modern websites without a good grasp of both HTML and CSS code.  Don't limit yourself with Design View only.  Use Split View so you can see the code DW is creating.
    http://w3schools.com/
    http://www.csstutorial.net/
    http://phrogz.net/css/HowToDevelopWithCSS.html
    To answer your question about BG image.  Use CSS background-size property with vendor prefixes.  This can't be done with HTML.
    CSS Code:
    body {
          background: url(your-BG-image-here.jpg) no-repeat center center fixed;
          /**for Safari,Chrome**/
           -webkit-background-size: cover;
         /**for Firefox**/
           -moz-background-size: cover;
          /**for Opera**/
           -o-background-size: cover;
          /**for all other browsers**/
          background-size: cover;
    Nancy O.

  • Background Image Disappears in Design View

    Hi, I am new to website design and just recently the background image stopped showing up in design view.  When I switch to live view and check in the browser though the background shows up again.  It used to work before but it just stopped working recently.  I have been trying to find a solution but it has not been working out.  If anyone has any ideas as to what could fix my problem, it would be greatly appreciated.
    Here is my css
    @charset "UTF-8";
    #container {
              height: 1280px;
              width: 960px;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: auto;
              margin-left: auto;
              position: relative;
              background-image: url(../Images/background%20copy.jpg);
              background-repeat: no-repeat;
    h3 {
              margin-top: 420px;
              margin-bottom: 195px;
              text-align: center;
              position: absolute;
              margin-left: 437.5px;
              text-transform: capitalize;
              font-variant: small-caps;
              font-size: 24px;
              font-style: inherit;
              text-decoration: underline;
    h2
              margin-top: 160px;
              margin-bottom: 195px;
              text-align: center;
              position: absolute;
              margin-left: 230px;
              text-transform: capitalize;
              font-variant: small-caps;
    p1
              margin-top: 350px;
              position: absolute;
              margin-left: 40px;
              margin-right: 60px;
              font-size: 18px;
              text-align: center;
    When i turn it on live view it is also formatted correctly and everything.  But when it is on just design or split view the text and all of the pictures don't follow any of the css.          

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>LADC Companies</title>
    <meta name="keywords" content="LADC Companies,commercial lawn service, services, snow removal, concrete romval, Home Depot, Kohl's">
    <link href="CSS/styles.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    #NavBar {
              height: 36px;
              width: 960px;
              margin-right: auto;
              margin-left: auto;
              margin-top: 102px;
              margin-bottom: 146px;
              border-top-style: none;
              border-right-style: none;
              border-bottom-style: none;
              border-left-style: none;
              position: absolute;
              left: auto;
              top: auto;
              right: auto;
              bottom: auto;
    #apDiv1 {
              position: absolute;
              width: 200px;
              height: 115px;
              z-index: 1;
              left: 65px;
              top: 197px;
    #apDiv2 {
              position: absolute;
              width: 207px;
              height: 143px;
              z-index: 1;
              left: 268px;
              top: 197px;
    #apDiv3 {
              position: absolute;
              width: 201px;
              height: 142px;
              z-index: 1;
              left: 204px;
              top: 0px;
    #apDiv4 {
              position: absolute;
              width: 200px;
              height: 115px;
              z-index: 1;
              left: 684px;
              top: 205px;
    #apDiv5 {
              position: absolute;
              width: 200px;
              height: 115px;
              z-index: 2;
              left: 410px;
              top: 13px;
    #apDiv6 {
              position: absolute;
              width: 200px;
              height: 115px;
              z-index: 1;
              left: 204px;
              top: 0px;
    </style>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    </script>
    </head>
    <body onLoad="MM_preloadImages('Images/navover_01.gif','Images/navover_02.gif','Images/navover_ 03.jpg','Images/navover_04.gif','Images/navover_05.jpg')">
    <div id="container">
      <div id="NavBar"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','Images/navover_01.gif',1)"><img src="Images/background-copy_01.gif" width="192" height="36" id="Home"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About us','','Images/navover_02.gif',1)"><img src="Images/background-copy_02.gif" width="192" height="36" id="About us"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','Images/navover_03.jpg',1)"><img src="Images/background-copy_03.jpg" width="192" height="36" id="Services"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gallery','','Images/navover_04.gif',1)"><img src="Images/background-copy_04.gif" width="192" height="36" id="Gallery"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact Us','','Images/navover_05.jpg',1)"><img src="Images/background-copy_05.jpg" width="192" height="36" id="Contact Us"></a></div>
      <h2>LADC Companies... "your #1 outsource resource"</h2>
      <h3>Services</h3>
      <p1>LADC Companies has strived to put the service back into "service" since it started in 1986.  Since that time LADC has delivered, as promised, its commitment to first rate quality service with in-house personnel to meet its client strict demands and expectations.</p1>
      <div id="apDiv1"><img src="new truck.JPG" width="204" height="143" /></div>
      <div id="apDiv2"><img src="IMG_2425.jpg" width="204" height="143" alt="HOME depot" />
        <div id="apDiv3"><img src="Images/2011-07-26_12-59-24_137.jpg" width="204" height="143" />
          <div id="apDiv6"><img src="Images/DSCN0147.jpg" width="204" height="143" alt="concrete" /></div>
        </div>
    </div>
    </body>
    </html>

  • Background image on iweb site not showing

    I created a web site using iWeb sometime ago. I used all of the templates provided with the app. Since "me" has come along, all the content on my page displays, BUT the background image on ALL of the pages no longer shows. I republished the site to see if that would fix the problem, but no dice... Does anyone have any suggestions?

    I am searching the boards here, because I am having the same problem. My husband's site had dropped the background image from just one of the pages. I re-built that page for him, and it was fine. Now I'm having the same problem with mine. Again I rebuilt the initial page with the error, but now multiple pages say they're missing the background jpg file. What's up with this? And how do we get it back without having to re-build each darn page???
    I have made no changes to my computer. No new updates. Just one day it was there, and the next day it was gone. I am frequently accessing my website to make updates (at least weekly), so is this just some weird glitchy thing?
    Thanks!

  • Setting background-image as editable in Fluid Grid Layout (Template file)

    Hi, Im very basic on Dreamweaver so bare with me,
    I am creating my first website and setting up my template file.
    I am struggling with making my background image editable in the template file,
    Alot of the awnsers point me into creating a new background style sheet which I have done.
    I have included :
    <link rel="stylesheet" href="../Background style sheet.css" type="text/css">
    into my <head> in the source code and now im pretty lost for what to do next... I want to link it to all my mobile, tablet and desktop #main divs and then be able to edit the background image for my different web pages;
    for example my home page is one background-image and then the other web pages all have other background images.
    Sorry if I am not asking the right questions, I am very new to coding
    Regards,
    Confused Graphic Design student.

    It's actually very easy to target the <body> of each page in an external stylesheet to change the background individually, just not with DW Templates.
    Normally, what I would do is give each page's <body> tag an id, for example, on an about.html page...
    <body id="about">
    Then in the css, you would give the #about id a background-image setting...
    #about {
         background-image:url(about_bg.jpg);
    Each page would have a similarly named id in the <body> and a corresponding #id in the css.
    Side Note: Stick to lower case, alpha numeric file names for all of your pages and images. Use underscores or hyphens instead of spaces for them too. Servers are CaSe SenSitIvE and a link to Index.html (capital i) will not go to a page named index.html (lowercase i). It will work on your local system, just not on the server because the server sees the case structure difference as two separate files.

  • How to make a background image stretch?

    I notice there are two options for background option "tile" and "original size". What happened to stretch? I would like the background image to take up the whole page no matter what size the browser window is. Easy enough to do with CSS and HTML. Any ideas on how to do this, am I missing something, or can I employ some sort of trick to achieve this? Thank You : )
    Regards,

    It's available for the Page background in the Inspector/Page/Layout pane but not for the Browser background.
    Click to view full size
    OT

  • Add a Background-Image to an Editable Region

    I would like to add a background image at the bottom of this page (www.theram.com/drink_specials.html). The 'body' editable region is where I would like to add it but I am not sure how to...could you help me out? I don't want this image to show up on all template pages, just this page.
    I added this code in the head section for only this page but obviously it is not correct because I don't see the image.
    <style type="text/css">
    <!--
    body {
              background-image:url(/images/backgroundStoli_web.jpg);
              background-repeat: no-repeat;
              background-position: bottom;
    </style>
    Thanks for your help!!

    npolen wrote:
    I'm sorry, I don't think I was very clear on where I wanted this...I would like it to be in the white part of 'body' editable region that has the drink pictures and descriptions in it. How do I add a background image to that part of the page? Thanks!
    In that case add an 'id' to the <th> cell that the drinks table is inserted into (see below - id="bg_1")
    <th width="675" id="bg_1" align="left" valign="top" bgcolor="#FFFFFF" scope="col">
    Then amend your 'body' css selector to #bg_1 (as below)
    #bg_1 {
        background-image:url(/images/backgroundStoli_web.jpg);
        background-repeat: no-repeat;
        background-position: bottom;
    I don't know if /images requires a leading slash infront of it. If the background image does not show up get rid of the leading slash /
    Not sure why youre using a <th></th> table cell to insert the drinks table into. A <th></th> tag is a table header tag.......you should really be using a <td></td> tag.

  • Background image not displaying 100% width of iphone

    Hi I am getting some strange behaviour on my iphone using firefox but displaying perfectly in firefox on computer.  I do not wish to submit the name of site as I do not want it to show up in search results but if anyone can help me I will pm site address.  Thanks.
    As the header's width is 100%, why is there the need for margin: 0 auto or text-align:center?  Surely  the background image should just display to 100% of the screen? Then the actual logo image that sits in the header div should have text align and margin auto yes?  I know that applying these rules this way does not center the logo within the div but WHY? I have uncommented out the text align and margin auto on the header div and it displays properly on my computer but not on the iphone.
    With regards to iphone the background image stops short of the logo by a small amount, I have not designed a separate style sheet for iphones, not part of the scope but as the rest of the pages display ok why does the background image stop just short of the logo image?
    I really appreciate your input.
    This is the CSS
    #header {
       width:100%;
      height:117px;
        padding: 0 0 0 0;
    /*    text-align:center;
        margin:0 auto;*/
        background:url(images/header-bg2.jpg) left repeat-x;}
    #header a img {
        border:none;
        padding:0;
        margin:0 auto;
        text-align:center;}
    <div id="header">
    <a href="http://www.xxxxxxxxxxxxxxx.com.au"><img src="images/KPS-logo.png" width="1024" height="117" alt="xxxxxxxxxxx Logo" /></a>
    </div>  <!--END of header-->

    You have nothing defining your background image size, just the box that holds it
    try adding some CSS to control the actual background image...
    background-size:cover;
    background-position:right top;
    background-repeat:no-repeat;
    background-atachment:fixed;

  • Template suddenly losing background image

    Hoping someone can help... here's the situation:
    *  I have been using the same templates in the same site for years
    *  All of a sudden, when I create a new page from a template, the background image does not show
    *   The problem started within a session during which I had already made  several pages, as I always do, with no problems - then, whammo, I  created another new page from the same template and this happened
    *   It happens with every single template in the site, and whether I use the "new  page from template" feature or apply the template to a created page
    * It  persists in archived / back-up versions of the site.  I even tried  upgrading from CS4 to CS5, thinking my copy of DW had been corrupted,  but that didn't fix it.
    Here is a link to a template:
    http://takeroot.org/Templates/blank_side_nav.dwt.php
    Here  is a link to a page spawned from that template, using the "new from  template" feature (which I have used a thousand times with no problems):
    http://takeroot.org/ExampleOfWrongness.php
    I  consulted with an IT friend who suggested I add "repeat-y left top" to  the body tag css that displays the bg image in the template.  That  didn't seem like a full answer since it has never had that line and has  been working just fine for years, but I tried it anyway and the result  was that the background image stopped displaying even in the template.
    Can someone help before I lose my mind?????  My family would be eternally grateful!
    Liss

    1.  The tempkate has the correct path to the image.  Why would the child have a different path?
    For some reason, DW thinks that this image is outside of the root folder.  When that happens, the link is always a file:/// link.  It will work locally, but not on the web.
    2.  Why would it just suddenly, out of the blue, start chosing this different path when 5 seconds earlier it worked as it always has?
    You would have to submit that question to the great OZ to get an answer.
    3.  Even with the new, random path,why wouldn't it display correctly when  previewed locally?
    It's not a random path - it's a correct path to the image is it not?  It should work locally.
    4.  Most important - what should I try next?
    Try opening the child page and applying the template to this page with MODIFY | Templates > Apply Template to Page

  • Background image in a portal page??

    Hi,
    How can I set a background image or watermark in a portal page instead of the plain background that comes by default.
    Regards
    Sreeram

    Ofcourse Chris, very true. I should have mentioned the workaround in the previous post itself. Infact the solution is based on your suggestion in the previous post.
    Every community page that is generated by the portal has a <div> element with a unique id. The id of div element is made up of the following string "pt-portal-content-" followed by the object id of the community page (which is unique). This <div> element has the style portalContent set to it by default.
    I knew the page I would want the background to be applied to. And I knew the portlets that would go only on this page. These portlets are content portlets created from the publisher.
    So in the presentation template code for one of these portlets I included a javascript function and set the background property of the div element, conditionally checking the div element's id to make sure that it is the community page I wanted to modify. And this javascript function is registered to the onload event.
    Regards
    Sreeram

  • Match Background Image and Browser Image

    Hello,
    I am using a background image that I created for my page background. I would like it to be the same image for the browser background as well vs. the solid color option.
    I've attached the same image and when it is live, the color is off (it's a gray image with a texture treatment). So, it looks like a box and then another box.
    Anyway to get around this? Should I resize? Can I make the background image bleed so it takes over the browser background?
    I tried making the page size large, but then on screen, the scroll bar made everything of center.
    Help please!
    Thanks!

    Have you tried setting your page background to none?
    If you do this you will only see the browser background (with your image on it) when published.
    David

Maybe you are looking for