Setting a background image

I have a background image that has a master image on the right. I have all my text, logo, content, navigation, aligned to the left. I want the background set for the main image is always show in its entirety on the right side of the browser, while the content on the left scrolls on (or near) the bottom regardless of the amount of content is there.

I thought I had the solution with the creation of this code in my stylesheet:

{body

background-image: url(Jill%20BackgroundKlytemnestra.png);

background-repeat: no-repeat;

background-position: 50% 50%;

display: block;

-moz-background-size: cover;

-webkit-background-size: cover;

background-size: cover;

height: 1000px;

background-color: #802536;

}

But it doesn't seem to work. The background scrolls with the content.

The page is:

www.jillgrovemezzo.com/bio.htm

Regina

Add in

background-attachment: fixed;

To fix the position of the background image. You also need to change the settings of % of the background to the pixel position so he can sit exactly where you want once you add the attachment setting.

Tags: Dreamweaver

Similar Questions

  • How to set a background image

    HY guys, I'm trying to set a background image on a Blackberry screen. I used this code, but the image dousen can't cover the full screen. Can someone me say what the problem is, or give me an example of how's done it? package mypackage;

    SerializableAttribute public class BackgroundImage extends UiApplication
    {
    Imagearriereplan private bitmap;
    fieldBitmap private bitmap;
        
    Public Shared Sub main (String [] args)
    {
    BackgroundImage PAP = new BackgroundImage();
    theApp.enterEventDispatcher ();
    }
        
    public BackgroundImage()
    {
    The background image.
    Imagearriereplan = Bitmap.getBitmapResource ("loginBackground.png");
            
    Display display = new MainScreen();
            
    HorizontalFieldManager horizontalFieldManager = HorizontalFieldManager(HorizontalFieldManager.USE_ALL_WIDTH | nouveau HorizontalFieldManager.USE_ALL_HEIGHT) {}
                
    Override the paint method to draw the background image.
    public void paint (Graphics graphics)
    {
    Draw the background image, then paint.
    graphics.drawBitmap (0, 0, 240, 240, Imagearriereplan, 0, 0);
    Super.Paint (Graphics);
    }
                
    };
            
    The LabelField will be visible through the transparent image.
    LabelField labelField is new LabelField ("is a label");.
            
    A bitmap with a transparent image field.
    The background image will be visible through the transparent BitMapField image.
    BitmapField bitmapField = new BitmapField (Bitmap.getBitmapResource ("field.png"));

    Add the handler to the screen.
    mainScreen.add (horizontalFieldManager);
            
    Add the fields to the Manager.
    horizontalFieldManager.add (labelField);
    horizontalFieldManager.add (bitmapField);
            
    Tap on the screen.
    pushScreen (mainScreen);
    }
    }

    Thanks in advance

    You can scale the image with EncodedImage, but it is usually best to use an image with a sufficient size

  • Cascades: How to set the background image for the menu drop down and etc...

    Hello

    Is there an easy way to set the background image for the menu drop down and etc, current support only black as a background?

    Thank you

    Tom.

    Welcome to the forums!

    This is currently not supported unfortunately.

    I encourage you to save a feature for this request:

    https://www.BlackBerry.com/JIRA/secure/dashboard.jspa

    See you soon!

    Martin

  • How to set the background image in the window title?

    Hello

    I am a beginner in flex. I use Flex 4.

    Can someone give me some advice on how to set the background image in the title window?

    Is it possible to do?

    Thank you.

    Hello

    Check the code in the example below


    http://ns.Adobe.com/MXML/2009.
    xmlns:s = "library://ns.adobe.com/flex/spark".
    xmlns:MX = "library://ns.adobe.com/flex/mx" minWidth = "955" = "600" minHeight >
       
           
       

       
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";

    s | {BorderContainer
    background - image: embed(source="image/wheres_the_green_rez.jpg");
    background-image-fill-mode: clip;
    }


       
           
       

    Kind regards

    Anitha

  • Is it possible to set the background Image of the graph?

    APEX version: 4.2.3

    Browser: IE9 / Chrome

    DB: Oracle 11 g 2

    Hello Experts,

    It is possible the background image of the cards? If so, please guide me how to do because I have found no option.

    Thank you!

    Is something like what you had in mind?

    http://Apex.Oracle.com/pls/Apex/f?p=76573:1

    This was accomplished by customizing the fill setting in the XML behind the Anychart.

    Background of the chart has been

    
     
     
     
     
    

    Altered see line 2:

    
     
     
     
     
    

    Jeff

  • How to set a background image re-scalable depending on the screen resolution of viewers

    Hello

    I searched the net for ages looking for a way to make a background image on the scale according to the size of a monitor of viewers.

    I found a solution:

    Source code

    < body >

    "< img src ="... /... ' / Images/Connor/background_bg.png ' class = 'bg' >

    < / body >

    CSS (style)

    {img.BG}

    / * Define the rules to fill the background * /.

    min-height: 100%;

    min-width: 1024px;

    / * Set up a proportional scaling * /.

    Width: 100%;

    height: auto;

    / * Set up positioning * /.

    position: fixed;

    top: 0;

    left: 0;

    }

    @media screen and (max-width: 1024px) {}

    {img.BG}

    left: 50%;

    left margin:-512px. }

    }

    Now, this has the desired effect, however when I place a div below "< img src ="... /... "' / Images/Connor/background_bg.png ' class = 'bg' > ' in the body of my site, it pushes this div below my bottom.

    I got the code from " " http://CSS-tricks.com/perfect-full-page-background-image/ "and it does not seem to do this in this example. "

    I pasted my complete code below, if someone could have a look and advise where I'm wrong that would be greatly appreciated.

    Thanks and greetings

    Elliot

    Source code

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

    " < html xmlns =" http://www.w3.org/1999/xhtml ">

    < head >

    < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"

    < title > Untitled Document < /title >

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

    < script type = "text/javascript" >

    function MM_swapImgRestore() //v3.0 {}

    var i, x = offline. MM_sr; for (i = 0; a & & I <.) 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 is d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i <.) 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]) & & copyrights) 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 >

    < onload of the body = MM_preloadImages('..) « /.. / Images/Connor/nav_bar/home_ro.png ','... /... / Av_bar/about_me_ro.png images/Connor/n ','... /... / Images/Connor/nav_bar/c.v_ro.png ','... /... / Bar/portfolio_ro.png images/Connor/nav_ ','... /... (/ Images/Connor/nav_bar/contact_me_ro.png') ">"

    "< img src ="... /... ' / Images/Connor/background_bg.png ' class = 'bg' >

    < div id = "web_centre_wrap" >

    < div id = 'menu_bar' > < table width = "960" border = "0" cellspacing = "0" cellpadding = "0" >

    < b >

    "< td width ="105"height ="68"> < img src ="... /... "/ Images/Connor/nav_bar/nav_bar_left.png" width = "105" height = "68" / > < table >

    "< td width ="147"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image3 '", '... /..) " (/ Images/Connor/nav_bar/home_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/home.png" name = "3" width = "147" height = "68" border = "0" id = "3" / > < /a > < table >

    "< td width ="147"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image4 '", '... /..) " (/ Images/Connor/nav_bar/about_me_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/about_me.png" name = "Image.4" width = "147" height = "68" border = "0" id = "Image.4" / > < /a > < table >

    "< td width ="148"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage (' picture5 '", '... /..) " (/ Images/Connor/nav_bar/c.v_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/c.v.png" name = "Picture5" width = "148" height = "68" border = "0" id = "Picture5" / > < /a > < table >

    "< td width ="147"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image6 '", '... /..) " (/ Images/Connor/nav_bar/portfolio_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/portfolio.png" name = "Image6" width = "147" height = "68" border = "0" id = "Image6" / > < /a > < table >

    "< td width ="148"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image7 '", '..) " /.. (/ Images/Connor/nav_bar/contact_me_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/contact_me.png" name = "Image7" width = "148" height = "68" border = "0" id = "Image7" / > < /a > < table >

    "< td width ="118"height ="68"> < img src ="... /... "/ Images/Connor/nav_bar/nav_bar_right.png" width = "118" height = "68" / > < table >

    < /tr >

    < /table >

    < / div >

    < div id = "header" > < / div >

    < div id = "content" > < / div >

    < div id = "footer" > < / div >

    < / div >

    < / body >

    < / html >

    CSS (style)

    @charset "utf-8";

    / * CSS document * /.

    {img.BG}

    min-height: 100%;

    min-width: 1024px;

    Width: 100%;

    height: auto;

    position: fixed;

    top: 0;

    left: 0 ;}

    @media screen and (max-width: 1024px) {}

    {img.BG}

    left: 50%;

    left margin:-512px ;}

    {#web_centre_wrap}

    Auto margin: 0 ;}

    {#menu_bar}

    #header {}

    Background: url (.. /.. Images/Connor/Header.png) ;}

    #content {}

    Background: url (.. /.. Images/Connor/content.png) ;}

    #footer {}

    Background: url (.. /.. Images/Connor/footer.png) ;}

    Try this:

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

    Nancy O.

    ALT-Web Design & Publishing

    Web | Graphics | Print | Media specialists

    http://ALT-Web.com/


  • Set a background image w / Flash

    Hello-

    Is it possible to set up a background image (repeat or not repetitive) that space scenic floats above.

    When I use the file > publishing settings > HTML > publish - it creates the HTML document but any area outside of the scene is colored with the default phase color - can it be implemented in Flash or changed in HTML?

    Here is a section of the HTML document:

    < body bgcolor = "#ff00ff" > <-it's the current color of the stage in Flash
    <! - url is used in the film - >
    <! - text used in the film - >
    <!-saved from url = (0013) subject: internet->
    < script language = "JavaScript" type = "text/javascript" >
    AC_FL_RunContent)
    'codebase', ' http://download.Macromedia.com/pub/Shockwave/cabs/Flash/Swflash.cab#version=10, 0,0,0 ',
    "width", 100% '.
    "height", 100% '.
    'src', 'krae_pink ',.
    'quality', 'high ',.
    "pluginspage", ' http://www.Adobe.com/go/getflashplayer_fr ',
    "align", "middle",
    'play', 'true ',.
    'loop', 'true ',.
    "scale", "noscale"
    'wmode', 'window ',.
    "devicefont", "false."
    'id', 'krae_pink ',.
    'bgcolor', '#ff00ff', <-it's the current color of the stage in Flash
    'name', 'krae_pink ',.
    'menu', 'true ',.
    'allowFullScreen', 'false. '
    "allowScriptAccess", "sameDomain",.
    'film', 'krae_pink ',.
    "salign", "
    ); end AC code
    < /script >

    Thank you-Ben L

    Yes you can, but flash does not add any background image for you. It only generates the HTML file with the script object incorporation. Then, you will need to add the HTML script to add the background. You will also need to set the SWF object as transparent so that it will be "hover" on the HTML file. Do that by setting the property wmode dipping, code that looks like this: http://www.pastie.org/822998. Or set the window Mode HTML publication to "Transparent Windowless" Settings tab.

  • Set a background Image on Panel by CSS

    Hey guys,.

    I have yet to find a 'decent' tutorial or list examples of external use of the css in combination with a flex application file.
    Although that might be related to me being a node :)
    Anyway, I tried the live docs widely enough I think and even read the pages on css on the Resource Center livedocs thingie.

    So, here's my problem:
    I try to set a certain .jpg I have as a background for ALL my panels in my application.
    So what I try to do is in my .css file I put this:
    Quote:

    Panel {}
    background-image: ' images/camo.jpg ";
    }
  • Set the background image of a cluster? [LV 2013]

    Hello-

    Researcher, said, "why don" t you turn the image on the front panel and then decorate the image with the controls? See? Problem solved. "And the door closes.

    So, I take the picture, scaling properly and voila! It is now the background image.  Then add controls.

    The horizontal and vertical scroll bars to move controls... but the background image is not followed.  So if someone touches the scroll bars (they are required) then controls and image are aligned.  Worse yet, their modified track manually is a pain in the eye-hand control.

    I could put in a button titled "realign" and have it reset the position of the scroll bar. Or have the scrolling screen VI bar position (look at the FP zero spot) and some treatment to shift the image of the picture.  What is its painful.  Is there another way around the problem?

    HM. A cluster? Clusters follow the scroll bars. But I can't seem to put a background image a cluster. The background color can be changed... but I don't see a way to paste a picture.  I tried customizing the cluster control and attempted to use the same method to add an image as on the front panel (with the right button of the scroll bar, follow the instructions). This has changed the background of the typedef would control.  Saved.  Tried to use it. LabVIEW will > BEEP<  and="" nothing="">

    I really want to avoid building this complex picture of decorations.  Especially when the image has chemical compounds in the boxes: how to index and the letters and numbers?   That... and the image is one of these steps 'it's refinement... ».

    Thank you for your time.

    Mark

    You don't give enough information on how this actually looks like and I don't have any experience with background images, but I would simply say, you drag the image file in the public Service and use the command menu in the toolbar to move backward (Ctrl + Shift + J) and then it must maintain position relative to other objects. You can then use the same menu to lock, so that it is not moved accidentally. You can also place an image control in the back and load the image in the code if it changes a lot, but this isn't a recipe for positioning the elements properly.

    I also generally agree with Martins that scrolling is a flag. If you need to scroll, you look and see if there is a problem and other solutions.

  • set a background image for a text box or label?

    Hey gang,

    I would like to put a background image for a text box or label.

    is there a way to do this?

    also if I put the bottom level of the container root and do the rest orders slightly transparent (opacity: 0.8 or something), the background appear through?

    Thank you

    J

    for your text box, define backgroundVisible: false & and/or upgrade the opacity to the low enough that you can see through it and place your background image behind the text box. (I belive opacity changes will affect the text as well).

    for labels, I used the method of the container as you described.

  • How to set the background image on my request.

    Hi all

    I use jdev 11.1.2.4.0 version

    use case: I create mobile applications and using the skin by default 'mobileFusionFx '.

    so when I run application there show black screen as a background image on my application

    My question is how to change the background image.

    Thank you

    Manish

    Resources of the Application open-> descriptors-> ADF META - INF-> adfmf-config. XML

    Check the family skin it and use in the skin of skin-addition id attribute.

    With this way automatically all your pages will use the same background image.

    In addition, background - image: url("images/back.png");    ---> It denotes that this images folder is inside the css file. If the pictures folder is a brother to css file, use

    background-image: url("..) (' / images/back.png ');

  • How to set a background image in javafx?

    Hello world

    I draw FXML GUI, it includes labels and ProgressBar, load it into JavaFX, it is a code snippet.

    root = FXMLLoader.load (getClass () .getResource ("StartMenuFXML.fxml"));

    Label1 = (label) root. Lookup ("#label");

    Label2 = (label) root. Lookup ("#label");

    progressBar = (ProgressBar) root.lookup ("#ProgressBar");

    scene = new Scene (root, 600, 400);

    stage.setTitle ('start progress");

    Progress p = new Progress();

    p.Start ();

    stage.setScene (scene);

    internship. Show();

    I need to add a background image, so I add the declarations:

    Component GridPane = new GridPane();

    pane.setTitle ("background - fx - image: url ('image1.jpg')");

    and change: scene = new Scene(pane,600,400);

    It can display the background image, but I don't know how to display tags and ProgressBar on the background image.

    Give me a good resolution, please!

    Thank you very much!

    Just do

    root.setStyle("-fx-background-image: url('image1.jpg')");
    

    and use your new Scene call (...) original.

  • How do I set the background image for the menu I have the DSP in Muse

    I design a layout and I want to bring converted of the PS to dream. Anyone know how I can do this.aa.png

    I am trying set high and the low image of the menu in muse.

    I would like to know how I can do better.

    Thank you

    Kristina

    Hi Kristina,

    You can disable the image that you have pasted above and also to create a toggled State for all menu items. In fact, there are 4 States: Normal, rollover, mouse and mouse down, but you will use usually two images because some States share the same image. Next, you need to use the menu widget and provide your cutting of images for all States in this widget. Check this link http://www.adobekb.com/building_your_first_website_pt4.html to this section all about:

    See you soon,.

    Mario

  • set as background image

    Hello

    I imported a picture in the workspace, then the source of the region, I wrote
    < html >
    < background = #ASOCIATIE #test.jpg body >
    < / body >
    < / html >
    but it shows nothing.

    Thank you

    It should be #WORKSPACE_IMAGES #test.jpg

    Make sure the image is downloaded to the components shared-> Images and any selected application and the name of the file is "test.jpg".

  • How to set the background image in the TextField in Cascade (Custom Field)?

    Hello

    Someone know how setBackGround image in TextField?

    As it actually:

    import bb.cascades 1.2
    NavigationPane {
        id: nav
    
        Page {
    
            Container {
    
                Container {
                    layout: DockLayout {
    
                    }
                    ImageView {
                        imageSource: "asset:///images/chicken.png"
                    }
                    TextField {
                        id: txt
                        text: "Hello"
                        backgroundVisible: false
                        verticalAlignment: VerticalAlignment.Center
                        textStyle.fontSize: FontSize.Large
                    }
                }
            }
        }
    }
    

Maybe you are looking for