Background sizing

I create a page for the css zen garden, then it means that I am not aloud to touch the html code provided for me. I designed a 4000px wide background and high 12000px in illustrator, but when I put it in my background using the page properties in Dreamweaver it's only coming on 1100px wide. Why is this?

I think PZ is in place with regard to the size of your image.  It's a big powerful image and not something that my desktop display would be able to handle.

I have some code CSS Zen Garden mingled several years ago.  You have a lot of latitude in your CSS but as you say no control over HTML content.   If you have Photoshop, you can resize your image to something much less heavy bandwidth which is more suited for the web - say 1 000 pixels wide.

Use CSS background-size to the BG image scale to fill your display window.

{body

background: url ("img_flwr.jpg") non-repetition Center set.

background-size: cover;

}

Nancy O.

Tags: Dreamweaver

Similar Questions

  • Master slide background of sizing in projects of nature responsive

    Hello

    New to Captivate 9 and despite hours searching I can't resolve these issues with a responsive project:

    -J' inserted a background image (16:9) for the master slide, but it leaves spaces upstairs and downstairs. What size or proportion should be the background image?

    -L' background image includes a logo which is piled up in the mobile portrait and portrait of tablet - y at - it another way to prevent distortion of logo?

    Appreciate help or the pearls of wisdom.

    Graeme

    For your first question: it depends on the resolution, you chose for the project in primary mode: If this is a ratio of 4:3, make sure you change the image to this ratio. Best practice is to give exactly the size (width and height in pixels) which is necessary for the primary display. You can edit images in Captivate (also cropping).

    Regarding the logo: it would be better to insert separately as an image. Don't forget to set the width to a % and the height to Auto (Position properties), which will keep the fixed width/height ratio. For logos, you could also choose for a fixed size in the views of breakpoint, or give a minimum size to keep visible even in very low browser resolutions.

  • Action/command for adding background for different sized png files

    Hello

    I run a small business and try to add funds to our product images. All images are PNG bottomless.


    Each product is available in 3 colors, and each color has three different size images, it is associated with (for the previews on the Web site).


    The image file is implemented as if:

    > IMAGES

    > PRODUCT_01

    >200 x 200.png Blue_

    >200 x 200.png Green_

    >200 x 200.png Sylvie

    > Blue_700 x 700.png

    > Green_700 x 700.png

    > Red_700x700.png

    > Blue_1500x1500.png

    > Green_1500x1500.png

    > Red_1500x1500.png

    > PRODUCT_02

    > Blue_200x200.png

    > Green_200x200.png

    ... etc.

    So basically I'm looking for action and a batch command that will add the same background for each of them. Our selected background is 1500 x 1500, but I want that he did the same thing for the 200 x 200 as it does for the 1500 x 1500 (if this is necessary).


    I don't want to remove the products from their current records, we have more than 2,000 products and it's a bit of a headache. Ideally the action would add the background and overwrite the current PNG or add a JPG file in the same folder.


    I tried this a number of different ways, but I'm really not good at creating actions and starting to pull my hair. Any suggestion would be massively appreciated.


    Thanks in advance.

    Hmm, if I understand correctly, you can do this with the following steps:

    1. Open a picture
    2. Start the action recording
    3. Convert the background into a new layer
    4. Add new blank layer (Ctrl + alt + SHIFT + n)
    5. CTRL + A
    6. Fill the white layer with the desired color (SHIFT + F5)
    7. CTRL + D
    8. Use ctrl + [keyboard shortcut to move the layer of color to the lowest position
    9. Flatten image
    10. CTRL + SHIFT + S and select JPEG.
    11. The JPEG settings
    12. CTRL + W to close
    13. Stop the recording of actions

    Now go to file > scripts > lots, configured to perform the action that you created. You'll also need to save in the same folder as the original and substitute action save as order (, I know that sounds against intuitive). Now select the folder you want to it is running on and start the process.

    I hope this helps!

  • Wallpaper - images show too big to set as background

    original title: substantive issue of screen

    Hello

    I had my computer for more than 3 years and no problems until recently.  I wanted to change the image for my wallpaper and it is too big; in fact, any image I choose it turns out to be too big for my office.  I have not had this problem before.  I resized the image and now it does not show the full picture on the desktop.  It displays the resized photo but it seems that there is a peak of 4 x 6 on the screen, the background is black.  Any suggestions on how I can fix this?

    Janice Smith Neve

    Hello

    I had my computer for more than 3 years and no problems until recently.  I wanted to change the image for my wallpaper and it is too big; in fact, any image I choose it turns out to be too big for my office.  I have not had this problem before.  I resized the image and now it does not show the full picture on the desktop.  It displays the resized photo but it seems that there is a peak of 4 x 6 on the screen, the background is black.  Any suggestions on how I can fix this?

    Janice Smith Neve

    Use your image over-sized as backdrop, then...

    Right-click on an open sp [ace of desktop > Personalize > wallpaper ultimately > downstairs, under the Position of the image, click on the pointer, and then select FILL > click on save changes when finished.]

  • The segmented control background

    I have a segmented control of 3 segments, with fairly long titles in each. Since segmented control does not allow the formatting of the title, I decided to try to work around this deficiency and insert a background image of control (using the DispositionAbsolue with Imageview container for the background and SegmentedControl) containing the titles with a smaller font and let control titles in white. It works, kind of:

    When I do this, the control segmented for some reason any decides to go beyond the width of the container and it clips to the right. Expand the control tabs, and only half of the last tab is displayed.

    If I disable DispositionAbsolue}, all the sizing is correct, except, of course, the background is stacked on the segmented control. Here is my code:

                    Container {
                        layout: AbsoluteLayout {
    
                        }
                        preferredWidth: 568.0
                        maxWidth: 568.0
                        ImageView {
                            imageSource: "asset:///images/SegCtrlBackground.png"
                            preferredWidth: 568.0
                            maxWidth: 568.0
    
                        }
                        SegmentedControl {
                            id: segmented
                            Option {
                                id: option1
                                text: ""
                                value: "1"
                                selected: true
                            }
                            Option {
                                id: option2
                                text: ""
                                value: "2"
                            }
                            Option {
                                id: option3
                                text: ""
                                value: "3"
                            }
                            onSelectedIndexChanged: {
    
                            }
                            preferredWidth: 568.0
                            maxWidth: 568.0
                        }
                    }
    

    I tried to force the width of 568 on a container, as well as two controls that it contains, but not luck. Why is this happening?

    Thank you. I've known for a clean and simple solution that works perfectly: I wrapped the control segmented into its own container on which I forced the width. Here is the code:

                    Container {
                        layout: AbsoluteLayout {
                        }
                        ImageView {
                            imageSource: "asset:///images/SegCtrlBackground.png"
                        }
                        Container {
                            preferredWidth: 568.0
                            SegmentedControl {
                                Option {
                                }
                                Option {
                                }
                                Option {
                                }
                                onSelectedIndexChanged: {
                                }
                            }
                        }
                    }
    

    Here, the SegCtrlBackground.png is 568 pixels wide, containing a rectangle control background slightly more small rounded corners that fits perfectly behind the segmented control. In addition, we could insert a picture of 9-slice and make scalable to different formats, but in this case I didn't need.

  • Resolution problem Image background

    My dear friend I need to use a background image on my site and this backdrop to re scale to any resolution of the Board of the screen

    in the horizontal width of 100%. My design have trouble when the screen resolution changes plus 1680 x 1050 px.

    I don't know if you are currently using an image that is stretched to the width of the page, but if you are, try to use a fill of browser instead.

    To add a background image to a web page:

    1. Choose Edition > deselect everything, to make sure that nothing is selected on the page.
    2. Click the browser link fill in the Panel.
    3. Click Add image and go to the background image on your system and select the image, and then click Open.
    4. With the image added you can now set some additional parameters to control how the image fits into the browser window and moves with content.
      Change the setting to implementation at the level of adjustment if the full image must be visible at all times, the image is sized proportionally within the browser window. To fill the browser window complete with a picture of background at any time, change the setting of connection across filling, not part of the image may be hidden with this setting.
      To control where the image is positioned in the filling of the browser area, select the preferred Position reference point (the example below uses high in the Center, so the image is sized from there).
      Deselect scroll if you want as the background image to be always visible, even when the viewer of the page scrolls down to view the other down content on the page.

    I hope this helps.

    CARI

  • Help: How do crop (for printing PDF) a background document lost?

    I have a document that is sized for background printing lost. I also want to make prints PDF of this document, but if I simply print, then everything will be idle a bit. Is there a non-destructive way to "reframe" the document to the paper size?

    To register a PDF copy and uncheck the box in the section marks and bleeds, marks printer, uncheck the box use Document bleed.

    Unless I don't understand...

    Mike

  • Can I make transparent background of movieclip?

    On the stage, I have a movieclip with an animation inside, at the moment that I gave to his background of the same color of the scene to simulate transparency.

    Now, I've added some decorations for the lower left corner of the stage and this movieclip throws a little on the decoration showing that indeed the movieclip is not transparent because it covers a part of the decoration.

    Is there a way to make the background movieclip really transparent?
    I checked where I apply colors to elements, but it is not a 'transparent' option, or at least I have not seen.

    I use Flash CS5 and AS3.

    I can't answer why, but maybe it's the background defines some of the sizing for parts and placement settings.  I can suggest you try something to keep the invisible background, however.  There are two ways you could do that (at least).

    (1) If you want to see the background while editing the file, then convert it to a movieclip (if she isn't already one), assign it an instance name (say you name it 'bg') and set its alpha property must be 0 (bg, alpha = 0;   (this is AS3)).

    (2) If you need to see when editing, then you can simply select the nackground and change its fill color alpha to 0 via the color palette.

  • Make a background image of a DIV elastic?

    I try to get the background image of one div to resize when the browser text display rises or falls.

    There's a big announcement at http://jontangerine.com/silo/css/elastic-layout/ which gives many details on the layouts of elastic and addresses resizing of the images on the page to see his example in http://jontangerine.com/silo/css/pixels-to-ems/

    However, it has not worked for me when I tried to apply it to the background image.  Anyone know the code for this?

    Thank you.

    egigharbor wrote:

    Zoom the page without problem - it is the text based on the browser does not accept my image to enlarge proportionally sizing.  I know that there is a way because I tried on http://jontangerine.com/silo/css/pixels-to-ems/ and its images increase with the text.

    For some reason I struggled to make it work in my banner.

    OK... you're asking for trouble and opening a Pandora's box... but what you can do is insert the image and remove the width and height attributes. To resize the image as page zoom in and out... willingness to work in some browsers, not all (eg. works in FF, but not IE6). Be aware though that, as the image magifies, rasterization will be put in... zoom isn't so bad... like compresses just of the image.

  • chart sizing problem with the pointer tool

    I am the tutorial in the Adobe classroom in a book, and I stuck on such a simple thing. The pointer tool is supposed to turn from black to the Palm when I chose a small image on a page (making sure not to select the background image too of course). I chose this logo, got the rectangle encompassing blue and the tutorial says "when the l' icone icon pointer completed exchange for hollow, drag the handle upward and to the left to reduce the size of the image.

    But that won't happen. Why?

    Thank you

    Jude

    Hmm. It's weird. Did you accidentally locked the object or layer? I do sometimes. There are two boxes on the left side of the object in the layers panel. Toggles the visibility of the extreme left (has an "eye" icon) and the other lock the layer (has a lock icon when it is locked). I don't think you could get a blue contour on a locked object or layer, however.

    I did some experimenting, and I noticed that CS3 won't give me the open on an ellipse, arrow although it does on a rectangle. I think it's rather strange, because he always has blue outlines. I have to use the scale tool.

    There are other ways to transform an object.

    The selection tool in the toolbar is the scale. Select an object, and then select the tool of the scale for the sizing of the corners and sides handles, but also an indicator of rotation. You can also get these handles, if you select an object, and then use it

    Edit > transform > free Transform

    menu item. You can also get each transformation separately. I love the digital transformation, myself, that I can specify exactly what change I want a picture or object.

    Finally... you can share the document that you are using? Maybe we can see something. Try using the command insert an Image (camera, just left of the smiley face icon) as attachments can sometimes take a while to be approved.

  • wrong size paper problem Flash background

    Hello
    I have a flash file that a client has sent to me and needs to be changed. (This is a header of site in flash with links to the pages of the site and a logo above. I deleted the logo above) one of the problems is the size. I want half of the size of the document, given that a large number of
    white space in half top where I add a static logo for a
    Web page (with these flash below site links). When I open Flash CS4 and click Edit > Document..., I can change
    the total height but white background changes, but all of the
    Flash animation is now the document.

    How can I change the position of the rest of the document or of the
    background of the document to fit under my film so that the entire document appears as a good flash animation size?

    Another problem I'm having is changing links in the template for the page names I use on the site. I can't seem to even find the buttons to make changes. What I'm doing to see them I can't 'see' when scrolling the line of time, but when I export them or preview the film that all the elements are there. I am quite stuck, so any help would me much appreciated.

    Thank you

    Lenny

    To the question of sizing, you have to physically move all the content.  You can do this by selecting the objects by using the up arrow key or by dragging with the mouse.  You can select the items by using the Selection tool over them on the scene or the frames of the timeline.  If there are several keyframes on a layer, you can only move one at a time, in which case it is preferable to use the approach of arrow so you can keep the County (shift: up arrow: taking larger steps).  If you cannot select the elements, it is likely that the layers are locked - you can unlock (symbols of the lock next to the layer name).

    For the buttons, can their layer is invisible, which you can make visible (the symbols of the eye next to the layer name), or they are added dynamically to the movie using the code.  In all cases, the links for them would have to code somewhere, then you'll want to check the timeline frames that have actionscript in them.

    If the buttons are added dynamically, they probably also have code indicating their position there that you will need to adjust to the new height.

  • Background app colors are more uniform

    Since the upgrade of the Sierra, web pages Chrome and the code editor backgrounds Atom are messy. For example, in the atom, it seems that I've highlighted throughout the text, part of the background is dark and some of it is lighter. In Chrome, bluish grey background of Facebook will be uniform and then become clearer on the sides abruptly. This sudden change happens on other colors, which actually look as if I chose the parts of the page with my cursor. Basically the uniform color of the origins on some Web pages or applications (Atom and Chrome) are more uniform.

    This substantive change only happens when I plug my HDMI cable on an external monitor. If I'm working on all of my macbook pro retina screen, everything seems fine. If I plug in my HDMI cable to an external monitor, the sets become non-uniform, even on the macbook pro (when mirroring) of the screen. I used the HDMI cable and the monitor with another computer and the problem does not exist, so I think it has something to do with macOS Sierra. Strangely enough, this problem only occurs with Atom and Chrome. Safari, for example, is absolutely perfect.

    I've included screenshots to show what I mean.

    Hi tedmcdo,

    Thanks for the upgrade to Mac OS Sierra! It seems like when you connect your external monitor to your Mac via HDMI, the Mac knows uniform color schemes. If this only happens when the external monitor is connected, you can try the reset NVRAM while it is disconnected from your Mac.

    What is NVRAM?

    A small amount of memory on your computer called "non-volatile random - access memory" or NVRAM, stores certain settings in a location that OS X can access quickly. Settings that are stored in NVRAM are dependent on the type of Mac you use and the types of devices on it.

    Information stored in the NVRAM may include:

    • The speaker volume
    • Screen resolution
    • Selection of boot drive
    • These latest panic the kernel, if applicable

    If you encounter problems with these features, you may need to reset the NVRAM on your computer. For example, if your Mac starts up from a bootdisk other than that specified in startup disk preferences, or a question mark icon appears briefly at the start of your Mac.

    How to reset the NVRAM on your Mac.

    After resetting the NVRAM, please connect the screen and check if the problem is resolved. Alternatively, you can try to boot your Mac in safe mode.

    What is safe mode?

    Safe mode (sometimes called secure boot) is a way to start up your Mac so that it performs certain checks and prevents certain software from loading automatically or opening. From your Mac in safe mode does the following:

    • Check your startup disk and attempts to fix problems if necessary directory
    • Loads needed kernel extensions only
    • Prevents elements start and the login items open automatically
    • Disables the user installed fonts
    • Delete font caches, hiding the kernel and other files of the system cache

    Together, these changes can help resolve or isolate issues related to your startup disk.

    Try safe mode if your Mac does not end commissioning

    Please use the Apple Support communities to post your question. These procedures should have your Mac showing its vibrant colors on the Retina display as expected. Good day.

  • Apple Watch (1st version) flashing background image

    I have a first generation of Apple Watch.  I recently did the upgrade to the new operating system for watches.  I have a picture as my background.  Since the update, when I turn my wrist to me, to "turn on" the face of the watch, it a little 'flash' thing she had ever done before.  It's a quick way, irruption of the image of the picture on my watch that then remains on the image.  Has anyone else seen/noticed does this?

    Hello

    The following steps may help:

  • Activity monitor close unexpectedly when running in the background on the left

    Recently upgraded to Mac OS Sierra and Activity Monitor to close unexpectedly when running back plan left (do not smoke and open the activity monitor window) to a blank desktop when you use an application in another office. Clean install I tried but the activity monitor would still be down at random times when left running in the background to another empty office. Someone at - there experience this problem? For most browsing on the web using Safari on another desktop computer when Activity Monitor quit unexpectedly.

    Activity monitor also using a lot of energy since the upgrade?

    Any help would be appreciated. Thank you.

    Model: MacBook Pro (retina, 13 inches, early 2015)

    OS: macOS Sierra: 10.12 (installed via the upgrade, own installed after this problem).

    Do not forget that you are using the activity monitor version which was installed when you upgraded to Sierra. Activity monitor located in the your Mac utilities folder.

    If you have moved a previous version to a different location, it will not work.

    If you are using the correct version, post crash report. Error reports lies in the application of the Console under System reports or reports from usersand end in the suffix .crash. If you choose to do so, omit or hide any information that you consider personal.

  • What is the background refresh

    Looking for an explanation for background refresh in settings. When it is necessary and how the effect of the duration of the battery on my iPad or phone?

    Hello. Check the battery saving tips for Battery Saving Tips for your beloved iPhone

    Background app refresh means that your applications are updated constantly and automatically even if you don't use them. Here you can find more information about multitasking on your iPhone, iPad and iPod touch - Apple Support

Maybe you are looking for