Great background Image / Sticky footer [has two questions]

1 - How do have such a file on background?

http://www.Teletoon.com/teletoon3/Teletoon.PHP?language=en

The page still load fast despite the apparently huge file as a backdrop. What is the technique, I need to do the same today.

2 - How do we cover the footer div always appear at the bottom of page?

Thank you very much

These are two good questions.

Here are some tips on how to add a great background to your site:

http://www.WebDesignerWall.com/tutorials/how-to-CSS-large-background/

I don't know there are other tutorials that you will find with a Google search.

Also, many web sites on the web site csszengarden.com use broad horizons. CSS Zen Garden invites you to download the markup html and css to sample from these websites to see how they did it.

It is important to write the HTML clean and avoid ID selectors and class unnecessary css. Do not use css to structure your document; Use it only for the presentation and layout. In my view, it is preferable to manually write your css. If you do not use Dreamweaver to apply CSS, check if your code often to ensure she remains lean. People these days are going wild with ap Divs, who will be dead to your page if you want to use a great background. Write lean markup!

About the footer... the footer on the example site you provided is nothing special. It's just the last div on the page. It remains at the bottom because the height of the page content exceeds the height of the browser window.

However, if you do not have enough content on your page to push the foot down, you need a new strategy.

Footers can be really frustrating when it comes to testing in other browsers. The trick is to force thepart of at least the same height as the browser window, even when there is little content.

Let's start with the footer:

#footer {}
    position: absolute;
bottom: 0;

Width: 100%;
border-top: 1px solid blue;
background: Blue;
}

For the footer, you must use absolute positioning. But, and this is where people go wrong, you must also make sure that the footer is placed at the bottom of the document, not the background of the browser.

The document must be at least as large as the browser window. So the first thing we need to do is to place the footer in a

with its absolute value property position to:

{#wrapper}
position: absolute;
top: 0;
left: 0;
}

The footer stick to the bottom of the wrapper.

.

Second, you must define the measures of percentage for the document:

HTML, body {#contents}
min-height: 100%;
Width: 100%;
height: 100%;
}

HTML > body, html > body {#contents}
height: auto;
}

{#wrapper}
position: absolute;
top: 0;
left: 0;
}

Thus, the tag in your html doc will be something like:


the body content

It works for me in all browsers. I have to give credit when it is earned, the technique above is just off Rachel Andrewbook, The Anthology of CSS.

Tags: Dreamweaver

