How to make the background image for a site

Hello.

First of all, thank you for reading this.

I intend using a gradient image as background on a new site of black on the sides gradiating to blue in the Middle I created in Photoshop. The site is designed for 1024 (955) and upward. How the background image would handle so that no matter what the resolution above 1024, the visitor sees the gradient correctly, which means that Blue will be always exactly in the center of the page and the image not horizontal mosaic? (I don't want to repeat from left to right when the resolution someone is really high)

I saw a couple of sites that use strong images that seem to stretch the background image according to the resolution, but were not able to understand the CSS code. In my case, I have a single image that has say 5 pixels high, how wide I need for the (reasonable) maximum resolution, and let repeat from top to bottom.

Thank you.

MFitz721

To do what you ask would require CSS3.  This is because that the CSS3 added support for multiple background images.  What you would do, is to set a gradient to the left and the other to the right with a background color that arise in a vacuum.    Basically use you the abbreviation of "substance" and separate the different environments with a comma ","  See this example ( http://www.css3.info/preview/multiple-backgrounds/ ).  I think it's possible the long way as well (for example: position of background, background image, etc.), but you would need to write the values and who is 1 and 2 in order when you do this.

Tags: Dreamweaver

Similar Questions

  • Cascades: How to set the background image for the menu drop down and etc...

    Hello

    Is there an easy way to set the background image for the menu drop down and etc, current support only black as a background?

    Thank you

    Tom.

    Welcome to the forums!

    This is currently not supported unfortunately.

    I encourage you to save a feature for this request:

    https://www.BlackBerry.com/JIRA/secure/dashboard.jspa

    See you soon!

    Martin

  • How to make the background image with dramatic style?

    Most of the images I see it is mix of pattern in the background which make it look alive. The model are lines and shiny effects. How do these lines

    oshop http://PSD.tutsplus.com/tutorials/Tutorials-Effects/Creating-a-Mac-type-background-in-phot.

    http://www.Tutorial9.NET/Photoshop/creating-the-Windows-Vista-lighting-effect/

    http://psdlearning.com/2008/06/luminescent-lines/#more-45

    Search for abstract Photoshop etc.

  • How can I change the background image for the lock screen?

    Hi, I just bought a new laptop and I got Windows 7 installed in the store, and I would like to change the background image for the lock screen.  When I went to activate my account, I found out that it has already been activated, but I can't find the settings-> settings more PC in the lower corner on the right.  Thank you!

    Lock screen?

    Are you referring to the login screen?

    Or wallpaper?

    Right-click on your desktop and select Personalize.

    Office link is at the bottom left and use a win-7 theme.

  • How to add the background image to the screen

    Hi all

    I want to add the background image to the main screen how can I do it.

    On the main screen, I used

    -a manager of HorizontalFieldManagerField to view the bitmapField (horizontally).

    -a manager of VerticalFieldManagerField to view the bitmapField (vertically).

    already images of display screen (bitmap field) with Horizontal and Vertical Manager, but I also want to display the background image for the screen, how can I reach this help me please.

    Concerning

    Adkins

    Thanks for all the response, I tried and sloved logic here how I did

     VerticalFieldManager mainVerticalManager = new VerticalFieldManager(Manager.NON_FOCUSABLE|Manager.NO_HORIZONTAL_SCROLL|Manager.NO_VERTICAL_SCROLL){
                protected void paintBackground(Graphics graphics)
             {  
    
             }
             protected void sublayout( int maxWidth, int maxHeight )
             {
    
             }
            };
    
    then i added other to manager on to this
    

    My problem is sloved thank you for the reply

  • How to change the background image in a model.

    I have Startboot Business Casual open in DW.  It has a brick background.  I want to replace it with a few trees and clouds.  I did a picture of decent size and I've replaced the image, bg.jpg in files, but nothing has changed.  Do I have to change the code?  And if so, how?  Or should I remove the background image for each page and then replace it with the new image?

    Did you do a refresh of the page? You are testing in a real browser?

    Nancy O.

  • What is the best way to remove a white background seamless photo with a photo of the white product in order to make the background transparent for the production of graphic art?

    engle catalog  July 31 201568295.jpgI'm making a picture of the product of a product of pale whitish color on a white background without sewing (quite complex detail).  I need to make the background transparent for the web and the production of catalogs, I've always used the pen tool to create a clipping path.  Is there an easier way?

    According to the image that you have to work with, you could try an initial with the Quick Selection tool and refine edges.  Save the new output layer with layer mask.

    http://photography.tutsplus.com/tutorials/quick-tip-using-refine-edge-for-improved-masking--photo-14682

    Nancy O.

  • How to change the background image of a newtab

    Hello

    I'm looking for a simple addon that will allow me to change the background image for my new tab page. I still want the empty bar url and the new tab to say "new tab". Just the simple ability to change the background image without changing anything else.

    Thanks in advance
    Niels

    Here's an add-on which may help! https://addons.Mozilla.org/en-us/Firefox/addon/customize-aboutnewtab/

  • How to set the background image on my request.

    Hi all

    I use jdev 11.1.2.4.0 version

    use case: I create mobile applications and using the skin by default 'mobileFusionFx '.

    so when I run application there show black screen as a background image on my application

    My question is how to change the background image.

    Thank you

    Manish

    Resources of the Application open-> descriptors-> ADF META - INF-> adfmf-config. XML

    Check the family skin it and use in the skin of skin-addition id attribute.

    With this way automatically all your pages will use the same background image.

    In addition, background - image: url("images/back.png");    ---> It denotes that this images folder is inside the css file. If the pictures folder is a brother to css file, use

    background-image: url("..) (' / images/back.png ');

  • 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

  • How can stretch a background image for the 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 does not work, if I deleted css - fx-background-repeat: stretching; the tense but background image he repeated, I want to leave the background image stretched and not repeated, it can be extended with the window resizing automatically.

    Try - fx-background-size: stretch;

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

    Basically what it says in the title. I came very close to achieve, but something comes to Moor in the html and css code...

    First of all, I use the latest version of Firefox and IE8 to test this situation.

    I used 2 sources of information to get this done: 1) http://css-tricks.com/perfect-full-page-background-image/ and ) 2 http://stackoverflow.com/questions/8958697/css3-background-size-cover-doesn ' t-make-image-co-ver-vertical


    In 1 case , the example of the called page CSS-Only Technique #1 gives the code that works almost perfectly for me, except that obviously I need to a background image, but the CSS provided ago obviously just for an image has fallen in the body of a page without taking account of any other content that may already be there. "The html code that I put on the page is simply < img class ="bg"src ="... / pictures/background_image.jpg "> "

    Of course, I used the CSS code in the example, less the last piece which is "@media screen" etc., which seems irrelevant to me. Of course by replacing the values according to the picture on my page.

    So what happened was that it worked almost as expected in both browsers (which means the image filled both browsers first as it should and also remained fixed when I zoomed in, inside or outside, in each case), except that the picture went on top of the current content that I already there precisely because there isn't a background in this 'technical '. (A note on the side of curious, is that the image didn't turn down content, I expected under normal circumstances, but he went right on top of it so she she hidden (like the z-index).)

    One thing that bothers me in this regard 'technical' is that if you click on view the demo just below the code provided, you will see on the example of work page (bottom of the forest), the image clearly works as a backdrop and the content is fortunately located on top! So I don't know if the person who provides the example was trying to deceive people or what! Or he got lazy and showed another page which did not use the exact code, he has provided. No matter.

    In any case this leaves me with only half-completed work, because I still need a background image that functions as the 'normal image' code provided.

    In 2 cases and on this page, the first example provided gives the CSS for clutter - namely the code in the html {...} part and shows also the same "normal image" code as shown in box 1. In this case however, that the person provide a suggestion, the html and the css is not really properly more Moor some css and html seems a little redundant. So this time, when I used the part "html" in the CSS code (i.e. just the bit that was no longer relevant), I had two different behaviors in each browser and neither of which was quite what I'm looking for. In IE8, initially the page seems well (background fills the page and the content is on top) but when I Zoom in or out the background also zooms in or out accordingly so is NOT fixed. In Firefox, the background image stays fixed, but because the image is initially not the height of the browser I guess the code it extends down (keeping the proportions - so the image enlarges essentially) to fill it. The fast way to get around it is probably add white space at the bottom of the image just to give it sufficient height is not extensible / resize automatically. But it would be nice to know at least how to work around this problem in the code. Overall, I would say that the result in Firefox is closest to the desired solution, but of course it is not arranged things with IE8.

    Apologies for the long description, but which should at least provide much info for anyone who might have a possible solution for me. Essentially what would be great is if someone could advise me how to take the code of case 1 and apply it to a piece of 'background' coding as the type that is contained in html {...} in Case 2 . Like I said, it is almost there, but I just can't operate atm after trying to combine different bits of code this way and that... Also, if anyone has another version of html-css that works well to achieve then please by all means of let me know! V thanks a lot in advance!

    It works in modern browsers of the CSS3 support.  But not pre - IE9.

    http://ALT-Web.com/test/resizable-BG.shtml

    Nancy O.

  • How to allow visitors to change the background image of my site?

    Hello.

    I wanted that my visitors to be able to change the background image to another image. Already, I know how to do it with the colors but doesn't seem to work wih images. You are able to do this on Google, but can not seem to find it anywhere online. I just want it to change while the visitor is on the site. for example

    1 visitor - context changes to-myarea.jpg

    2 visitor - context changes to-my cat.jpg

    and so on...

    This would not change the site forever, just at the point where the visitor is about it.

    Concerning

    Leon

    Here are a few ways to do this:

    Option #1:

    You'll need a JavaScript script and an array on the page background images.

    An example of work below.  View source in the browser to see the code.

    http://ALT-Web.com/BG-img.html

    Option #2:

    Create more than one style sheet with different colors and background - images of the body.

    Create a selector of stylesheet like this with jQuery

    http://www.kelvinluck.com/assets/jQuery/styleswitch/toggle.html

    Nancy O.

    ALT-Web Design & Publishing

    Web | Graphics | Print | Media specialists

    http://ALT-Web.com/

    http://Twitter.com/ALTWEB

  • How to make the background of a control string Transparent?

    Hi all

    Is it possible to make the background of a control string Transparent?

    Thank you
    Ritesh

    Hello

    Yes. Over time edit use the color tool and select transparent (the "T" symbol in the upper right corner of the color selection dialog box) to the background color. At run time, use the property of "text color: text color: BG ' control of the chain.

  • How to change the background image of the "submit" button

    Hi all

    I want to change the appearance of a submit button: instead of show a button with text 'Add', I want the button submit to be like an icon 'more'

    I tried to change the background image of the button submit like that, but it doesn't work. What is the ownership change?

          CSSStyle customCss = new CSSStyle();
          customCss.setProperty("background-image", "url('/OA_MEDIA/plus.png')");
          
          OASubmitButtonBean addSubmitButton = (OASubmitButtonBean)webBean.findIndexedChildRecursive("addSubmitButton");     
          addSubmitButton.setInlineStyle(customCss);
    

    Thank you

    Kind regards

    Afaf

    Why not try with just an Image and fireAction on it?

Maybe you are looking for