Only "startscreen" should be able to fill the browser window

Hi guys. Do you know where I could find a tutorial etc. to build a 'startscreen' like http://hungr.ee/ ? I could resize my browser window, and the background image fills the entire window. The writing remains also in the environment. If I scroll a bit more, image and text scrolls upwards well. Thanks for your help!

Hello

You can use browser width content and then apply the scroll effect that would create similar effect that you referred.

There are many resources available which you can learn, bit I list below:

http://TV.Adobe.com/watch/creative-cloud-for-design/discover-new-Parallax-scrolling-with-a dobe-muse-cc.

http://www.YouTube.com/watch?v=eQo_k9WiLms

http://TV.Adobe.com/watch/Muse-feature-tour/Muse-design-for-flexible-browser-width/

http://www.YouTube.com/watch?v=xZ7HP0RN0os

Thank you

Sanjit

Tags: Adobe Muse

Similar Questions

  • Fill the browser window

    Can someone look at this issue and tell me what I can do to make the header bar fill browser completely from left to right, no matter the size of the window? He is just short stop at left and right. Thank you!

    www.upstartstudio.com/HS.html

    HTML:

    < ! 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 > H & amp; Woodworks S < /title >

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

    < / head >

    < body >

    < div id = "comtainer" >

    < div id = "header" >

    < div class = "headerCenter" >

    < div class = "logo" > < img src = "assets2/hsLogo.png" width = "180" height = "100" / > < / div > "

    < div class = "slogan" > < img src = "assets2/TagLine_03.gif" width = "682" height = "35" alt = "of the spaces of life custom woodworking, carpentry and furniture.' / > < / div >"

    < ul >

    < li > < a href = "index.htm" > HOME < /a > < /li >

    < li > < a href = "about.htm" > ON H & amp; S < /a > < /li >

    < li > < a href = "spaces.htm" > SPACES < /a > < /li > ""

    < li > < a href = "detailing.htm" > WRAPPING < /a > < /li > ""

    < li > < a href = "cabinetry.htm" > TILES < /a > < /li > ""

    < li > < a href = "furninture.htm" > FURNITURE < /a > < /li > ""

    < li > < a href = "contact.htm" > CONTACT < /a > < /li > ""

    < /ul >

    < / div >

    < div id = "homeMain" > < / div >

    < / div >

    < / div >

    < / body >

    < / html >

    CSS:

    @charset "UTF-8";

    HTML {}

    background-image: url (.. / assets2/coffeetable_bkgrnd.jpg);

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-position: Center;

    WebKit-background-size: cover;

    moz-background-size: cover;

    o-background-size: cover;

    background-size: cover;

    }

    #header {}

    background-color: #4b4b48;

    padding: 0px;

    height: 160px;

    top of the margin: 50px;

    margin-right: 0px;

    margin-bottom: 0px;

    left margin: 0px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-right-style: none;

    border-bottom-style: solid;

    border-left-style: none;

    border-bottom-color: #FFF;

    border-top-width: 2px;

    border-bottom-color: #000;

    position: relative;

    z-index: 1;

    }

    {#comtainer}

    background-color: #9F0;

    margin: 0px;

    padding: 0px;

    position: relative;

    }

    {.headerCenter}

    padding: 0px;

    Width: 1024px;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 0px;

    left margin: auto;

    position: relative;

    height: 159px;

    }

    .logo {}

    top of the margin: 35px;.

    margin-right: 0px;

    margin-bottom: 0px;

    left margin: 0px;

    padding-top: 0px;

    padding-right: 25px;

    padding-bottom: 0px;

    padding-left: 50px;

    float: left;

    border-right-width: 1px;

    border-right-style: solid;

    border-right-color: #FFF;

    }

    {.tagline}

    background-color: #FFF;

    padding: 0px;

    float: left;

    height: 35px;

    Width: 682px;

    top of the margin: 70px;

    margin-right: 0px;

    margin-bottom: 0px;

    left margin: 35px;.

    }

    #header ul {}

    list-style-type: none;

    margin: 0px;

    padding: 0px;

    float: none;

    position: absolute;

    right: 100px;

    Bottom: 0px;

    }

    #header ul li {}

    float: left;

    text-align: center;

    margin: 0px;

    padding: 0px;

    }

    #header li a: link, #header li a: visited {}

    display: block;

    margin: 0px;

    do-family: Georgia, "Times New Roman", Times, serif;

    do-size: 12px;

    list-style-type: none;

    text-decoration: none;

    make-style: normal;

    line-height: 1.8em;

    make-weight: normal;

    do-variant: normal;

    text-transform: capitalize;

    color: #BABABA;

    padding-top: 0px;

    padding-right: 8px;

    padding-bottom: 0px;

    padding-left: 8px;

    border-right-width: 1px;

    border-left-width: 1px;

    border-right-style: solid;

    border-left-style: solid;

    border-right-color: #4b4b48;

    border-left-color: #4b4b48;

    }

    #header li a: hover, #header li a: active {}

    color: #FFF;

    border-right-width: 1px;

    border-left-width: 1px;

    border-right-style: solid;

    border-left-style: solid;

    border-right-color: #999;

    border-left-color: #999;

    }

    {#homeMain}

    background-color: #333;

    padding: 0px;

    height: 450px;

    Width: 1024px;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 0px;

    left margin: auto;

    z-index: 2;

    }

    Simply enter this code as a first element in your CSS file:

    {body

    margin: 0;

    padding: 0;

    }

    You can also completely remove this style because it has no sense at all:

    HTML {}

    background-image: url (.. / assets2/coffeetable_bkgrnd.jpg);

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-position: Center;

    WebKit-background-size: cover;

    moz-background-size: cover;

    o-background-size: cover;

    background-size: cover;

    }

    The style above contains a lot of unnecessary elements that are not valid.

    I hope this helps.

  • When the signer will sign on the doc that I want to fill the date today, and he should be able to change the date

    Hello world.

    I joined salesforce with echosign.

    I need a help, whenever signatory 2 goes to sign on the doc I want to fill the date today and the signatory 2 should be able to change the date preceding the date of signature. 

    Hello

    So firstly follow the post on the forum to create a formula in salesforce field that creates the date as a string and this merge field in an agreement echosign.

    For example, configure the following field to receive the sfdc date string:
    {{todayeditable_es_:signer1}}

    of course to call the field all you want and also assign the right if not signer signatory 1.

    You can then add a calculated field that compares the date in the field of the todayedtiable against today's date

    {{datecheck_es_:signer1:calc(if(date([today]) > now(), "today larger than today", "continue to next step"))}}

    so, for example today's date is February 12, 2015
    the date entered in the todayeditable field is
    12/02/2015
    the audit date field will say "contine" (or whatever text put you between quotation marks)
    If the date entered has been
    13/02/2015
    datecheck displays "today higher than today.

  • When someone comes in! * they should be able to download the file, how can I do?

    Original title: Hello

    Hello

    people you know out

    Here I want to insert a file

    When someone enters

    ***!***

    they should be able to download the file

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;

    namespace NewProject
    {
    Class Program
    {
    public static void Main (string [] args)
    {
    Console.WriteLine;
    Console.WriteLine ("How are you");
    String a1 = Convert.ToString (Console.ReadLine ();
    if (a1 == "***!***")
    {
    Console.WriteLine ("you are great");
    Console.ReadLine ();
    }
    Console.WriteLine ("what you do");
    String a2 = Convert.ToString (Console.ReadLine ();
    If (a2 == "!") *!!!")
    {
    Console.WriteLine ("you are great");
    Console.ReadLine ();
    }
    Console.WriteLine ("end");
    Console.ReadLine ();
    }
    }
    }

    Hi stevoo,

    The question you posted would be better suited in the MSDN Forums. I would recommend posting your query in the MSDN Forums.

    To contact the MSDN support, you can use the following link.
    http://social.msdn.Microsoft.com/forums/en/categories

    Hope this is useful.

  • Hello! How can I convert a psd files with levels of text in PDFs into editable text? I should be able to edit the pdf files converted (from psd) with adobe reader. Thank you!

    I would like to convert psd to pdf files into editable from the current levels of photoshop text. After that I'll convert psd to pdf, I should be able to open the PDF with adobe reader and change the text.

    If anyone can help me I would really appreciate that cause its really important for me can thought to it.

    Thank you very much!!

    Gaia

    Hi gaiar402796,

    All changes will be possible using Acrobat application.

    Using reader you will not be able to make any changes.

    Kind regards
    Nicos

  • How to make an image fill the width of the browser window?

    I placed an image to fill the width of the screen, but when I saw it, the image will not fill the width of the browser. (I can fill the width using fill from the browser, but I want only the width to fill the browser, not up to par.) I checked "Fill to browser width" in virtue of resize it, but that has no effect. Any suggestions?

    Make sure you have a fluid width for your site in the properties and then when you resize the I'mage on the edges of the page, use the drop resize and select stretch to the width of the browser.

  • I recently change the Image to fill the browser on my templates A and B.  I erased completely all my content on the pages of the site.  What?

    I recently change the Image to fill the browser on my templates A and B.  I erased completely all my content on the pages of the site.  What?

    The image is perhaps in a layer above all the other layers.  I'm no expert with Muse, but I learned by experience that the order of your layers and property matters a lot.

    John

  • How to add an image that fill the browser?

    How to add an image that fills the browser when it is resized? Like this site Freelance Design & photography: cotton - ink.co.uk where the window or the filling of pict cabin browser.

    Thank you

    Hello

    Please, try the following steps.

    1 create a rectangle and make it 100% width by pressing the button width 100%.

    2 give this rectangle at the height of your choice.

    3. fill the image desired in the rectangle using fill option and make 'Center' "scale to fill."

    Please let me know in case you are looking for something else.

    Concerning

    Vivek

  • In CC Dramweaver Adobe how to make my Web page fill the entire window?

    In Adobe Dreamweaver CC how to make my Web page fill the entire window?

    A width of 100% CSS.


    Body {width: 100 %}}

    Nancy O.

  • Page DW8 with HTML to fit in the browser window

    I created a basic html page and wish to have the page continue to fit in a browser window as the window changes size. Tried with CSS "background-size = 100%" fixed online codes, but doesn't seem to work.

    The background-size setting is only to set a background image. Would not resize the entire page.

    Several things working against you in your code. The first and most difficult to treat while using it on the page, is "position: absolute". In General, this setting is the opposite of reagent. Position: absolute "can" be used in sensitive designs, but it requires additional code to make it happen. Absolute positioning of objects include an exact amount of pixels high, left, down or to the right of the parent (just up and left by default in DW) element. In your case, #Layer1 will always be 431 pixels from the top of the page and 329 pixels from the left that is decidedly "not suitable."

    These parameters (position, top and left) must be removed and the APDiv/layer button should be ignored here on out if you want your design to adapt to different screen sizes. You will need to learn how to position elements using css float, margin and padding if you want to create something sensible. Running through the tutorials at http://www.w3schools.com/css for some databases. Some other links on css positioning...

    Learn CSS positioning in ten steps: absolute relative static position float

    CSS - float and clear formatting

    Your width settings also say your items to an exact pixel size as well. To make your attentive elements, you can use % width settings. The actual size of an element using a percent width is determined by the setting of its parent element. For example, if you set the width of #Layer1 to 80%, instead of 674 pixels, it will eventually be 80% as wide as thesetting the tag. Given that theis assumed 100% unless otherwise stated, layer1 would end up being 80% of the width of the browser window. With ' width: 60% ", you can use a setting min-width" never get smaller than that "in css. If you set your same #Layer1 width: 80% a min-width: 400px will keep it from never has less than 400 pixels wide.

    Once you have the basics of layouts css under your belt, look into CSS Media Queries. Basically what they allow you to do, is put "break points" in your .css file so "once that window reached 401 pixels or more, use this css instead" so it allows you to write completely different rules for various devices.

  • How can I print to PDF from the browser window.

    When I try to print to PDF from a browser window (tried Firefox and IE), nothing happens.  However, I am able to send the same window to an agreement of the printer. I am able to print to PDF for local applications (e.g.excel, Word) very well.  I am running Windows 7 on a HP Pavilion dv7j laptop.  Please notify.  Thank you.

    If you do not have Adobe Acrobat (should not be confused with Adobe Acrobat Reader), you do not use the Adobe PDF printer and check out support for any PDF printer you use. Adobe Acrobat Reader does not install a PDF printer.

  • Footer moving with the bottom of the browser window, not with the content of the page.

    I'll build a new website that incorporates a standard footer.

    The footer works as expected in the sense that moves down when more content is placed in the page. However, when I transfer the Web site in a browser the footer is to stay with the bottom of the browser window and not only with the content of the page. By example, if I Zoom out as far as my browser will allow the footer always appears at the bottom of the browser window leaving a large gap between the content of pages and the page footer.

    Any suggestions for a fix?

    Hello

    Try to uncheck the "sticky footer". It should solve the problem.

    Kind regards

    Aish

  • I have centered on site in the browser windows, now IE centres all the content of all pages

    I'm trying to balance my Web site pages in the browser windows adding < div align = "center" > just below the opening of the body tag and < / div > just before the closing body tag.

    I have serverside includes nav, footer and header.  The first thing I noticed was the buttons on the nav bar do not align more left, but only in Internet Explorer.

    Now, I see that IE is centering all the content of all pages.  What should do?  the Web site is http://aromaforhealth.com

    I'm using tables and do not have much knowledge about using server-side includes or code.  So, be specific.  Thank you very much.

    Your CSS is missing an end support and that's why he messed up your pages.

    In addition, the width of your page must be wider than the larger object on your pages.

    Try the following code exactly as shown here:

    Body {width: 780px; margin: 0 auto ;}}

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB
    http://ALT-Web.blogspot.com

  • Resizing of the buttons on the toolbar disappear after the browser window

    When I run my browser all the buttons on the toolbar are in place.

    http://C2N.me/3cwiz9M.jpg

    When I resize my browser window to make it smaller, these buttons to collapse to a "arrow":

    http://C2N.me/3cwiLnZ.jpg

    But when I resize my browser window to make it larger or maximize the browser window, these buttons won't reappear soon whatever I do next.

    http://C2N.me/3cwiWnn.jpg

    The only thing that helps is to close the browser and run it again.

    Possible causes are extensions that required, information or other content of text in the Navigation toolbar.
    You can try to move some of the buttons that are provided by an extension temporarily to a different toolbar to test this.

  • Why of opaque boxes appear in place of the entered text (Firefox ver. 34/Ubuntu 12.04) in the browser window?

    There was a similar question posted earlier, but this isn't exactly the same thing. When all 'text' has been reached and appears in the URL address box - it is characterized by rectangular, green, black, or gray boxes (instead of letters, numbers, etc.). I can always navigate normally using the browser window, the text always appears in this format "hidden". In safe mode does not change the appearance. I updated the software, Firefox, using Linux (Terminal).
    This problem is specific to Firefox only... no other browsers show this way.
    It has been a consideration for a while, now. In fact, I got to use another browser, although I have Firefox in favour (including Linux) and wish to use it.
    Thank you.

    Sorry to hear that you have been waiting so long! Could you check this thread started by another user of Linux and see if workaround it helps you on your system:

    How can I stop firefox ffrom blocking URLS

    (Workaround was to switch the preference gfx.xrender.enabled to false).

Maybe you are looking for