How can I do a Background image like this (example inside)

Check this out:
Click Here
Notice if you view the background image by itself, its much bigger than what is appearing on the website in the browser.  Is it set to automatically adjust to your monitor size?  How can I achieve this through CSS?
Also, how can I setup a transparent background (like in the middle of the page?)
Thanks

"Is it set to automatically adjust to your monitor size?  How can I achieve this through CSS?"
It's an illusion.  The body background image is defined with a fixed position, so the image is actually floating off to the left when viewport width is decreased.  Another example of this can be seen here along with the CSS code used to create it.
http://alt-web.com/DEMOS/fixed-background.shtml. 
Nancy O.
Alt-Web Design & Publishing
Web | Graphics |  Print | Media Specialists
www.alt-web.com/
HTML Validator -  http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
Tutorials - http://w3schools.com/

Similar Messages

  • How can I stretch a background image in label?

    Hi,All
    How can I stretch a background image in a label?
    public void start(final Stage primaryStage) {
                 final Label lbTest = new Label("My Test Label");
                 lbTest.setAlignment(Pos.CENTER);
                 lbTest.setTextAlignment(TextAlignment.CENTER);
                 lbTest.setStyle("-fx-background-color:red;-fx-background-repeat:stretch;-fx-background-position:center top;-fx-background-image:url(\"http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/BlueMarble-2001-2002.jpg/640px-BlueMarble-2001-2002.jpg\");");
                 final HBox hbox = new HBox();
                 hbox.setId("MyRootPane");
                 Button btnLeft=new Button("Left Button");
                 Button btnRight=new Button("Right Button");
                 hbox.getChildren().addAll(btnLeft,lbTest,btnRight);
                 final StackPane layout = new StackPane();
                 layout.getChildren().add(hbox);
                 Scene scene = new Scene(layout, 600, 320);
                 lbTest.prefWidthProperty().bind(scene.widthProperty());
                 lbTest.prefHeightProperty().bind(scene.heightProperty());
                 primaryStage.setScene(scene);
                 primaryStage.show();
        }this code doesn't work,if I deleted css -fx-background-repeat:stretch;the background image stretched but repeated,I want to let the background image stretched and no-repeated,it can be stretched with the resizing window automatically.

    Try -fx-background-size: stretch;

  • How Can I Speed Up My Video Like This? (Example Included)

    iMovie is currently optimizing my video so figured i'd ask this now rather than when i'm editing.
    I recorded video of myself getting a haircut and would like to speed the video up and add some music to it; similar to this video i found on youtube.
    How can I speed up the film like this and slow it down as done in this video?
    http://www.youtube.com/watch?v=-OmFShCpXSU

    Quite easy to do.
    Watch the tutorial here:
    http://www.apple.com/ilife/tutorials/#imovie-timing
    You can access these tutorials and ask questions from within iMovie Help.
    Regards,
    Z

  • How can I get the background image of my website to cycle on a timer?

    I'm afraid my experience with Javascript (Which I'm certain this will require) is fairly limited and I'm still quite new to Dreamweaver, so I'm posing this question to you guys.
    I'd like the background image of my website to change every five minutes or so, however I'm unsure of how to accomplish this. For those of you with Windows 7, you can set the background of your desktop to cycle through a folder of images every ten minutes or so. I'd like something similar for this website.
    Thanks in advance.

    Supersized can do this for you with very less need for code.
    http://www.buildinternet.com/project/supersized/ - Take a look at their demo. It's also a lightweight plug-in and it has a lot of great effects you could use. Also x-browser friendly.

  • How can you make a background image change to a faded state at a certain point in scroll?

    I'm referring to a technique I've seen used in Relevant Magazine's iPad app if anyone has used it. I understand having a shape behind text that has a feathered gradient and when you scroll the text the shape gradually fades out the background image. But this is not the effect I'm trying to acheive. On some of the articles in Relevant, the screen is a full image and as you scroll the type up, the entire background dims when you scroll to a certain spot.
    I've tried searching for hours, but I feel like I'm getting no where because I don't really know what to search for. I feel like it requires use of something other than what DPS is capable of. Hopefully this makes sense and I'd greatly appreciate any suggestions and help!
    Thanks!

    Try applying the feathered gradient to the scrollable content frame, not the background frame. It will appear to change the color of the background frame.

  • How can I have a background image for reference ?

    HI,
    I need to register align horizontally and vertically) about 100 images to the first. I don't want to stack or merge them. An ideal way to accomplish this would be to be able to set the first image as a background reference image for all images in the group. There would be left/right buttons so I could advance through the stack, a slider to adjust the visibility of the foreground image, and up/down & right/left arrows so I could move the upper image a pixel at a time in any direction. In this case I don't need to rotate the image, but this would also be something a person might want to control. Then I would move through the group of images, stopping on each one to align the image to the first. One at a time, or after I am done, it would save all the aligned images to a new filename and folder, without changing the transparency of the image or in any way using the background reference image. Without rotating the images, every pixel in the new image would be the same as in the original, except moved. I would start by resizing the canvas of all the images so they have a border area. This way I can move the image around and not lose any of it.
    Of course I could put the reference image in the background layer and the image to be adjusted above it on another layer. Then i can use the background as a reference by making the upper image somewhat transparent. Finially I could delete the background layer and save the image with just the adjusted layer. But this would be tedius with 100 images, even worse if there were 1000..
    Is there a reference background image capability in Photoshop CC ? Is there a better or different way to do this ? Or can Bridge do it ?

    When I first posted this I had selected Photoshop as the community. After it had posted I saw it had changed and again changed it back to Photoshop. it again reset it to Premier Pro. I don't know why. Also, I had selected Refrence image as a tag and that keeps dissappearing. Even worse, there are no replies. What's the deal ?

  • How can I put a background image in headers in PAGES

    It seems I cannot put a background image in headers. I want a background gradient to go behind the text. I have to place it on the "page" "behind" the header on every sheet instead. Other than creating a graphic that is both (bitmapped) text and image, what can I do? Or is there some way to create an object that has edittable text over the image. Thanks, Peter

    If you are referring to Pages app, it is easy:
    Open your document
    Go to Menu >> View >> Show Layout
    You will see headers, body and footers laid out with edges
    Click inside the header
    Open  your Media browser
    Drag your graphics (or photo) into the header
    Be sure to PRESS AND HOLD COMMAND (APPLE) KEY while you do this!!!
    If you don't pres the key, the picture will be pasted outside the header!
    I think the Command key press was what was screwing you up here...
    This applies to Numbers and iWeb as well, BTW

  • How can i insert a background image in a fluide grid DW CC

    I want a background image for a fluid grill website and cannot seem to find the "how to". Any help would be greatly appreciated.
    Regards
    Animal86

    It's the same as adding a background to any Layout.  Use CSS & the background property on your body selector.
    body {
    background: url(your_BG.jpg)
    Nancy O.

  • How can I export the same quality like this video ?

    I found this video and upload here :
    http://www.mediafire.com/?4uoygmlvfm5uccu
    HD 720p
    and the file size is very small : 3.87 MB with length : 38s but has very good quality.
    Does anyone know how to render like this ?

    I can only guess what you want exactly.
    To make the top menu item move left when the cursor overs above it tou could do something like:
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
       margin-left: -3em;
        width: 8em;
    I hope this helps.
    Ben

  • How can I implement a check constraint like this

    A column can have this values: first 3 letters can be �ing� �fig� �erd� then it can either have �1,2,4,5� and then 3 more numbers.
    Like this: ing1003 or fig2432 etc.
    I have tried this:
    columnName LIKE �[ing-fig-erd][1-2-4-5][0-9][0-9][0-9]�
    But it doesn�t work. I have been looking around and haven�t found anything that can help me with this.
    Anyone got any suggesting?
    Cheers
    envida

    CHECK(code LIKE '[ing,fig,erd,][1,2,3,4,5][0-9][0-9][0-9]'))This is a regular expression. Oracle database does not yet support regular expressoions (10g will). So what it is actually doing is apllying the whole string as a literal. Because there are no wild cards, any row where code literally does not equal '[ing,fig,erd,][1,2,3,4,5][0-9][0-9][0-9]' will fail i.e. all of them.
    If you really want to use regular expressions either have a look at the PL/SQL package OWA_PATTERN or consider importing the Java Regexp package and implementing some Java Stored Procedures. Alternatively you can could cook up something using translate or replace.
    Cheers, APC

  • How Can Make a Large Background Image For A Website (reduced file size)?

    Hi, I want to edit a large photo so that it fits the width of the browser (I'm using a responsive layout). The image needs to be a small file size so that it loads quick enough.... My question is are their any tricks or adjustments within Photoshop where I can reduce the file size of an image whilst maintaing large image size. I heard that adding noise can reduce the file size or something? Is there any other effects that do this?
    Thanks in advance!!!

    twenty_one wrote:
    JJMack wrote:
     If I were stuck in an area that only had low speed Internet connections I would not use the web as much as I do.
    Where do you get this stuff...?   About the only thing I do strictly for fun on the internet is this and a couple of other forums. Other than that it's strictly business and I really don't have a choice in the matter. So there I sit, patiently waiting, counting 0, 1, 1, 0, 0, 1, 1, 1....
    You making my point if all you have is slow Internet connection you use the web less. You only use it when you have a real need.  You do not use it for fun or streaming video you live with the reality of what you have and use it accordingly.
    In 2003 I took a long vacation to New Zealand and Oz land.  I carried my ThinkPad with its 15" IPS 1600x1200 px Display for Photoshop and storing my images. I also use for connecting to the Internet via modem for E-mail and banking not for fun.  These days you can carry a iPod in you shirt pocket and gab a cup of coffee at a local Starbucks a use a high speed wireless in access point they provide for their customers for free.  High speed in becomming the norm in all but rual areas.

  • How can I put a background image into the cell of a table using Dreamweaver CC.

    I want to place an image in a table cell and then be able to place editable HTML in the same cell on top of image. I also have Dreamweaver CS6. I can't get either one to do it using solution I found searching on web. Please help ASAP. What am I doing wrong. Example code would be great. Thanks!

    No tables required for any of this.  You simply need a 3-column starter page. 
    In DW, go to File > New > Blank page > HTML. 
    Select a 3-column layout from the 3rd panel.
    Hit Create button.
    Learn to use CSS floats, margins and padding to align elements.  DO NOT use positioning.
    Start with & bookmark these links for future reference:
    CSS Box Model
    http://css-tricks.com/all-about-floats/
    CSS Float
    Floatutorial: Step by step CSS float tutorial
    CSS Margin
    CSS Padding
    Nancy O.

  • How can dust get under the screen like this ?

    I have a large piece of dust under my screen about an inch up and an inch from either side of the screen.
    I use a cover on the rear of my phone, and have a zagg cover for the screen. How on earth can a speck get this far in ? I thought these were pretty much closed units.
    Is this something Apple would exchange for ?

    A forum search will reveal that several people have reported this and have gotten a replacement.
    You can make an appointment at the Genius Bar and they will let you know if they can give a replacement.

  • How can I make a smart form like this one ?

    hi
    according to my business requirements I need to create a PDF form which contains a table with variable number of rows (containing numbers) , so the user should be able to add or remove rows to the table as much as he needs to , and there should be a row showing the total at the bottom of that table.
    I'm absolutely sure that this is possible to be implemented in PDF using javascript but I need some help to do it.
    I saw a working example - the same concept I required.
    >> you could have a look here -
    http://www.windjack.com/PDFSamples/ListPrograming_Part1_XFAForm.pdf
    any idea how I can do so ?
    thank you.

    hi George
    thank you for helping.
    I thought about the same idea >> to add fields and hide them and then show them one by one upon to user reuest , but I think that will solve just a part of the problem regarding the functionality ,,, while the formatting issue won't be solved ,,, I mean look at the form I linked to ,,, the table borders and final appearance remains the same even after adding a new row.
    is it possible to do so if I used AcroForm and hide the fields ?
    and how will I get the total of those variable number of rows after user finished adding rows ?
    regarding the other thing you mentioned (pushing items down as new rows are added) ,,, I think I can avoid this by adding the table in a separate page ,,, because according to my business requirements ,,, rows that will be added won't exceed 30 maximum.
    thank you for your time.

  • How can I get a cool intro like this one on my videos using iTunes?

    http://www.youtube.com/watch?v=WBMD6ihVKTo

    hi George
    thank you for helping.
    I thought about the same idea >> to add fields and hide them and then show them one by one upon to user reuest , but I think that will solve just a part of the problem regarding the functionality ,,, while the formatting issue won't be solved ,,, I mean look at the form I linked to ,,, the table borders and final appearance remains the same even after adding a new row.
    is it possible to do so if I used AcroForm and hide the fields ?
    and how will I get the total of those variable number of rows after user finished adding rows ?
    regarding the other thing you mentioned (pushing items down as new rows are added) ,,, I think I can avoid this by adding the table in a separate page ,,, because according to my business requirements ,,, rows that will be added won't exceed 30 maximum.
    thank you for your time.

Maybe you are looking for