Newbie: background image with overlay problems

I use a large background image with several circles superimposed over the image. When the image is resized to different browser screens, overlays remain unchanged, even if the changes of background image to fit the browser. As a result, overlays eventually his place with respect to the substantive parts and cover image, I don't want to not covered. Clearly, I'm a newbie with dreamweaver. Useful links?

Mark

This approach to layout does not work in flow layout (%).   APDivs are removed from the normal document flow and thus remain absolutely where you positioned them.

Cards images do work either in fluid layouts.  As the picture re-sizes to fit the display window, the hotspot regions are not.

When you create responsive Layouts, review your Mobile implementation objectives first.  Then tablets and desktop computers.  And above all, to keep things simple.

Responsive Web Design

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-Web-design/

Introduction to CSS Media Queries

http://www.Adobe.com/devnet/Dreamweaver/articles/introducing-media-queries.html

Nancy O.

Tags: Dreamweaver

Similar Questions

  • Saving binary Image with overlay?

    Hello

    I'm having some trouble in saving an image with overlay information. I use IMAQ find circles to measure the rays of the holes in a binary image. Hole data is then used with oval Overlay IMAQ, draw on ovals to highlight detected circles. Works very well and the image is displayed as expected in the output of the image on the screen, the palette has the binary value. (See the second image of 3, below)

    When I try and save the image in PNG I just get a blank image (black). If I use the overlay IMAQ merge tool, I just get the green circles on the black (see the last picture of 3 below). Is there something I'm missing with pallets/fusion? Any help much appreciated. Snapshot of the (messy) code attached.

    The problem is that the binary image is all zeros and ones.  A normal image goes up to 255, so the value 1 appears black.

    One solution is to multiply the binary image of 255, which makes the image black and white.

    Bruce

  • Try a background image with a PNG with transparency matte / partial transparency

    Hello everyone.

    Here's the scenario;

    1. I have a PNG sequence rendered in a 3d program. The sequence has a landscape that is partially transparent and has no background image or color. In the animation, which is not the landscape is 100% transparent, while the landscape is partially transparent.
    2. I have a background that I want to put behind the PNG sequence but I don't want the background visible through the part of the landscape of the sequence, only the portion that is 100% transparent.

    I tried several different methods, but because the landscape is partially transparent, with a matte (alpha or alpha reverse) or blend (such as stencil alpha) mode does not give me the results I'm looking for.

    I'm looking for is a way of mast (or mask) the background image with only the part of the PNG that is 100% transparent. In this way, the background image are not displayed in the semi transparent landscape, but will be visible in the part that is 100% transparent.

    I would like to find a reasonable solution in After Effects, as opposed to the sequence of 3d objects rendered being invisible to the camera and the current background. The landscape scene itself took a considerable amount of time to make (120 hours) and I would like to avoid this kind of delay in my project.

    Thank you all in advance for your consideration.

    Maybe I said incorrectly: you cannot use the 3D app to generate a matte black and white simple - or mattes - to separate properly, then just composite in AE?

  • Right-click on the image with link problem after upgrade to 11.0

    After the upgrade, whenever I do a right-click on an image with a link, it opens the link rather than opening a menu drop-down. Any idea on what is causing this behavior?

    OK, think about it. Extension: Tab Utilities was the origin of the problem. Uninstall completely solved the problem, disable it does not solve it.

  • Background image with scrolling not for the screen

    Hi all.

    I use the following code to make the background dropdown not image, and it works for all BlackBerry Storm2 (OS 5.0) except (I tried it on a simulator):

    public class MyScreen extends MainScreen{
    
    ...
    
        public MyScreen() {
           super(NO_VERTICAL_SCROLL);
           bitmap=loadBG();       super.add(mContainer = new BGVerticalFieldManager(bitmap));
        }
        public void add(Field field){        mContainer.add(field);    }...
    
    }
    
    public class BGVerticalFieldManager extends VerticalFieldManager {
        Bitmap mBgBitmap = null;
        int mBgWidth = -1;
        int mBgHeight = -1;
        int mBgX = -1;
        int mBgY = -1;
    
        public BGVerticalFieldManager(Bitmap background) {
            super(USE_ALL_WIDTH | USE_ALL_HEIGHT | VERTICAL_SCROLL
                    | VERTICAL_SCROLLBAR);
            mBgBitmap = background;
            mBgWidth = mBgBitmap.getWidth();
            mBgHeight = mBgBitmap.getHeight();
            mBgX = (Display.getWidth() - mBgWidth) >> 1;
            mBgY = (Display.getHeight() - mBgHeight) >> 1;
    
        }
    
        protected void paintBackground(Graphics graphics) {
            paintBackgroundBitmap(graphics);
        }
    
        protected void sublayout(int maxWidth, int maxHeight) {
            mBgX = (Display.getWidth() - mBgWidth) >> 1;
            mBgY = (Display.getHeight() - mBgHeight) >> 1;
            super.sublayout(maxWidth, maxHeight);
        }
    
        private void paintBackgroundBitmap(Graphics graphics) {
            if (null != mBgBitmap) {
                int x = mBgX
                        + getHorizontalScroll();
                int y = mBgY
                        + getVerticalScroll();
                graphics.drawBitmap(x, y, mBgWidth, mBgHeight, mBgBitmap, 0, 0);
            }
        }
    
    }
    

    The Storm2 scrolls the background image, looks that getVerticallScroll() does not work.

    Can someone help me with this?

    Thank you.

    also have glance at this:

    http://supportforums.BlackBerry.com/T5/Java-development/use-a-background-image-in-application-screen...

  • How can I show a background image with a variable?

    I try to explain it:



    I have a div called "entrante1_ctn" that must contain a background image. This code works, but I don't want to do...


    sym.getComposition () .getStage ().getSymbol("entrantes_sym").$("entrante1_ctn").css ('backgro undImage','url(images/entrantes/entrante1.png)');


    I would like to the somtehing like that...


    sym.getComposition () .getStage ().getSymbol("entrantes_sym").$("entrante1_ctn").css (' undImage ',' url backgro ( variable )');


    The variable is a table element, but this code does not work:


    sym.getComposition () .getStage ().getSymbol("entrantes_sym").$("entrante1_ctn").css (' undImage ',' url backgro ( ent_1 [0] )');



    Please, helpp!

    Hi or Hello,

    • The principle( general case) ==> .css ("background-image ',' url(images/myImage.png)'");
    • With a variable (a variable):

    var image = "images/myImage.png ';

    . CSS ("background-image", "url (" + image +') ');

    • Your particular case (your case) ==> .css ('background-image', ' url ('+ ent_1 [0] + ')');
  • Hotspots or links on background image with checkerboard to fluid.

    I have a fluid grid presentation in CS6 with a home page with a background image (javascript that loads different images.  What is the best way to bind or 'hot spots' more than one large image for three menu items in random places on this page?

    Is your native Photoshop PSD image with layers?  You must save the background (building & logo) as a single image layer.  Then each of the 3 menu items save it as transparent PNGs without the background layer.

    Put the background.jpg in your head with CSS.

    Insert the Menu.pngs in your HTML and link them as needed.

    Just to let you know, the web pages that contain nothing but images do not exist for the search engines, readers screen or the language translators.  You really need to insert text rich true keyword inside

    ,

    ,

    and

    Tags.   Without content keyword rich, nobody will ever find your site in searches on the web.

    Also consider that many mobile users disable the images to record the minutes of data.  If your site is nothing more than images, they won't see much.

    Nancy O.

  • Background image with the contents of the scale?

    Hello

    I have a HBox and I want to insert a picture in it. I want the image to FILL the whole box. The photo is quite large so I want that it is in the box.

    Start with the problem.

    1. If I use HBox backgroundImage, it does not give me "content scale" property, and no matter how I tweek the size of the image, I see only the upper part of the image.

    2. If I use the tag of the image inside the HBox, if the image is large horizontally, so I can see the upper and lower part of the HBox, if the image is large vertically then I see the part right and left of the HBox. To maintain the proportions, it fills up not all HBox.

    I don't want to change the dimensions of the HBox.

    Any idea?

    It's my code.

    <? XML version = "1.0" encoding = "utf-8"? >

    < mx:Application

    ' xmlns:mx = ' http://www.Adobe.com/2006/MXML "layout =" " absolute "verticalAlign =" " way "horizontalAlign =" " Center "

    >

    < mx:HBox " width = ' 200 "height =" 230 "backgroundColor =" #000000 " " > "

    < mx:Image " scaleContent =" true "source =" " images/S1.jpg "height =" " 100%

    "

    width ="

    100% "verticalAlign =" " way "horizontalAlign =" " Center "

    / >

    < / mx:HBox >

    < / mx:Application >

    So, you want the image spread out of proportion to fill the box?

    maintainAspectRatio = "false".

    In your test code, image now fills the entire HBOX.

  • Different background image with each page?

    Hello Adobe community,

    I'm working on my portfolio and immerse myself in the CSS, I seems to have hit a bump in the evolution of the background image to each page.

    I watched a previous response and changed my style sheet to reflect the body classes that I did, but nothing seems to go right!

    http://dayandnightwebsolutions.com/

    Thank you

    Robert

    Edit, my images are locaed in '\public_html\img '.

    My CSS stylesheet is located in "\public_html\css".

    Then...

    Page needs to look inside...

    Body.index {background-image: url (.. /IMG/main-BG.jpeg);}

    Body.Services {background-image: url (.. /IMG/BG-Moon.jpeg);}

    Body.contact {background-image: url (.. /IMG/BG-Sun.jpeg);}

    ?

    Your file extension isn't actually .jpg and .jpeg. Change this in your CSS.

    Remove the prefix of body for all classes. Just use .index, .to & .contact in your CSS file. When using it in your HTML markup, include this class in any switch like body or div or any other thing.

    And above all, should any space between the url and (.)

    Change this:

    Body.index {background-image: url (.. /IMG/main-BG.jpeg);}

    to do this:

    .index {background: url (.. /IMG/main-BG.jpg);}

    Note that I deleted - image. This can be read by most modern browsers and is a short form. You can add properties of background much like repetition, position, etc. in the main tag 1.

    Trust that this assistance.

  • background images of centering problems

    Let's say I have apply a background image to the upper body and the center of the image like this

    =========================================================

    < body style = "background: url (BG_05.jpg); background-position: top center; ' > '.

    ....

    ...

    < / body >

    =========================================================

    background joins the center when the page load, and even if I resize the window of the browser background image will automatically focus... but is it possible to leave the background stay in the same position, even if I resize the browser window?

    Thank you very much...

    OK, try this:

    http://ALT-Web.com/test/resizable-BG.shtml

    Nancy O.

  • How to make the background image with dramatic style?

    Most of the images I see it is mix of pattern in the background which make it look alive. The model are lines and shiny effects. How do these lines

    oshop http://PSD.tutsplus.com/tutorials/Tutorials-Effects/Creating-a-Mac-type-background-in-phot.

    http://www.Tutorial9.NET/Photoshop/creating-the-Windows-Vista-lighting-effect/

    http://psdlearning.com/2008/06/luminescent-lines/#more-45

    Search for abstract Photoshop etc.

  • 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

  • Orcle ADF: Background Image of panel group put on the page is not getting displayed in stubborn browser task-flow

    Hello I'm developing a web application using ADF (jdeveloper 11.1.2.4). I have a template that I have panelGroupLayout. I put a background image for the grouplayout. And I created a test.jsf page from this template. When I run this page directly background image is displayed in the browser. I put this page in a stubborn taskflow. My problem is when I execute this page of the stubborn taskflow background image is not displayed.

    Image is displayed for this URL: http://127.0.0.1:7101/EasyRUN-ViewController-context-root/faces/login?_adf.ctrl-state=1px1s1o6o_26

    Image is not posting to this URL: :7101/EasyRUN-ViewController-context-root/faces/admin-flow-definition/homePage?_adf.ctrl-state=1px1s1o6o_29 http://127.0.0.1

    Please help me. Thanks in advance.

    The part of the url of the background image is the problem, probably

    As first of all, try to assign relative to your location of workflow, for example:

    background-image: url("..) ("/ ERUnBPart2.png")

    just to see what happens

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

  • Background image for Aftable

    Hi all

    I use JDeveloper 11.1.1.7.

    My scenario is need to show a < af:table > with the background image. I tried this in CSS,

    AF | table. MyTable
    {
    background-image: url("..) ("/ img/sampleImage.png");

    }

    It works fine without the data from the table. But after reading the lines the background image is hidden.

    How to set the background image with lines in the table?...

    Thank you
    Arun D.

    Edited by: T.. June 1, 2013 17:46

    I guess you have to make the background of transparent cells.

    Timo

Maybe you are looking for

  • missing driver, other pci bridge device, compaq presario

    model SR5030NX. OS = Vista Home Basic.mising driver for any other pci bridge device. When I bootup error message appears, I tried to find pilot with search without success. I don't know what is the pci bridge device, (it might be all that is in the p

  • Could not receive data from GPIB system controller (PCI card of NI - 488-2)

    Hello We create a daughter card that will allow our product shipped to communicate via GPIB. This girl GPIB card must be able to receive the SCPI message send by system GPIB controller and reply to the message. In my current configuration, system con

  • Photosmart C6380: You print envelopes

    The printer will feed into an envelope, but before you start to print it stops with the message "loading the paper in the main tray. There is paper in the main tray and the envelope is not blocked because it feeds on when I turned off the printer off

  • What is the difference between hdr-cx000/b and hdr-cx900e?

    I'm not from the United States, but I review the specifications of the hdr-cx900 I just noticed that there are 2 specific models and I don't know what are the differences between the 2. I have dealt with the customer service at the sony here in my co

  • ThinkPad T60

    Hello all,. I'm having a problem with the T60, Type = 2008, model portable 2 = CTO, ID 2008UX7 S/N L3-* an L3-*. The error on boot - Expansion Rom not initialized-PCI on the motherboard Bus: 00, device: 00, function 00. The machine continues to opera