Scalable background image from the browser window.

fuddlebunker 3 months ago

Looks like I gave the direct download link.  If you want to see an example on my site, you can go on http://www.fuddlebunker.com/scalable-....  That's what I wanted to post last night, but apparently I'm tired.

lilpillz04 1 day ago

What happens when you add text and the page length grows? My page renders a resolution more nearly the same page so that only when you reach the end of the page see you at the end of the picture. How can I get the picture to stay as it is planned, covering completely the screen and stationary and have only the text itself move?

Can you post the URL, so I can take a look?

Design.Hunter 6 hours ago

The scale is not going to work well with a super high page. Best for heights of page fixed (and shallow). would love to hear if there is a way to separate scrolling of content from one medium to the scale.

lilpillz04 2 hours ago

I see the problem here with the height of the size of the image. Here's an example of what I would take place. www.themasters.com-- if you ctrl (+ or-) to zoom the image remains relatively constant. In addition, on other pages, is the background image. Could we change it to say cover the entire page giving more details and constrictions regarding its size or zoom?

It seems that themasters.com uses a JavaScript to maintain the background image at 100%.  He works very simular to the solution I posted in the link that uses CSS to keep the background image to 100%

In regard to the second question, you could do with abritrary html using a div.

Tags: Adobe Muse

Similar Questions

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

  • Scalable image slideshow from the browser window

    Im trying to use 3-5 images in a slide show that is the width of the window of the browser here is an example of what I'm talking about http://rorymcilroy.com/

    Also where he says: I am a golfer & etc... is it possible for me to have the text appear also with each slide?

    You will not be able to create one that develops dynamically with the browser, it will have a fixed size. You can add text to slides using widgets of Composition (even if the text scrolling animation is not possible).

  • 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
  • CS5 - how to easily slide in the images from a browser?

    In the previous version (on the PC anyway) you caould literally drag an imaeg from a web browser empty just a place in photoshop and it would become immediately available to work on.

    It saved me tons of time (click right imaeg, save it on the desktop, go to photoshop, open, select the image, etc.)... .to was all done instantly.

    With a little experience under my belt with CS5, it seems as if I can not get it working.  Maybe it's my ignorance with MAC OS (I'm new to it), or I need a different browser, etc..

    Anyone know how to drag and drop images on the web (browser), directly in Photoshop (CS5)? I use a new MacBook Pro 13"

    You can drag and drop the image from the browser into the Photoshop icon on the dock and it will open automatically.

    I hope this helps!

  • 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

  • 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

  • Please help: content still is not fixed with background image when I resize the browser window

    I am designing a Web site and want my content appear in the same location relative to the background image, regardless of whether or not the browser window is resized. How can I do this? (the content always moves when I preview the page)

    You can pin the object on the page so that it remains in the same position with any size of the screen.

    Thank you

    Sanjit

  • Background image to fit the browser window

    Hi all
    I would like a background image to fit the browser window with a section of content it contains / above it. I can't do too much work, but I've done a mock up for you give an idea on http://www.greenpatch.co.uk/test/test.html! The basis for the content CSS is as follows:
    #container {}
    Width: 770px;
    margin-right: auto;
    left margin: auto;
    border: thin solid #FF0000;
    top of the margin: 207px;
    }
    #header {}
    Width: 770px;
    height: 120px;
    background: url(images/newbackground.jpg) no-repeat;
    border-bottom: thick Ridge #006633;
    }
    {#contentwrapper}
    Width: 768px;
    float: left;
    }
    #left {}
    float: left;
    Width: 212px;
    }
    #right {}
    float: right;
    Width: 525px;
    padding: 10px 20px 50px 0px;
    }
    #footer {}
    Width: 770px;
    padding-top: 8px;
    Clear: both;
    padding-bottom: 8px;
    border-top: Ridge average #006633;
    background: #669966;
    }

    Any suggestions much appreciated. Thank you in advance.

    Note Although the distortion. You can use this method if you must, but I
    invites you to put some min and max limits on the size of your page. Otherwise,.
    It will look all just horrible on the ultra wide screens or 3 components.

    --
    Nancy O.
    ALT-Web Design & Publishing
    www.Alt-Web.com

  • How I would get the background of the body element to open the browser window wide

    How I would get the background of the body element to open wide the browser window? I've heard that using an HTML tag or CSS rule that I can put across a background which is placed in the body element without using javascript is that true?

    You could, but why, (she also would work properly, as it is)?

    This size not your background image and that only the window correspond to your design, not your design to adapt to the window. If you want your design to fit a window much easier and not javascript dependent way would be to use page css liquid layouts, (as I said earlier, the background image will not develop unless you use values of %).

    For liquid layouts testing - http://www.adobe.com/devnet/dreamweaver/articles/bk_dwcs4_mastering_css.html

    PZ

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

  • How can I insert images of full-width that reach until the edges of the browser window?

    I would like to insert pictures full-width that reach until the edges of the browser window. When I try to do and break the boundaries of the image to the absolute limits of the page in edit mode, you can push the image back to the borders of the body in preview mode.


    I can do rectangle normal blocks full-width, but no pictures.

    Who can help me?

    1. Create a box, and then click the '100% width' along the menu bar icon to define your area to scale to the width of the browser.
    2. Import an image in the box using the parameters shown in the second picture,

  • How to stretch the background image in the body in relation to the browser instead of the default repeat?

    Hello world

    I am new to dreamweaver and I'm still learning the basics. What I'm trying to accomplish at present:

    I have a #container div in my body div.  The container is set to the auto margins in the body so that it is always centered.  I want a background image in the body (behind the container div), BUT I do not want to repeat awkwardly.  I want so that it can automatically expand to the size of the browser of the Viewer.  How can I do this? Anyone know?

    Thank you very much :)

    Murray * CPA * has written:

    Now - background images DO NOT STRETCH.  So much for that idea...

    This was true when Murray originally wrote in April 2009, but shortly after, it became possible using the CSS3 background-size property, which is now supported by most browsers. See http://cookbooks.adobe.com/post_CSS_Background_Stretch__updated_-16474.html.

    It is the risk of a diversion of a thread that has more than three years. Other people could come along and do not realize that boards of formerly right of Murray is now obsolete.

    I am locking this thread to avoid the wrong information to perpetuate.

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

  • Is there a possible solution to this age-old problem which graphics disappear when the browser window is resized?

    example: www.satlinker.de
    If the browser window is smaller than the content, the header image seems well.
    My css stylesheet looks like this:

    #banner {
     padding-left:10px;
     text-align: left;
     font-weight: bold;
     border: 1px solid #000;
     background: transparent url(/media/header.svg) top left no-repeat;
     height: 70px; /*workaround to adjust width*/
     -webkit-background-size:100% 100%;
     -moz-background-size:100% 100%;
     -o-background-size:100% 100%;
     background-size:100% 100%;
    }

    It has nothing to do with svg, similar problems with png images.
    In earlier versions, height adjustment worked as a workaround, but no more in vesion 17.
    There are various problems like the one described in the net:
    for example Bug 282558 - sized image vanishes on browser resize.
    But I can't find any solution - and this bug is described in 2005!

    I was wrong, it was a problem with the svg format. I tried several other formats, each doing its own problems. I tried cleaning the svg with conversion tools code and finally manually with a Publisher - nothing works. GIF and jpg of other problems, so finally I have found a converter of images to http://www.files-conversion.com/, which produces an acceptable png format.

    I think that the rendering of images needs to be improved.

Maybe you are looking for