Quick background image question

I think this is a simple question, but maybe it's not.
Basically I want an image to behave like the background images on
Prada.com. It scales based upon
width and crops the height. It seems to be anchored to the
top-right corner, unless you get fairly narrow then it isn't
anchored anymore, and it stops scaling the image. I have two large
displays and no matter how wide I stretch my window it just keeps
scaling the image. How would I go about doing this?

"rileyflorence" <[email protected]> wrote in
message
news:gf27fd$b22$[email protected]..
>I think this is a simple question, but maybe it's not.
Basically I want an
> image to behave like the background images on
http://www.prada.com. It
> scales
> based upon width and crops the height. It seems to be
anchored to the
> top-right
> corner, unless you get fairly narrow then it isn't
anchored anymore, and
> it
> stops scaling the image. I have two large displays and
no matter how wide
> I
> stretch my window it just keeps scaling the image. How
would I go about
> doing
> this?
Look for scale9 in the help.
HTH;
Amy

Similar Messages

  • Background image question

    Hi,
    I am trying to spread a gif image to cover the entire background of my page but the only options I see in page options is "no repeat" which only gives me one image in the top left corner, or else repeat which tiles the image. I think I'm missing some crucial step (or else some crucial part of my brain!)
    Thanks,
    Amanda

    There are other ways to position a background image - see the following as a reference:
    http://reference.sitepoint.com/css/background-position
    However, what you are trying to do isn't going to work the way you want it to.  Even at that size,the image files size is quite large.  Unless, the image is a repeating one, there is no way to determine the size of the window of the person viewing your page... so how do you determine what size to make the image.  The only reliable way is to make it repeat horizonally or vertically or all across the background.
    You could have a fairly large image sitting in the middle of the window and have it fade out on each side of the image, into a complimentary colour, so that smaller window sizes will see mostly image, larger browser windows will see the image centered, but blended into the colour of choice on the external edges.
    Maybe if you posted up an example of what you are trying to do, people may be be able to come up with an alternative.  However, using a full photo image isn't going to work as you expect I'm afraid.

  • 7941/61g background image question

    I have added a background image to our 7941/61g ip phones. The image looks good, but the button appearance divider lines are going accross the screen in front of the image. Is there any way to set up the display to remove the button separator lines while keeping the line labels?
    I had looked into using the idle url, but found that I had to use an external web server for this. Besides, I am not sure if the idle image would be over top of the button labels. If anyone knows if this is the case I would appreciate hearing about it.
    Thanks,
    Mark

    The issue is not that I can't get the custom background image on the phone. I have a custom background on the phone, but the line appearance deviders (The lines above and below each line label) extend completely across the display over top of the background image. For example, I have 6 buttons comfigured on a 7961G phone which causes 7 lines to cross all the way across the phone display. If I have 3 lines configured only 4 lines extend across the display.
    I am asking if there is any way to remove the lines deviding the phone-line labels that are going across the display over top of the custom background image.
    I was at a store the other day and saw that their 7961 phone had a background image and the line labels only had boxes around them. The line label deviders did not extend across the phone any farther than the line label text. This is what I would like to configure. I'm not sure if the phone was useing Callmanger or a SIP server though.

  • Blending with background image question

    Hello,
    I'm trying to recreate a similar graphic to this one, which was done in CorelDraw.
    I've played around with blending modes (normal, multiply etc...) and overprint on the pink crosses, but can't get them to look similar (or exactly the same, which is the goal).
    The closes I've gotten was putting one cross in overprint, and another one without overprint and set to 75% transparency. But that way the pink isn't as consistent as I'd like it to be.
    When using blending modes or overprint the black (the shirt on the left) completely downs out the pink. It should be visible (you can see a slight grey tint where the black is, doesn't show up in the pic well) but it shouldn't overpower the pink.
    What am I missing here?

    Blending modes and CMYK can produce unexpected and sometimes unpleasant results, so you might try all RGB color and an RGB Transparency Blend Space and let the conversion to CMYK happen on export or output. You'll just want to make sure you don't get too far out-of-gamut—if you turn on Separation Preview you'll see the conversion to CMYK
    So here my background image is RGB even though it looks like grayscale, the pink cross is an RGB color, and the blending mode is Hard Light:
    Or a pink with a darker value:

  • Background Image Question (CSS)

    I have the following CSS style in my head section:
    body { margin: 0px; padding: 0px; text-align: center;
    background: #fff
    url(/images/Home/TopGradBlack.jpg) 0 0 repeat-x; }
    ...where TopGradBlack.jpg is a black-white gradient measuring
    500 pixels
    high by 5 pixels wide. The image displays as it should, with
    the page
    appearing black at the top, grading into white below.
    But I want the background to consist of a black-white
    gradient on the
    left half of the page only, with a blue-white gradient on the
    right
    half. So I inserted a div (ID = Body2) inside the body and
    added another
    style, as follows:
    body { margin: 0px; padding: 0px; text-align: center;
    background: #fff
    url(/images/Home/TopGradBlack.jpg) 0 0 repeat-x; }
    #Body2 { margin: 0px; padding: 0px; text-align: center;
    background: #fff
    url(/images/Home/TopGradBlue.jpg) 50% 0 repeat-x; }
    But it doesn't work. Rather than displaying from the middle
    of the page
    rightward, TopGradBlue.jpg dispays clear across the page. If
    I change it
    to 0 50% repeat-x, then it works as it should, displaying
    across the
    middle of the page. But when I change it back to 50% 0
    repeat-x, it
    displays clear across the top of the page.
    What am I doing wrong?
    Thanks.

    I would NEVER use GIF compression with gradients.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "darrel" <[email protected]> wrote in message
    news:fu7s37$ja0$[email protected]..
    >> So, in other words, it can't be done?
    >
    > If your gradient is vertical (from top to bottom) just
    make the image very
    > wide...like 1000 pixels, and save it as a GIF (Gifs
    compress really well
    > with horizontal bands of the same color). Then do just
    as you're doing,
    > but omit the 'repeat'.
    >
    > Otherwise, I assume you're trying to create two columns?
    Perhaps the
    > solution is to make the gradient a background of the
    column wrapper DIV
    > isntead of making it a standalone DIV just for the
    image.
    >
    >> similar things before. Also, the percent locator
    works on vertical
    >> alignment, so I assumed it would horizontally, too.
    >
    > It 'worked' on vertical because you weren't repeating it
    vertically.
    >
    > -Darrel
    >

  • Quick dumb image question

    I have a datagrid I want to display an image in. I got the
    image component created and in there. All works great, except the
    image are not scaling to the width and height I want. I am getting
    a 300px by (maybe) 10px image. How can I control the width, but let
    the height scale with it?
    <mx:Image source="/assets/property/{data.imageName}"
    verticalAlign="middle" width="300" horizontalAlign="left"
    scaleContent="false" maintainAspectRatio="true"/>

    "projectproofing" <[email protected]> wrote
    in message
    news:g8bq1g$pbq$[email protected]..
    >I have a datagrid I want to display an image in. I got
    the image component
    > created and in there. All works great, except the image
    are not scaling to
    > the
    > width and height I want. I am getting a 300px by (maybe)
    10px image. How
    > can I
    > control the width, but let the height scale with it?
    >
    > <mx:Image source="/assets/property/{data.imageName}"
    > verticalAlign="middle"
    > width="300" horizontalAlign="left" scaleContent="false"
    > maintainAspectRatio="true"/>
    have you tried setting variableRowHeight on the dg to true?

  • The firefox theme(Lava V1-purple) I installed does not show permanently its background image because it quickly disappears when I click a new tab.. how can i fix this???

    When i click a new tab button the background image appears but quickly disappears... I know that this shouldn't happen but it always happen no matter what i try... Can anyone help me??? Please??? I want my background, that is provided by the theme, to stay pemanently when i click the new tab button because the white background for a new tab is totally not my style..

    If you go to [www.zigboom.com ZigBoom] there is a customization tab that will explain how to set your about:blank (New Tab) background image using the Firefox Add-On Stylish. Hope this helps.

  • Can I resize a Quick Selected image so it fits when I cut and paste it on a different background.

    Can I resize a Quick Selected image so it fits when I cut and paste it on a new background? I am trying to take a photo of someone and place it on a different background. The Quick Selected image is too big when I paste it on the background. You can only see a small portion of the persons head.

    Open the photo, then go to Image>resize>image size. Read what the resolution is in px/in.
    Get out of this screen. Then use one of the selection tools to select the person, go to Edit>copy to put it on the clipboard
    Now, go to File>new>blank file. Enter width & height, and the same resolution value.
    Go to Edit>paste. The person will be on a separate layer. Use the move tool to position, and, to resize with the corner handles, if necessary
    Note: For printing, it is desirable to have the resolution in the 240-300px/in range. For web work, 72 px/in is ok

  • Repeating Background Image Download Question

    When you use a repeating background image does the browser
    only download it once and then repeat it on their computer?
    I wanted to use a gradient background image so I figure to
    cut down the dowload size I'd just take a 1 pixel wide slice and
    repeat it, does that work?

    It works perfectly, I use Photoshop to make gradients and
    then insert the psd onto a page, where you get a conversion dialog,
    i select 100 for the jpeg quality and uncheck the sharpen color
    edges checkbox, you can use gifs if you want, then in your
    stylesheet use background-repeat: repeat:x;
    or y if you want to have a right to left gradient.
    Look at this site i am working on, it uses alot of PS
    gradients, all with repeat-x
    http://plcstrings.com/

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

    Basically what it says in the title. I've come very close in achieving this but something just doesn't tie up in the html and css code...
    First of all, I'm using IE8 and the latest version of Firefox to test this.
    I used 2 sources of information for getting this done: 1) http://css-tricks.com/perfect-full-page-background-image/ and 2) http://stackoverflow.com/questions/8958697/css3-background-size-cover-doesnt-make-image-co ver-vertically
    In Case 1 the example on the page called CSS-Only Technique #1 gives code that works almost perfectly for me, except that obviously I need a background image, however the CSS provided there is clearly just for an image dropped in the body of a page with no regard for other content that may already be there. The html code that I put on the page is simply <img class="bg" src="../images/background_image.jpg">
    Obviously I used the CSS code provided in the example, minus the last bit which is "@media screen" etc etc, which seems irrelevant to me. Obviously substituting values to suit the image on my page.
    So what happened is that it almost worked as intended in both the browsers (which means the image filled both browsers width-wise as intended and also remained fixed when I zoomed in or out in each case) except that the image went over the top of the current content that I had there already precisely because it's not a background in this "technique". (A curious side-note is that the image didn't push down the content, as I'd have expected in normal circumstances, but went right over the top of it so it hid it (like z-index).
    One thing that does bother me about this "technique" is that if you click on View Demo just below the code provided you will see on the working example page (forest background) the image clearly works as a background and the content sits happily on top! So I don't know whether the person providing the example was trying to mislead people or what! Or he got lazy and showed a different page that didn't use the exact code he provided. No matter.
    In any case this leaves me with the job only half finished, as I still need a background image that works like the 'normal image' code provided.
    On to Case 2 and on this page the first example provided gives the CSS for the background image - namely the code within html {...} part and also shows the same 'normal image' code as given in Case 1. In this case however, although the person provided a suggestion, the css and html doesn't really tie up properly plus some of the css and html seems a bit redundant. So this time when I used the 'html portion' of the CSS code (i.e. just the bit that was most relevant) I got two different behaviours in each browser and neither of which was quite what I'm looking for. In IE8 initially the page looks fine (background fills the page and content is on top) however when I zoom in or out the background also zooms in or out accordingly so is NOT fixed. In Firefox the background image DOES stay fixed, however because the image originally is not the whole height of the browser I'm guessing the code stretches it downwards (while keeping proportions - so the image essentially enlarges) to fill all of it. The quick way to get around it is to probably add some white space to the bottom of the image just to give it enough height that it doesn't stretch/resize automatically. But it would be nice to find out anyway how to get around this in the code. Overall I would say that the result in Firefox comes closest to the desired solution but of course it doesn't help matters with IE8.
    Apologies for the lengthy description but that should at least provide plenty info for anybody that might have a possible solution for me. Essentially what would be great is if somebody could advise me how to take the code from Case 1 and apply it to a 'background' piece of coding like the type that's contained within html {...} in Case 2. Like I said, it's so nearly there but I just can't make it work atm after trying to combine the various bits of code this way and that... Alternatively, if somebody has another html-css version that works nicely for achieving this then please by all means let me know! Thanks v much in advance!

    This works in modern CSS3 supporting browsers.  But not pre-IE9.
    http://alt-web.com/TEST/Resizable-BG.shtml
    Nancy O.

  • How can I get a parallax effect with Hub Control or change the background image scroll rate?

    Like the title says, I'm trying to get more of a parallax effect with a Hub Control in Windows Phone. In my current hub app, the picture has to be as wide as the entire hub, and it scrolls through the picture quickly. I'd like a way to make the background
    image scroll slower than the content on top of is.
    I've looked everywhere in the API docs, but I can't find anything saying how to do this. :(

    Hi PTK7,
    Yes, currently there is no documentation for this effect, however we can manually control the image scroll speed:
    http://stackoverflow.com/questions/10589192/windows-8-gridview-parallax-background-image
    Also I found a sample from code center:
    https://code.msdn.microsoft.com/windowsapps/ParallaxBackground-A-Metro-f929e558, take a look to see if these helps.
    --James
    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click
    HERE to participate the survey.

  • Very large responsive background images

    Just a quick question with these - for example the page here:
    http://www.destinationsshow.com/
    Not so much the CSS, but the knack to get such a large image that isn't too big in terms of file size, but still retains pretty good quality when very large?
    Also, I noticed on that example the original image is actually made up of two copies of the image with one mirrored vertically.
    You can see what I mean here:
    http://www.destinationsshow.com/images/splash_2014_bg.jpg
    Is that significant?
    Thanks for any pointers.

    Your example uses two different background images
    The mobile one is 18 KB
    420px × 667px.
    The desktop one is much bigger, 198 KB
    2,000px × 2,666px
    In my example below,  140 KB
    900px × 675px.
    http://alt-web.com/TEST/Resizable-BG.shtml
    Nancy O.

  • Keep background image same when creating new workspace

    Hi and thanks in advance for any input,
    Up until I plugged in a mini-display port to HDMI connection/dongle I would have the same background when I created a new workspace (OSX 10.7 Lion).
    Now, when I create a new workspace, the background set's itself to the first picture in a set folder with a default option of rotating the background image after a set period of time.
    My question is this: how do I get back to the use case that I am familiar with, where a new workspace has the same background image as the original 'Desktop 1' background?
    Thanks for looking,
    Jordan from CO

    Hey Richard,
    What are you Desktop properties set to?
    This is an interesting question. My initial (Desktop 1) properties are as follows:
    // Properties are set to keep the same background image
    However, when I add a new Space, to create Desktop 2, my desktop properties default to:
    // Properties of 'New Desktop' (Space) default to Change picture every 10 minutes.
    // When I am connected to an external display, the background image of Bonaroo shown in the screen shot becomes the new default; what is odd is that when the external display is not plugged in, another background becomes the default. Odd.
    So, replying to your comment made me think of something which ended up being the answer that I have been looking for:
    •Why not duplicate the background and place it in its own folder? This way, there would be no other images for it to default to and to change the properties away from, as the folder has not changed.
    Indeed a workaround, but the answer to my problems:
    One more thing to address:
    Even if you don't have random backgrounds set, I would think it a good design idea to make them random.  Otherwise users could easily become confused about which desktop they are looking at.
    My rebuttal to your design philosophy is that I love the consistency a single background presents. Think of iOS: one background, multiple pages. Users look at the content presented on the page. I regularly use the four finger gesture to enter the 'Exposé' feature of OSX Lion, and this gives me further indication of which desktops arrangement.
    I have read other reviews stating that the feature you noted is a great idea, so you are not alone (to have multiple desktop backgrounds for color coding what workspace/desktop/space you are in). My experience was somewhat jarring, however, as I was used to a specific use case of a consistent background; thus I have been posting in an effort to find a solution to my problem. Again, thank you for your insights; you are the one that lead me to a solution, afterall.
    // Separate note: expose will rearrange your windows/spaces/workspaces/desktops when you utilize command+tab. This design feature has a distinct iOS feel; as in iOS, your spaces and apps are dynamically rearranged based on the order or applications used.
    // Here is a quick photo example illustrating the point:
    // (I would have taken a screen shot of the command-tab interface but I cannot take a screen shot while holding down command; I use command-shift-3 for a full screen shot)
    1) Apps open in order (for this purpose I am sticking to one application per space and am including two fullscreen apps ): Finder, Safari, System Preferences, Mail
    // If I command+tab over to the full screen Mail app, my spaces are now rearranged as follows:
    // So now, to further illustrate the point, I can get 'Desktop 2' to be next to Desktop 1 by command-tabbing from Finder [Desktop 1] to System Preferences [Desktop2]; when I enter expose, the spaces are again rearranged to this:
    // This is similar to iOS' multitasking where a users multitasking list is dynamically rearranged based on the app that was used last in order to allow the user to gesture to the last app with ease.
    Message was edited by: jordoapp

  • Background image to fill the whole screen

    Hi everybody
    Please assist,
    1st question : I want to add the background image that fit the whole screen. I have tried to put image background however it leaves white spaces on the edges and another thing is that after adding the background image when I add content in the tables the background image start to repeat.
    This is the website example I want to achieve : www.inesjaksic.com , www.grupa-desperado.com
    www.street-heroes.com
    2nd question : How to add the scroll bar on the text content, so when you scroll only the text moves.
    Website example : http://www.kls.com/page.php?p=about/biography/index
    Thank you in advance for your help.
    Kind regards
    Vusi
     

    #1 Background images are static.  They don't resize to fill the browser viewport without a lot of additional tricks which may or may not work in all browsers.   Moreover images that resize quickly become distorted.   For best all around results, build your page to a fixed-width target audience (990px is usually fine for most users).  Use a seamless background tile or gradient slice and repeat it vertically (repeat-y), horizontally (repeat-x) or both ways (repeat).
    #2 Use CSS overflow and height property.
    #divName {
    height: 400px;
    overflow: scroll;
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • Washed out background image on Treo Pro

    Hi:
    When I set my background image on my today screen (check the box in settings, browse to image - use 320x320 resolution) I get a "washed out" version of the image regardless of its original color, tone or intensity. Images from the preinstalled themes are fine - vibrant and clear - but the user set images are very light (almost like a 50 percent transparency in Photoshop for example). I have tried both .jpg format and .png. Backlight settings do not cure this either.
    Any ideas?
    Thanks.
    Post relates to: Treo Pro T850 (Bell)
    This question was solved.
    View Solution.

    Hi Again:
    Upon further investigation, I have discovered that the options for setting background and transparency levels is found through the pictures and videos explorer not the file explorer.
    As suggested I have set the transparency to 0 and the image (Crab Nebula through the Hubble space telescope) is as bright and vibrant as it should be.
    Thanks again for the direction - it's much appreciated.
    Post relates to: Treo Pro T850 (Bell)

Maybe you are looking for