How to make your background Image of fixed Web Page

Good afternoon.

I'm working on a website that the owner would like to its background fixed when scrolling. He plans to have a large part of its content on a single page which people scrolled down to see. I placed the following in the body section on the index page html code:

< body background = BG Properties 'Innerchild_Website_Background.jpg' = 'fixed' >

I will create a model that will allow me to other pages. This is the right place to put the above command, or should I have put in the css document associated with the page. I want to assure you that I am moving properly.

Here is the page:

http://www.innerchildoutreach.org/new_site/index.html

Thanks in advance for your comments.

In your css add this

{body

background-position: fixed;

}

GAry

Tags: Dreamweaver

Similar Questions

  • My navigation bar collapsed onto the gallery page not working gas not star tutorial - how to make and style of a sensitive web page

    Hello

    I made the tutorial how to make and style of a sensitive web page. This is the tutorial of Star Gazer. My Gallery with the images of the planets page works well until I reduce the size of the browser and displays the "sandwich" of the navigation bar icon collapsed, when I click on this icon, nothing happens. Could someone please tell me what is the problem with my HTML or otherwise I you have filled the gallery page and it works could you please paste your code in the response. Any help is much appreciated, thank you.

    Vincent

    < title > Stargazer / < /title >
    <!-"bootstrap"->
    "< link href="css/bootstrap.css" rel="stylesheet">" "
    "" < link href= "css/styles.css" rel= "stylesheet" type= "text/css" > ".
    <! - HTML5 shim and Respond.js for IE8 take in charge of the HTML5 elements and questions from the media - >
    <!-WARNING: Respond.js does not work if you view the page via file://-->
    <!-[if lt IE 9] >
    " < script src =" https://OSS.MaxCDN.com/html5shiv/3.7.2/html5shiv.min.js "> < / script > .
    " < script src =" https://OSS.MaxCDN.com/respond/1.4.2/respond.min.js "> < / script > .
    <! [endif]-->
    < / head >
    < body >
    "< div class="container-fluid" id="wrapper">" "
    "< nav class="navbar, navbar - default">".
    "< div class="container">".
    <
    ! - Brand and toggle get grouped together for better mobile display->"< div class="navigation-head bar' > '."" < button type= "button" class= "navbar toggle collapsed" data-toggle= "collapse" data-target= "#defaultNavbar1" > < span class= "only sr" > toggle thenavigation / </span >< span class= "toolbar" ></span >< span class= "toolbar" ></span >< span class= 'toolbar' ></span > </ button > """< a class="brand navigation bar" href="index.html"> Stargazer< /a >< / div > " "<!-collect the nav links, forms, and other content to alternate->"< div class="navbar-collapse collapse" id="defaultNavbar1">" ""< ul class="navbar-nav right navbar nav">".< li > <a href="#"> On< /a > </li >< li > <a href="#"> Gallery< /a > </li >< li > " < a href="http://www.nasa.gov"> ". NASA< /a > </li >< /ul >< / div ><!-/ .navbar-collapse->< / div ><!-/ .container-fluid->< / nav >"< idarticle = 'main' > '.< h1 > Close to the Sun. < / h1 >< p > Lorem ipsum dolor sit amet, adipiscing elit computer. CRAs gravida, ligula libero sem, condimentum mauris risus vitae orci sold computer and elementum tristique, felis. Nulla justo nisl, ut ut felis, tempus dapibus purus vestibule. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos inceptos. Donec lectus vel lacinia dolor quis massa mollis nisi. Phasellus at pretium ipsum. Surpassing vestibule risus vitae. Surpassing fringilla tempus lacus, vitae elementum felis efficitur. < /p >< / item >"< div class="container">"."< div class="row">"."< div class="col-md-4">".«"< div class="thumbnail"> < img src="images/gallery/gallery-thumbnail-1.jpg" alt="Thumbnail Image 1" class="thumb"> »"< div class="caption">".< h3 > Mercury< / h3 >< p > In libero non ultricies rutrum lacus feugiat. Etiam dignissim, massa and vestibule molestie nibh nisl ante, vitae city eros nec dui aliquet magna. Aenean egestas diam, pretium nisl, ullamcorper felis vitae. Suspendisse blandit lorem turpis, non tempus imperdiet aliquet leo. < /p >< / div >< / div >< / div >"< div class="col-md-4">".«"< div class="thumbnail"> < img src="images/gallery/gallery-thumbnail-2.jpg" alt="Thumbnail Image 1" class="thumb"> »"< div class="caption">".< h3 > Mariner< / h3 >< p > In libero non ultricies rutrum lacus feugiat. Etiam dignissim, massa and vestibule molestie nibh nisl ante, vitae city eros nec dui aliquet magna. Aenean egestas diam vitae ullamcorper, pretium nisl felis. Suspendisse blandit lorem turpis, non tempus imperdiet aliquet leo. < /p >< / div >< / div >< / div >"< div class="col-md-4">".«"< div class="thumbnail"> < img src="images/gallery/gallery-thumbnail-3.jpg" alt="Thumbnail Image 1" class="thumb"> »"< div class="caption">".< h3 > Messenger< / h3 >< p > In libero non ultricies rutrum lacus feugiat. Etiam dignissim, massa and vestibule molestie nibh nisl ante, vitae city eros nec dui aliquet magna. Aenean egestas diam, pretium nisl, ullamcorper felis vitae. Suspendisse blandit lorem turpis, non tempus imperdiet aliquet leo. < /p >< / div >< / div >< / div >< / div >< / div >"< div class="container">"."< div class="row">"."< div class="col-md-4">".«"< div class="thumbnail"> < img src="images/gallery/gallery-thumbnail-4.jpg" alt="Thumbnail Image 1" class="thumb"> »"< div class="caption">".< h3 > Magnetic< / h3 >< p > In libero non ultricies rutrum lacus feugiat. Etiam dignissim, massa and vestibule molestie nibh nisl ante, vitae city eros nec dui aliquet magna. Aenean egestas diam vitae ullamcorper, pretium nisl felis. Suspendisse blandit lorem turpis, non tempus imperdiet aliquet leo. < /p >< / div >< / div >< / div >"< div class="col-md-4">".«"< div class="thumbnail"> < img src="images/gallery/gallery-thumbnail-5.jpg" alt="Thumbnail Image 1" class="thumb"> »"< div class="caption">".< h3 > Microwave< / h3 >< p > In libero non ultricies rutrum lacus feugiat. Etiam dignissim, massa and vestibule molestie nibh nisl ante, vitae city eros nec dui aliquet magna. Aenean egestas diam, pretium nisl, ullamcorper felis vitae. Suspendisse blandit lorem turpis, non tempus imperdiet aliquet leo. < /p >< / div >< / div >< / div >"< div class="col-md-4">".«"< div class="thumbnail"> < img src="images/gallery/gallery-thumbnail-6.jpg" alt="Thumbnail Image 1" class="thumb"> »"< div class="caption">".< h3 > Mapping < / h3 >< p > In libero non ultricies rutrum lacus feugiat. Etiam dignissim, massa and vestibule molestie nibh nisl ante, vitae city eros nec dui aliquet magna. Aenean egestas diam vitae ullamcorper, pretium nisl felis. Suspendisse blandit lorem turpis, non tempus imperdiet aliquet leo. < /p >< / div >< / div >< / div >< / div >< / div >< footer >& copy; 2015 stargazer< / footer >< / div ><! - jQuery (necessary to Bootstrap JavaScript plugins) - >" < script src="js/jquery-1.11.2.min.js"> ". < /script ><! - Include compiled all the plugins (see below), or individual files as needed-->" < script src="js/bootstrap.js"> ". < /script >< / body >< / html >

    The cause of the problem is not attached jQuery library.

    Make sure that jquery - 1.11.2.min.js is located in the subdirectory js as in

  • How can I get the image of the Web page when my mouse over the icon in the taskbar?

    I used to get the image of some Web pages I look at one when I spent my mouse on the browser used in the taskbar, now, I only get the Scripture that says what pages are open, how to get back the images? It facilitated visually for me to see.

    Hello

    Are you referring to the feature Aero Peek in Windows 7?

    You can use Aero Peek to take a quick look at other open windows without clicking away from the window you are currently working. For more information, see Preview an open window on the desktop using Peek.

    You may experience this problem if PEAK Aero is disabled on the computer.

    If you can not see the effects of glass window, or if you are unable to use Aero Peek and Aero Shake, use the Aero troubleshooting tool to diagnose and fix the problem automatically.

    Solve problems Aero in Windows 7

    http://support.Microsoft.com/kb/976170

    You can also go to the Control Panel - Performance and options (find it by typing in the search box) - and set for the "look better".

    I hope this helps. If you need help with Windows, let us know and will be happy to help you.

  • How to make a background image fixed in Dreamweaver CM³

    I'm doing my fixed background image then when I scroll in Dreamweaver CC it remains completely, could someone please tell me how to do this?

    You cannot omit semicolons

    background-attachment: fixed

  • How to make the background image for a site

    Hello.

    First of all, thank you for reading this.

    I intend using a gradient image as background on a new site of black on the sides gradiating to blue in the Middle I created in Photoshop. The site is designed for 1024 (955) and upward. How the background image would handle so that no matter what the resolution above 1024, the visitor sees the gradient correctly, which means that Blue will be always exactly in the center of the page and the image not horizontal mosaic? (I don't want to repeat from left to right when the resolution someone is really high)

    I saw a couple of sites that use strong images that seem to stretch the background image according to the resolution, but were not able to understand the CSS code. In my case, I have a single image that has say 5 pixels high, how wide I need for the (reasonable) maximum resolution, and let repeat from top to bottom.

    Thank you.

    MFitz721

    To do what you ask would require CSS3.  This is because that the CSS3 added support for multiple background images.  What you would do, is to set a gradient to the left and the other to the right with a background color that arise in a vacuum.    Basically use you the abbreviation of "substance" and separate the different environments with a comma ","  See this example ( http://www.css3.info/preview/multiple-backgrounds/ ).  I think it's possible the long way as well (for example: position of background, background image, etc.), but you would need to write the values and who is 1 and 2 in order when you do this.

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

  • Is there a way to make different background colors on a web page? I put the background color and it comes out always white. Text colors do not either.

    I developed a webpage using Microsoft Publisher 97.  I made the bottom of the pages a color special and changed the color of the text on some points.  When I download the page via sftp, and then he discovers the background is white and the colours of text disappeared.  I don't know much about html or CSS.  Can you tell me why this happens?

    Hi Don,

    The question you have posted is better suited to the MSDN Community. Please post your request in the following link to MSDN for assistance.

    Internet Explorer Web development

  • How to make a tile for a chosen web page?

    I tried to follow the tutorial, but it did not work for me - when I right click on the page, it came not with something that allows me to pin. I have Google Chrome; is this a problem with Google Chrome? In the affirmative, please would it be solved?

    Hello

    Given that the problem is with Google Chrome I suggest you to ask your question here.

    It will be useful.

  • How to make the size of the adjustable Web page in Dreamweaver?

    Hello

    When I minimize the window of the site works in, rather than adapt its size to minmised window, this stay of its original size with the scroll bars on the side. No one knows how do automatically adjust to the size of the window for people with different screen sizes can still enjoy the full display of the Web site.

    Look at the "liquid" called DW home pages (FILE |) New > blank Page > "column 2, liquid" etc., or Google "liquid layouts.

  • Change the background image on the login page (smarthphone theme)

    Hello

    I would like to know how to change the background image on my login page.

    Version of the apex is 4.2.4.
    The theme is jQuery Mobile Smartphone (topic 50).

    Pls remind me if I missed some important information.

    I have a model of customised area on this page. My user name text fields and password + "CONNECT" button is placed in this area.

    I also have an inline css that centers in my area. My dimensions of the region are also placed here.

    Not available to access the application today so bad im trying to provide the look of it with a drawing.

    Also I noticed that my experience has some white color.

    Ty for any information that you provide.

    0Ja9gNj.png

    Hi Para,

    Try the style of your page like

    
    

    But if trying to define for your application color gradients extract ThemeRoller to http://jquerymobile.com/themeroller

    to set the themes of all colors and gradients you want without doing custom overrides CSS jQM Apex definitions.

    Everything you have requested can be configured via the ThemeRoller.

    Also found what may be useful if you are going to customize your login

    http://orapedia.files.WordPress.com/2012/12/how_to_set_background_image_in_a_oracle_apex_login_page.PDF

    Kind regards

    Benjamin.

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

    Basically what it says in the title. I came very close to achieve, but something comes to Moor in the html and css code...

    First of all, I use the latest version of Firefox and IE8 to test this situation.

    I used 2 sources of information to get this done: 1) http://css-tricks.com/perfect-full-page-background-image/ and ) 2 http://stackoverflow.com/questions/8958697/css3-background-size-cover-doesn ' t-make-image-co-ver-vertical


    In 1 case , the example of the called page CSS-Only Technique #1 gives the code that works almost perfectly for me, except that obviously I need to a background image, but the CSS provided ago obviously just for an image has fallen in the body of a page without taking account of any other content that may already be there. "The html code that I put on the page is simply < img class ="bg"src ="... / pictures/background_image.jpg "> "

    Of course, I used the CSS code in the example, less the last piece which is "@media screen" etc., which seems irrelevant to me. Of course by replacing the values according to the picture on my page.

    So what happened was that it worked almost as expected in both browsers (which means the image filled both browsers first as it should and also remained fixed when I zoomed in, inside or outside, in each case), except that the picture went on top of the current content that I already there precisely because there isn't a background in this 'technical '. (A note on the side of curious, is that the image didn't turn down content, I expected under normal circumstances, but he went right on top of it so she she hidden (like the z-index).)

    One thing that bothers me in this regard 'technical' is that if you click on view the demo just below the code provided, you will see on the example of work page (bottom of the forest), the image clearly works as a backdrop and the content is fortunately located on top! So I don't know if the person who provides the example was trying to deceive people or what! Or he got lazy and showed another page which did not use the exact code, he has provided. No matter.

    In any case this leaves me with only half-completed work, because I still need a background image that functions as the 'normal image' code provided.

    In 2 cases and on this page, the first example provided gives the CSS for clutter - namely the code in the html {...} part and shows also the same "normal image" code as shown in box 1. In this case however, that the person provide a suggestion, the html and the css is not really properly more Moor some css and html seems a little redundant. So this time, when I used the part "html" in the CSS code (i.e. just the bit that was no longer relevant), I had two different behaviors in each browser and neither of which was quite what I'm looking for. In IE8, initially the page seems well (background fills the page and the content is on top) but when I Zoom in or out the background also zooms in or out accordingly so is NOT fixed. In Firefox, the background image stays fixed, but because the image is initially not the height of the browser I guess the code it extends down (keeping the proportions - so the image enlarges essentially) to fill it. The fast way to get around it is probably add white space at the bottom of the image just to give it sufficient height is not extensible / resize automatically. But it would be nice to know at least how to work around this problem in the code. Overall, I would say that the result in Firefox is closest to the desired solution, but of course it is not arranged things with IE8.

    Apologies for the long description, but which should at least provide much info for anyone who might have a possible solution for me. Essentially what would be great is if someone could advise me how to take the code of case 1 and apply it to a piece of 'background' coding as the type that is contained in html {...} in Case 2 . Like I said, it is almost there, but I just can't operate atm after trying to combine different bits of code this way and that... Also, if anyone has another version of html-css that works well to achieve then please by all means of let me know! V thanks a lot in advance!

    It works in modern browsers of the CSS3 support.  But not pre - IE9.

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

    Nancy O.

  • How to make a 'swap' image to a smaller version of himself through a breakpoint.

    How to make a 'swap' image to a smaller version of himself through a breakpoint.

    I do not want to resize the image because I always displayed at real DPI, and I want that it 'snap' instantly changes the width of the browser.

    When the screen size is small, I want the image swap out for a smaller version of himself, a separate file. How can I do this?

    Thanks for your help

    Hello

    Please check this link - Muse CC hide in the breakpoint which could help you to make your wish come true.

    Let us know if it works.

    Kind regards

    Ankush

  • Adobe Muse | How to make a background yet?

    Hello world

    I want to create a background still on my Web site. I have an example:

    https://www.hoveniersbedrijfbullens.nl/NL/

    This backdrop does not move when you scroll how do this?

    Gyazo - 66518d617e41b0ce60a90403e7ab4240.png

    I hope you can help me.

    Sorry for my bad English, I'm Dutch.

    Hello Cis Donkers,

    You can do this easily by following step, I posted in the screenshot below.

    You can fill an image in your browser using the "browser fill" option and simply uncheck the scroll option.

    This will always keep your background image.

    Kind regards

    Ankush

  • 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 make a background Transparent in CS6?

    I was wondering if anyone could tell me how to make the background of my Flash CS6 transparent flash animation. My animated film is made up of text and I would like to be on my site, which has an image as a background and I would like the background to show through. Any suggestion would be appreciated. Thank you.

    file > publishing settings > html > window mode > transparent.

Maybe you are looking for