Similar Questions

  • My new Thinkpad S1 Yoga has two questions

    I got myself a Thinkpad S1 Yoga (20cd) and I have two questions;

    (1) the wireless lan driver fails and booting. (Dual band AC 7260)

    (2) the trackpad acts as a simple mouse. (ultranav driver is installed)

    I am running Windows 8.1pro (x 64). All the drivers are updated and updated the BIOS.

    Driver wireless lan starts normally when I disable the USB3 support in the bios or disable it "Intel (r) USB 3.0 eXtensible Host Controller - 0100 (Microsoft)" in Device Manager of.

    When I enable and disable the driver lan wireless driver again operating normally.

    The trackpad does not support actions such as scrolling.

    Kind regards

    Roberto

    Well the ultrapads issue is resolved. I uninstalled the ultrapads driver and the driver synaptics windows. After the reboot, the pavement was a standard ps/2 mouse to the microsoft driver. Change install the latest driver from ultrapads I have a thinkpad tab in the mouse control panel.

  • Apex 5.0: Theme Roller and background image

    Hi all

    I'm new to APEX 5, but have many years experience with HTMLDB/APEX.

    I created a dummy application with only a blank page. Now I want to give a background image for all the pages of my apex application. To do this, I downloaded a picture of 'images of the workspace' and now, I would like to use this image as a background image. Here are my questions:

    1. How can I declare this image as background image using the custom field 'CSS' roll theme?
    2. Is this possible using the theme roller?

    Thank you

    Hi S-Max,

    of course, it is possible and it is not necessary to change the universal theme page templates. You can easily do with theme roller.

    1. Go to components-> themes-> universal theme shared
    2. Scroll down to the region of "files".
    3. Download your background image with the 'Upload File' button (Note: this is not a static file request or workspace, instead, this will be a static file of the theme!)
    4. Run your application
    5. Open the theme roller and choose your theme style
    6. Go to the "Custom CSS" attribute
    7. Use the CSS code you have pasted above, but delete #WORKSPACE_IMAGES #.
    8. Click Save / Save as (-> generates the new theme CSS stylesheet file, which is stored as a static file of the theme next to your background image.) That's why you can make reference to the image with a relative URL).
    9. Click the current value (if the custom theme style is not already the current)
    10. Topic close Roller
    11. The above generated theme style CSS file gets charge and your background image should display

    Concerning

    Patrick

    ---

    Member of the APEX development team

  • Text on the background image

    I have a page that I used "opacity" to clarify the background image, but it has also reduced the text. And I want the background behind the text centered image.

    Here is the page that I need help: http://www.healthquestpt.com/hpc/purpose.html

    Here's how I want it to look: http://www.healthquestpt.com/homephysiciancare/purpose.html

    Here is the css code:

    #purpose

    {

    float: left;

    left margin: 35px;.

    top of the margin: 50px;

    margin-bottom: 40px;

    Width: 287px;

    height: 403px;

    background-image: url (.. / images/purpose_imag000.jpg);

    opacity: 0.666667;

    Filter:alpha(opacity=66);

    }

    Thanks for your help!

    Right.  Opacity CSS effects everything inside the container.

    For a simple solution, use a mosaic of image semi-transparent.png as your background image.

    Nancy O.

  • Adding to my last question... To keep a background image in the center of the Web page when the browser is shrun

    How do do that?  What is the CSS that makes this work?

    Centers of the background, even when the browser window is smaller or the screen resolution is less, but the content remains stationary in the center of the page: www.signatureweddingsbyjenna.ca

    Hello Jules

    I think that Nancy replied to your question in the other thread.

    I have the site you give as an example, this is the CSS that applies to this image:

    {body
    background - image: URL("page_images/background.jpg");
    bottom-top position: center;
    background-repeat: repeat no.;

    }
    Then of course, it is applied as the context in which theelement, it is placed in the Center and on it and it does not repeat itself.  It is what keeps the central image on the page.  Also helps is that the page is a centered layout.  In the example page that you gave, they have this:
    #page, closure-blocks # {}
    margin-left: auto;
    margin-right: auto;
    Width: 1000px;

    }

    Set the width is important and defining the left/right margin as it means that the browser will allocate the rest of the available space at each margin evently between the two, or put content in the middle.  The only other thing you do is to set the content of the site to the center using
    text-align: center
    It is exlpained herefully.  The only other thing the site has done is put a bit of image information in another element to make it appear that the background image loops in the content.
    Martin
  • Add background images 100% width questions

    Hello again,

    This is another issue that I'm trying to overcome.

    I added these subtle geometry type forms in the background of the Web site to fill the blank gradient area in the case of a person like me consults the Web site on screen 27 inches.

    Untitled-6.jpg

    Now on screen 27 inch, everything seems perfect and the way I want it, but here is the strange part, when I adjust the side window beside it contracts and expands as it should.

    Untitled-8.jpg

    but when I use the bottom bar to move from left to right, look at what is happening.

    Untitled-7.jpg

    Now, is not so much a big problem on screen 27 inches because if I develop the window full screen it will look like perfectly on both sides of the web page.

    but this is the result when you open this page even on lets say 13-inch macbook, the left side is perfect, but the right side?


    Screen shot1.jpg

    Screen shot 3.jpg


    The same phenomenon occurs with the Ipad. I understand that the question is the image in the background, but how is the image of the left hand has no problem, but the right hand image is. It should reveal only the background image gradually if your screen is wider than 960px (width I put for my site) not the whole background in a go image. Once I have remove the background graphics, I don't have these problems, and it seems fine on my macbook 13 inch or an iPad. But I don't want these images,

    image2.jpg

    image2 (1).jpg

    Sorry for so many images, but I wanted to make sure that everyone understands what is my problem and can help with this problem.

    Thank you very much

    In the case of the use that you use do not add your background for the page itself. Add as a fill for browser - not an element of the width of 100%.

  • two questions about the scattered images secure

    I created an image that is secure and encrypted for sensitive documents.

    I have two questions:

    1. when I use the disk (if it is up, open and available), and I want to add something to it, I usually drag the file everywhere where it is currently in its destination folder in the sparse image control.  But it automatically makes a copy - with the same name (not with a '-1' ever, not with a suffix 'copying' or 'alias').  Which defeats the purpose and makes things complicated - I find myself comparing what is in each location to make sure it's in the sparse image and then it makes me nervous to delete the original.  Why it does this and how can I change such as dragging a file in a secure location gives there is not that a second copy of it left in an UNsecure location?

    2. I'm using Time Machine backup drive sitting on my desk (and a separate utility for monthly clones on a different backup disk).  Automatically makes Time Machine backup the content of the rare picture even if the safe drive is not mounted, open and available?  I hope not, because that would undermine the usefulness of having a backup disk on my desktop running of ordinary Time Machine backups, but find it me just that all the steps I take of course I do not lose any data may be so overprotective I have thought/hoped.

    Sous_forme_d' addendum, I'll check my clone, but as I put this out there, I wonder if SuperDuper!, my application of cloning is cloning automatically secure disk content, so... like the thoughts of anyone about it if it's an application that they use).

    FYI: I'm running 10.11.2

    Thank you.

    (1) by default, OS X makes a copy with the overcoming of the limits of volume and moves when in the same volume.

    You can reverse this behavior by holding down the command key when you drop. You will see the insignia of the icon changes (green + for copy, empty for move).

    (2) Time Machine will return to the top of the image 'file', but only when it is unmounted. I do not think that it automatically includes the volume mounted, but I would like to check and add to the exclusion list.

  • Can I have different screen on two monitors background images?

    I use two monitors side-by-side.

    There is a supply virtually unlimited background images to display, including the pre-made themes and slideshows, but no way I can find to have different images on each monitor.

    Am I missing something?

    Hello

    Windows 7 doesn't have this built-in capability. There are third-party software multi-screen solutions.

    I also use two monitors and I think a better ioption is to use two screens wallpaper. It is an image large enough to cover both monitors. For example, I have two monitors set in 1680 x 1050 and I use a screen background image which is 3360 x 1050 and set the tile option. It's a cool effect.

    There are a lot of websites that offer these dual monitor wallpapers. Just use your favorite search engine and look for "wallpaper bi-ecrans".

    I hope this helps.

    Thank you for using Windows 7

    Ronnie Vernon MVP

  • Two questions: 1. What are the procedures to superimpose an image on top of the other? 2. how resize you, make adjustments, adjust transparency overlay image etc? I use a MAC with Photoshop Lightroom.

    Two questions: 1. What are the procedures to superimpose an image on top of the other? 2. how resize you, make adjustments, adjust transparency overlay image etc? I use a MAC with Photoshop Lightroom.

    HI Timp,

    Sorry, but that kind of image manipulation is not for the purpose of Lightroom and more oriented toward Photoshop and retouching of composition of similar images.

    Please check the links to know the image overlay in Photoshop below:

    Mix photos with apply Image in Photoshop

    http://www.photoshopessentials.com/photo-effects/blend-photos/

    The superimposition of Images in Adobe Photoshop | DIY digital composition

    For more good result to check the google search.

    Google search: Google

    Concerning

    Sarika

  • footer on the background image

    I have a site with a large different background behind each page image. I want to be stick to the bottom of the browser window, the background image going behind the footer footer.

    Muse pushes the footer below this background image.

    Suggestions?

    Jeff

    Hello, I see 2 ways to address them.

    1 use this browser fill background image and it will stay behind the footer. Second, half of the video below explains how.

    Add a picture to the background of the page or the browser. Adobe Muse CC tutorials

    2. you can also use the tab layers in muse.

    • Create a new layer in the tab layers
    • Move the new layer under the existing layer (drag / move).
    • Select the footer items and move them to the lower layer of right click > move to layer > select the bottom layer. Make sure that the footer is below the layer that contains the background image. Check more info on similar layers: Adobe Muse Help | Working with layers

    Concerning

    Vivek

  • a: link has the background image

    I have a bkg img in my NAV to nav and the bottom (navBkg.jpg) these NAVs are style very specifically for the nav and low Nav in my css.  However all a links show this backdrop, rather than just the nav and the low NAV.  You can see in the lower area (snack of the week Club Eva prim) where it says "...". Read more. »

    http://carriecoren.com/test/Sept9

    Here's the css:

    @charset "UTF-8";

    #column3 img {}

    margin-left: 10px;

    }

    @font-face

    {

    do-family: myFirstFont;

    SRC: url (Gondola_SD.ttf);

    }

    *{

    margin: 0;

    padding: 0;

    }

    one, a: link, a: hover {}

    background-image: url (.. / images/whtBkg.jpg);

    }

    {body

    do-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

    do-size: 14px;

    color: #222;

    line-height: 18px;

    margin-right: auto;

    left margin: auto;

    text-align: left;

    background-image: url (.. / images/blue_bg_vert.jpg);

    background-repeat: repeat-x;

    background-color: #000;

    }

    #container {}

    Width: 960px;

    margin-right: auto;

    left margin: auto;

    margin-top: 0px;

    margin-bottom: 0px;

    text-align: left;

    background-color: #FFF;

    background-image: url (.. / images/containerBkg.jpg);

    background-repeat: repeat-y;

    }

    #content {}

    Width: 920px;

    padding-right: 20px;

    padding-left: 20px;

    }

    #header {}

    background-image: url (.. / images/header.jpg);

    background-repeat: no-repeat;

    padding: 0px;

    height: 280px;

    Width: 960px;

    text-indent:-9999px;

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;

    left margin: 0px;

    }

    / * column 1 * /.

    {#column1}

    Width: 590px;

    top of the margin: 30px;

    margin-right: 0px;

    margin-bottom: 20px;

    margin-left: 10px;

    border: medium solid #888;

    background-image: url (.. / images/column1art.jpg);

    padding-bottom: 50px;

    float: left;

    }

    #column1 p {}

    do-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

    do-size: 14px;

    color: #222;

    line-height: 22px;

    padding-left: 253px;

    padding-right: 10px;

    padding-bottom: 10px;

    }

    #column1 h1 {}

    Police-weight: normal

    do-family: Gondola_SD.ttf;

    do-family: 'gondola SD","Gondola SD - Swash";

    padding-top: 20px;

    padding-left: 240px;

    padding-bottom: 10px;

    font size: 20px;

    Word-spacing: 95%;

    text-transform: uppercase;

    line-height: 30px;

    text-align: center;

    }

    / * column 2 * /.

    {#column2}

    background-color: #FFF;

    padding: 0px;

    Width: 250px;

    margin-top: 30px;

    right margin: 20px;

    margin-bottom: 0px;

    margin-left: 10px;

    float: right;

    padding: 0px;

    }

    #column2 li {}

    list-style-type: none;

    display: inline;

    padding: 0px;

    margin-top: 0px;

    right margin: 8px;

    margin-bottom: 0px;

    left margin: 0px;

    }

    #column2 a, a: link {}

    margin-top: 0;

    margin-right: 0px;

    margin-bottom: 0;

    left margin: 0;

    padding-top: 0;

    padding-right: 0;

    padding-bottom: 0;

    padding-left: 0;

    }

    / * column 3 * /.

    {#column3}

    Width: 550px;

    margin-right: 0px;

    margin-bottom: 20px;

    margin-left: 10px;

    border: medium solid #888;

    padding: 20px;

    float: left;

    height: px;

    background-color: #FFF;

    }

    #column3 p {}

    do-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

    do-size: 14px;

    color: #222;

    line-height: 22px;

    }

    #column3 h2 {}

    Police-weight: normal

    do-family: Gondola_SD.ttf;

    do-family: 'gondola SD","Gondola SD - Swash";

    padding-bottom: 10px;

    do-size: 16px;

    Word-spacing: 95%;

    text-transform: uppercase;

    line-height: 30px;

    text-align: left;

    }

    #column3 a, a: link {}

    color: # 33;

    background-color: #FFF;

    background-repeat: no-repeat;

    }

    #column3 a: hover {}

    color: # 33;

    make-weight: bold;

    }

    H1 {}

    padding-bottom: 10px;

    Police-weight: normal

    do-family: Gondola_SD.ttf;

    do-family: 'gondola SD","Gondola SD - Swash";

    padding-top: 20px;

    font size: 20px;

    Word-spacing: 95%;

    text-transform: uppercase;

    line-height: 30px;

    text-align: center;

    }

    / * the main nav * /.

    #nav {}

    Width: 960px;

    height: 35px;

    margin-bottom: 10px;

    padding-top: 5px;

    padding-right: 0px;

    padding-bottom: 0px;

    padding-left: 0px;

    text-align: center;

    do-size: 14px;

    line-height: 30px;

    do-family: 'gondola SD","Gondola SD - Swash";

    border-top-width: thin;

    border-color: #000;

    background-image: url (.. / images/navBkg.jpg);

    background-repeat: repeat;

    }

    #nav ul {/ * this is the main nav list * /}

    list-style: none;

    margin-bottom: 0px;

    Width: 100%;

    margin-top: 0px;

    }

    #nav li {}

    display: inline;

    background-image: url (.. / images/navBkg.jpg);

    background-repeat: repeat-x;

    }

    #nav li has, a: link {}

    padding-right: 25px;

    padding-left: 15px;

    text-decoration: none;

    background-image: url (.. / images/navBkg.jpg);

    background-repeat: repeat-x;

    vertical-align: bottom;

    Width: 100%;

    padding-top: 0px;

    padding-bottom: 0px;

    margin-top: 0px;

    }

    #nav li a: hover {}

    background-image: url (.. / images/navBkgHover.png);

    background-repeat: repeat-x;

    padding-top: 6px;

    margin-top: 0px;

    Width: 100%;

    }

    / * nav down * /.

    {#bottomNav}

    Width: 960px;

    background-color: #003399;

    margin: 0px;

    padding-top: 0px;

    padding-bottom: 0px;

    border-top-width: 9px;

    border-top-style: solid;

    border-bottom-color: #000;

    text-align: center;

    background-image: url (.. / images/navBkg.jpg);

    background-repeat: repeat-x;

    float: left;

    height: 25px;

    }

    #bottomNav ul {}

    list-style: none;

    make-weight: bold;

    margin-bottom: 0px;

    margin-top: 0px;

    padding-top: 0px;

    padding-bottom: 0px;

    }

    #bottomNav li {}

    margin-right: 0px;

    position: relative;

    padding-right: 10px;

    padding-left: 10px;

    padding-top: 0px;

    padding-bottom: 0px;

    display: inline;

    }

    #bottomNav a, a: link {}

    margin-right: 0px;

    padding-right: 10px;

    padding-left: 10px;

    padding-top: 7px;

    padding-bottom: 7px;

    display: inline;

    margin-top: 10px;

    margin-bottom: 0px;

    color: #DDD;

    }

    #bottomNav a: hover {}

    color: #DDD;

    Background: #660000;

    }

    {#pinterest}

    Width: 250px;

    margin-right: 0px;

    margin-bottom: 20px;

    left margin: 0px;

    }

    #twitter {}

    background-color: #FFF;

    Width: 250px;

    margin-right: 0px;

    margin-bottom: 20px;

    left margin: 0px;

    height: 100%;

    top of the margin: 15px;

    }

    {#social}

    Width: 250px;

    height: 58px;

    background-color: #FFF;

    }

    #copyright {}

    do-family: Arial, Helvetica, without serif.

    do-size: 9px;

    line-height: 20px;

    color: #222;

    text-align: center;

    Width: 100%;

    float: left;

    }

    {#contact}

    margin: 0px;

    height: 140px;

    Width: 50px;

    padding-right: 10px;

    padding-left: 20px;

    border: thin solid #222;

    padding-top: 40px;

    }

    . Clear {}

    Width: 900px;

    color: #EEE;

    top of the margin: 100px;

    margin-right: 0px;

    margin-bottom: 0px;

    left margin: 0px;

    Clear: both;

    }

    #container #content #clear {}

    Width: 700px;

    }

    However all a links show this backdrop, rather than just the nav and the low NAV.

    Perhaps, you will also need to change this code a little:

    #nav li a, a:link {
    

    TO:

    #nav li a, #nav li a:link {
    

    Your code is targeting all THE links on the page, while the second code which I gave is the targeting of specific links.  Slight difference but big changes on the page.

  • Double background image renders in all browsers except IE - time Senitive question

    Looking for help.  I have to hurry to set up a HTML5 Web site, unfortunately, I have to make it look like one that has been created using a model of sitebuilder package.  The original site is http://www.ourvietnamvets.com

    I use Dreamweaver CS5.5 and validated my code structure with WC3 and received without errors or warnings.

    IE does only the background color and not the double background image.

    CSS CODING

    @charset "utf-8";

    {body

    margin: 0;

    do-family: Verdana, Arial, Helvetica, without serif.

    do-size: 14px;

    line-height: 20px;

    background-color: #060b 60;

    height: 400px;

    Width: 992px;

    background-image: url (.. / Images/bg_bp88.jpg), url (.. / Images/bg_jl6x.jpg);

    background-position: top left Center;

    background-repeat: no-repeat, repeat-x;

    margin-left: auto;

    margin-right: auto;

    position:! important;

    }

    HTML5 CODING

    ! DOCTYPE HTML >

    < html >

    < head >

    < meta charset = "utf-8" >

    <!-TemplateBeginEditable name = "doctitle"-->

    < title > Untitled Document < /title >

    <! - TemplateEndEditable - >

    <!-TemplateBeginEditable name = "head"->

    <! - TemplateEndEditable - >

    < link href = "css/twoColFixHdr.css" rel = "stylesheet" type = "text/css" > "

    < script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "

    < link href = "SpryAssets/SpryMenuBarVertical.css" rel = "stylesheet" type = "text/css" > "

    < / head >

    < body >

    < div class = "special" > stays Viet Nam Vets < / div >

    < div class = "container" >

    < div class = "sidebar1″" >

    Y at - it an IE hack or something I should use?  I desperately need help on this.  I have the entire site to the top before the end of the week.  The former site is a reference to an old event of last year and this new site should be up like a blast of e-mail and a lot of marketing for this fundraiser is to get out on Monday morning.

    Thanks in advance to anyone who can offer any help.

    Daisy

    Daisy, there is hope for everyone.

    The good news is that it works in IE9, FF20, Chrome, Safari and other features of CSS level 3 support.

    The bad news is that images of multiple-background in the selector similarly do not appear in pre - IE9 because they are not browsers compliant web standards.  Never have been, never will be.

    The solution would be to feed the lesser browsers IE conditional comment with a single background image.

    Or break things upwards, some more by applying unique background for html selectors, body and .header images.

    Nancy O.

  • Background image stretching across the page footer area

    On a pc with a screen resolution 1280 x 1024 and smaller through IE, when scrolling to the bottom of the background scales image to force down the footer elements appear on the top of the verses of background image on the background color. The background image doesn't repeat from left to right and SHOULD NOT extend to any down. However, it's what happens on the pc. Thanks in advance for the help!
    onmac.jpg
    We'RE MAC - quote at the bottom under the background image and on the bottom. It comes
    be represented correctly.
    onpc.jpg

    We'RE PC - quote at the bottom to the top of the background image - this shouldn't happen

    URL (.. / images/background_alt1.jpg) #5e3718 fixed horizontal left high

    If you remove 'fixed', does that help? I use browser tools and I'm not at home to work directly with Muse. Maybe someone else can give an idea.

  • background image question

    I have posted this as well in the DW forum... but thought I would post it here as well:

    I have a question about a background image and how to make it works on one of my sites. On this site http://www.californiasun.com/

    they use a background image that is 1920 x 1200, but it does not appear "as" big on the screen.  How do you get an image this size to fit perfectly on the screen?

    I did an image 1920 x 1200 and 3/4 of it is not displayed.

    Thanks in advance.

    You don't see their whole image unless your screen is larger than the image. They simply brought their background image. Here's the CSS:

    body {
         background: url(../images/bg.jpg) no-repeat center top #1D454D;
    }
    
  • CFDOCUMENT - only the first PDF has the background image displayed in a loop

    Here is the code example. The first PDF is created very well, but the rest files lack background image. Similar problem was reported here very strange CFDOCUMENT Bug | Blog of Raymond Camden, but I could not find a solution to this problem. Would appreciate any input!

    < cfloop query = "MyQuery" >

    "< cfdocument format ="PDF"filename="./docs/#filename# ".

    Overwrite = "yes".

    localURL = "true" >

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

    < html >

    < head >

    < style type = "text/css" >

    body

    {

    background - image: URL('image.jpg');

    background-repeat: repeat no.;

    }

    < / style >

    < / head >

    < cfoutput >

    < body >

    < table width = "100%" cellpadding = "0" border = 0 >
    < b >
    < height td = "280px" colspan = "4" > < table >
    < /TR >
    < tr valign = "top" >
    < td align = "center" colspan = "4" >
    < span style = "do-size: 48;" do-family: Calibri; color: black; make-weight: bold; ">
    #FirstName # #LastName #.
    </span > < br >
    < span style = "do-size: 25;" do-family: Calibri; color: black; make-weight: bold; ">
    for the
    </span > < br >
    < span style = "do-size: 48;" do-family: Calibri; color: black; make-weight: bold; ' > '.
    project #qNomination.proj_name #.
    </span >< br >
    < table >
    < /tr >

    < / body >

    < / cfoutput >

    < / html >

    < / cfdocument >

    < / loop >

    The example I gave you would work. It's just dynamic as I'll now show.

    In the following example, save CFM 2 files and image files in the same directory. Then open testFile.cfm in the browser. This will dynamically create 3 PDF files in the current directory

    testFile.cfm

    Inc.cfm

    Content of body HTML of the page #idx. #

Maybe you are looking for