Fix page background image

Is there anyway of fixing a page background image where the page content is longer than the image?  I want the content to scroll until the entire bg image is revealed, and then fix the image so that the rest of the text is displayed on top of it, rather than running off the bottom of it.
Please see http://www.empathydesign.co.uk/development/lucid/travel-detail.shtml,  user name shannon, pw: ilkley57!
Thanks

Hi Shannon(?),
let us take a step back and reflect a little bit about your wish, because I'm not sure that it is a good solution on this page to accommodate as much text that the visitor has to scroll in this great measure.
And so MY recommendation is (please do not be angry, I want you to understand this as constructive criticism) that you limit the text onto the essentials and you better start a new additional page, where you can insert all the rest.
Hans-G.

Similar Messages

  • Keynote 6.0 isnt loading master page background image

    I made a kaynote in Keynote 5.3 and my coworker opened it in keynote 6.0 but the master pages background image fill was not loading and came up blank.  On several other laptops with keynote 5.3, the background images loaded properly.
    why and how do i fix this?

    One of the most common causes of Mavericks problems appears to be If the hard drive was not wiped clean before installing Mavericks as remnants of incompatible software remain.
    I would back up then clean install the OS.

  • How to create a full page background image that is fluid?

    I'm creating a website for my portfolio, and one of the things I wanted to have is a full page background image that the div tags are in.  I know there is a way to put it in via page properties, but that doesn't allow you to add CSS styles and I want the image to re-size with window changes.  This requires putting the image in a div tag, but then it pushes the other div tags (such as my header section and navigation) so that they aren't over the image like I want.  Is there a way to push the image div tag to the back so that the other div tags go over it.
    I'm using HTML5, and it will also be a responsive design, but the fluid background is only for desktops.
    I don't go on the adobe website often, so if you have an answer to this, or need more information to figure it out please email me at [email protected] and you'll get a faster reply than on this forum.
    Thank you everyone for your help.

    You should set this forum to email you on a reply.
    I don't have a link in your question to determine how you are trying to do this, but here's a technique I have used:
    Take a look at this website and see if it doesn't have what you are trying to do. You'll see the flag in the background and I have used opacity in the layers on top of it to keep the flag somewhat visible.
    Now, what the flag does not do is re-size itself with the viewport (the browser window). But the flag is in a div that sits on top of the body. My code is accessible, but you're looking for the flag div and it's defined in CSS thusly:
    #flag {
              width: 100%;
              background-image: url("../images/polish-flag.png");
              background-repeat: no-repeat;
              min-height: 900px;
    Now, CSS3 adds a new attribute you can apply to the background image thusly:
         background-size: 100% 100%;
    That would make your background fill the viewport.
    I chose to not do that, because I was worried about versions of Internet Exploder before 10.

  • How to create a scaled page background image?

    Hi - does anyone know of a way of creating a page background image which will scale to fit any screen width?  I've tried googling it, but get back so many complicated explanations that I don't know which to believe.  Up until now I've resorted to creating a large image, usually around 1700 x 1400px, which just about works, but obviously smaller screens lose a lot of it.  I'd really like to understand how to do this properly,
    Thanks
    SW

    How far back in browser version history do you want to support?
    IE9+ and any modern browser (like Firefox, Safari, Chrome and Opera) will work with the background-size:cover attribute:value in CSS3: http://www.w3schools.com/cssref/css3_pr_background-size.asp
    For older browsers, you'll need a bit more complicated solution using javascript like this page: http://louisremi.github.io/jquery.backgroundSize.js/demo/

  • Page background images, songs, movies, don't publish

    I'm new to this. I've researched other threads here and cannot find this specifically. I was so proud. What beautiful pages I had created in iWeb and so sad to discover dot mac couldn't display them!
    My tinted page background images have never published. These files published into my hard drive folder but are not on iDisk. Songs appear with a tiny Q for Quicktime and a ? - files were dragged into iWeb from audio media browser. Larger Q with the movies. I have one large Movie 18.5, one smaller - 4.5 MB. It's cool if dot mac can't handle it, but perhaps they shouldn't promote that they can! I'm a huge Mac fan, but any tips or tricks before I attempt to cancel my dot mac purchase? I went back and changed all the background image file names. No luck. I am so hoping that I'm just doing something stupid. I signed up for dot mac to share my music and movie files. Help me make it work!
    G4 Mac OS X (10.4.5) http://web.mac.com/divinelyfem

    Looks OK by me, Bruce

  • Page background images show in preview but not after uploading

    Hi -
    I've built a page with a flash animation, and some other
    minimal information below the movie. I have a page background image
    that should be repeating horizontally behind everything. When I
    preview it, all looks great! After I upload it to the actual site
    the background images disappear. The code is all within the page.
    Any ideas?

    never mind... problem resolved.
    my error in not checking my files over. oops.

  • PNG fix for background images?

    I am putting together an artsy-fartsy design with lots of
    stylish wavy lines, fine gradients and dropdown shadow effects and
    was wondering if there was a PNG fix for background images. Most
    out there seem only to apply to images included in the html.
    Otherwise I can use JPEGs with a bit of the background included
    behind them (I hate doing this)...

    Hi,
    Hmmm. I think you have a great point there. In my opinion, I
    think that there is no png fix for background images. Use jpegs
    with background. I do the same.
    Gaurav
    www.gauravchandra.com

  • Page background image can't be seen by certain users

    hi! i'm using portal v3.0.9.8.3 and oracle db v8.1.7.0
    i've created a page style with background image. I applied the page style to a page i created and assign some users to this default page.
    problem is only some users can see the page with background image. they are have the same security settings and rights. but if i change the color of the tab, all users can see this change.
    any suggestions?
    thx.

    You may already know, browsers always cache css/images/js files. So if you would like to force browser to download new version of the files, you need to updated reference of the files using some kind of query string "http://server/test.css?version=XXX",
    where on every updated you update the version 'XXX' to some new value. Usually we do this using some kind of programmatic approach - for example in my project I update the css/images/js links using the dll/assemlby modified date. So that every time I deploy
    a new sharepoint solution, the files urls get changed.
    Thanks,
    Sohel Rana
    http://ranaictiu-technicalblog.blogspot.com

  • Export to web page, background image option gone?

    Apologies if this has been addressed (couldn't get the right boolean search terms to work properly) as it is a simple question.
    Upgraded to iphoto '08 and now one of my favorite features in the 'export a web page' area doesn't appear to exist anymore - the option to use a background image instead of a color.
    Has this 'feature' been removed? It's easy to stick the line into the html code, but what I value is the fact that it (used to) modify each photo's html page, sticking that line in, which wouldn't be feasible for me to do manually.
    Thanks,

    Many thanks for pointing that out. In Composer I have been able to remove the path to my hard drive stored image. What shows now on page source is: <body style="background-image: url(cloudback800x600.jpg);"> but the image
    is still not visible. Your further advice will be appreciated.

  • Page background images

    I am trying to use my own images as page backgrounds. I have resized the images in Photoshop to about 28Kb but when published to a folder iweb has converted them to a png as it does and the size is between 200 and 300Kb. Therefore the site is very slow to load. Is there a cure? Or do I abandon the idea. I am just playing around to see what is possible with iweb.

    That seems to be a problem with iWeb and background images. It took a 28kb jpg image I used and converted it to a 400KB png image. I did notice one thing. If I applied the image to the browser's background and had none for the the pages background color the page would load extremely fast. It took a 44kb jpg and it converted it to a 115 png file and it loads very, very fast. But when I used the same jpg file for the page's background, full size or scaled, it become 367kb and loads more slowly. 'Tis a puzzlement.

  • Can I control the position of the page background image?

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

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

  • How to get background image to fill the browser and remain fixed in both IE and Firefox?

    Basically what it says in the title. I've come very close in achieving this but something just doesn't tie up in the html and css code...
    First of all, I'm using IE8 and the latest version of Firefox to test this.
    I used 2 sources of information for getting this done: 1) http://css-tricks.com/perfect-full-page-background-image/ and 2) http://stackoverflow.com/questions/8958697/css3-background-size-cover-doesnt-make-image-co ver-vertically
    In Case 1 the example on the page called CSS-Only Technique #1 gives code that works almost perfectly for me, except that obviously I need a background image, however the CSS provided there is clearly just for an image dropped in the body of a page with no regard for other content that may already be there. The html code that I put on the page is simply <img class="bg" src="../images/background_image.jpg">
    Obviously I used the CSS code provided in the example, minus the last bit which is "@media screen" etc etc, which seems irrelevant to me. Obviously substituting values to suit the image on my page.
    So what happened is that it almost worked as intended in both the browsers (which means the image filled both browsers width-wise as intended and also remained fixed when I zoomed in or out in each case) except that the image went over the top of the current content that I had there already precisely because it's not a background in this "technique". (A curious side-note is that the image didn't push down the content, as I'd have expected in normal circumstances, but went right over the top of it so it hid it (like z-index).
    One thing that does bother me about this "technique" is that if you click on View Demo just below the code provided you will see on the working example page (forest background) the image clearly works as a background and the content sits happily on top! So I don't know whether the person providing the example was trying to mislead people or what! Or he got lazy and showed a different page that didn't use the exact code he provided. No matter.
    In any case this leaves me with the job only half finished, as I still need a background image that works like the 'normal image' code provided.
    On to Case 2 and on this page the first example provided gives the CSS for the background image - namely the code within html {...} part and also shows the same 'normal image' code as given in Case 1. In this case however, although the person provided a suggestion, the css and html doesn't really tie up properly plus some of the css and html seems a bit redundant. So this time when I used the 'html portion' of the CSS code (i.e. just the bit that was most relevant) I got two different behaviours in each browser and neither of which was quite what I'm looking for. In IE8 initially the page looks fine (background fills the page and content is on top) however when I zoom in or out the background also zooms in or out accordingly so is NOT fixed. In Firefox the background image DOES stay fixed, however because the image originally is not the whole height of the browser I'm guessing the code stretches it downwards (while keeping proportions - so the image essentially enlarges) to fill all of it. The quick way to get around it is to probably add some white space to the bottom of the image just to give it enough height that it doesn't stretch/resize automatically. But it would be nice to find out anyway how to get around this in the code. Overall I would say that the result in Firefox comes closest to the desired solution but of course it doesn't help matters with IE8.
    Apologies for the lengthy description but that should at least provide plenty info for anybody that might have a possible solution for me. Essentially what would be great is if somebody could advise me how to take the code from Case 1 and apply it to a 'background' piece of coding like the type that's contained within html {...} in Case 2. Like I said, it's so nearly there but I just can't make it work atm after trying to combine the various bits of code this way and that... Alternatively, if somebody has another html-css version that works nicely for achieving this then please by all means let me know! Thanks v much in advance!

    This works in modern CSS3 supporting browsers.  But not pre-IE9.
    http://alt-web.com/TEST/Resizable-BG.shtml
    Nancy O.

  • Full Page Background in Internet Explorer 8 and Below

    I am currently trying to achieve a full page background image using the method found here: http://cookbooks.adobe.com/post_Scale_Background_image_to_browser_size-17590.html
    Everything works fine in FF, Chrome, and Safari, but when I preview the page in IE 8, the image shows up as being centered in the page and does not stretch to fill the whole browser.
    You can see this here: www.virtualeconomyonline.com
    Here is the CSS:
    html {
         background: #F4EEFE url(../images/grass.jpg) no-repeat center center fixed;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
         overflow: auto;
    body {
         -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/grass.jpg', sizingMethod='scale')";
         filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/grass.jpg', sizingMethod='scale');
    Does anyone have any ideas why it might not be filling the whole browser in IE 8 and under?

    Hi
    As the tutorial says, don't apply this to the html tag, (there is no reason to apply anything to the html tag any more).
    Move all the css that you have to the body tag css.
    PZ

  • Centering Background Image

    After countless hours of using the forums I finally am
    posting my first question.
    Is there a way to center the background image that is set
    through page properties? I have a centered table and it would be
    nice to have a continuous background.
    Any help would be appreciated.

    Or you could do what Murray just said :-) But through
    standard html, no.
    Lawrence Cramer
    *Adobe Community Expert* - Dreamweaver -
    http://tinyurl.com/jhnyq
    email: lawrence at cartweaver dot com
    Cartweaver CF, ASP & PHP Shopping Cart for Dreamweaver
    www.cartweaver.com
    news://support.cartweaver.com
    =====================================================
    "Lawrence *Adobe Community Expert*"
    <[email protected]> wrote in
    message news:emuj2u$636$[email protected]..
    > Nope, you can't center a page background image. You have
    to work from the
    > top left hand corner.
    >
    > Now you could create a fixed width, floating, centered
    "master container"
    > div and have a background image for this div. Then place
    all your
    > content in this container. This would give you the
    illusion of a centered
    > page background.
    >
    > Hope this helps.
    > --
    > Lawrence Cramer
    > *Adobe Community Expert* - Dreamweaver -
    http://tinyurl.com/jhnyq
    > email: lawrence at cartweaver dot com
    >
    > Cartweaver CF, ASP & PHP Shopping Cart for
    Dreamweaver
    > www.cartweaver.com
    > news://support.cartweaver.com
    > =====================================================
    >
    >
    > "cheesewagon" <[email protected]> wrote
    in message
    > news:emuhmn$4hv$[email protected]..
    >> After countless hours of using the forums I finally
    am posting my first
    >> question.
    >>
    >> Is there a way to center the background image that
    is set through page
    >> properties? I have a centered table and it would be
    nice to have a
    >> continuous
    >> background.
    >>
    >> Any help would be appreciated.
    >>
    >>
    >
    >

  • 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 :)

Maybe you are looking for