How to set a background image re-scalable depending on the screen resolution of viewers

Hello

I searched the net for ages looking for a way to make a background image on the scale according to the size of a monitor of viewers.

I found a solution:

Source code

< body >

"< img src ="... /... ' / Images/Connor/background_bg.png ' class = 'bg' >

< / body >

CSS (style)

{img.BG}

/ * Define the rules to fill the background * /.

min-height: 100%;

min-width: 1024px;

/ * Set up a proportional scaling * /.

Width: 100%;

height: auto;

/ * Set up positioning * /.

position: fixed;

top: 0;

left: 0;

}

@media screen and (max-width: 1024px) {}

{img.BG}

left: 50%;

left margin:-512px. }

}

Now, this has the desired effect, however when I place a div below "< img src ="... /... "' / Images/Connor/background_bg.png ' class = 'bg' > ' in the body of my site, it pushes this div below my bottom.

I got the code from " " http://CSS-tricks.com/perfect-full-page-background-image/ "and it does not seem to do this in this example. "

I pasted my complete code below, if someone could have a look and advise where I'm wrong that would be greatly appreciated.

Thanks and greetings

Elliot

Source code

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

" < html xmlns =" http://www.w3.org/1999/xhtml ">

< head >

< meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"

< title > Untitled Document < /title >

< link href = "style.css" rel = "stylesheet" type = "text/css" / > "

< script type = "text/javascript" >

function MM_swapImgRestore() //v3.0 {}

var i, x = offline. MM_sr; for (i = 0; a & & I <.) Length & & (x = a [i]) & & x.oSrc; i ++) x.src = x.oSrc;

}

function MM_preloadImages() {//v3.0

var d = document; If (d.images) {if(!d.MM_p) d.MM_p = new Array();

var i, j is d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i <.) Length; i ++)

If (a [i].indexOf("#")! = 0) {d.MM_p [j] = new Image; d.MM_p [j ++] .src = a [i] ;}}

}

function MM_findObj (n, d) {//v4.01

var p, i, x;  if(!d) d = document; If ((p = n.IndexOf ("?")) > 0 & & parent.frames.length) {}

d = parent.frames [n.Substring(p+1)] .document; n = n.Substring (0, p) ;}

If (!) () x = d [n]) & & copyrights) x = d.all [n]; for (i = 0;! x & & i < d.forms.length; i ++) x = d.forms [i] [n];

for (i = 0;! x & & d.layers & & I < d.layers.length; i ++) x = MM_findObj (n, d.layers [i] .document);

If (! x & & d.getElementById) x = d.getElementById (n); Return x;

}

function MM_swapImage() {//v3.0

var i, j = 0, x, a = MM_swapImage.arguments; document. MM_sr = new Array; for (i = 0; i <(a.length-2); I += 3).

If ((x = MM_findObj (a [i]))! = null) {document. MM_sr [j ++] = x; if(!x.oSrc) x.oSrc = x.src; x.SRC = a [i + 2] ;}

}

< /script >

< / head >

< onload of the body = MM_preloadImages('..) « /.. / Images/Connor/nav_bar/home_ro.png ','... /... / Av_bar/about_me_ro.png images/Connor/n ','... /... / Images/Connor/nav_bar/c.v_ro.png ','... /... / Bar/portfolio_ro.png images/Connor/nav_ ','... /... (/ Images/Connor/nav_bar/contact_me_ro.png') ">"

"< img src ="... /... ' / Images/Connor/background_bg.png ' class = 'bg' >

< div id = "web_centre_wrap" >

< div id = 'menu_bar' > < table width = "960" border = "0" cellspacing = "0" cellpadding = "0" >

< b >

"< td width ="105"height ="68"> < img src ="... /... "/ Images/Connor/nav_bar/nav_bar_left.png" width = "105" height = "68" / > < table >

"< td width ="147"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image3 '", '... /..) " (/ Images/Connor/nav_bar/home_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/home.png" name = "3" width = "147" height = "68" border = "0" id = "3" / > < /a > < table >

"< td width ="147"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image4 '", '... /..) " (/ Images/Connor/nav_bar/about_me_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/about_me.png" name = "Image.4" width = "147" height = "68" border = "0" id = "Image.4" / > < /a > < table >

"< td width ="148"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage (' picture5 '", '... /..) " (/ Images/Connor/nav_bar/c.v_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/c.v.png" name = "Picture5" width = "148" height = "68" border = "0" id = "Picture5" / > < /a > < table >

"< td width ="147"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image6 '", '... /..) " (/ Images/Connor/nav_bar/portfolio_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/portfolio.png" name = "Image6" width = "147" height = "68" border = "0" id = "Image6" / > < /a > < table >

"< td width ="148"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image7 '", '..) " /.. (/ Images/Connor/nav_bar/contact_me_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/contact_me.png" name = "Image7" width = "148" height = "68" border = "0" id = "Image7" / > < /a > < table >

"< td width ="118"height ="68"> < img src ="... /... "/ Images/Connor/nav_bar/nav_bar_right.png" width = "118" height = "68" / > < table >

< /tr >

< /table >

< / div >

< div id = "header" > < / div >

< div id = "content" > < / div >

< div id = "footer" > < / div >

< / div >

< / body >

< / html >

CSS (style)

@charset "utf-8";

/ * CSS document * /.

{img.BG}

min-height: 100%;

min-width: 1024px;

Width: 100%;

height: auto;

position: fixed;

top: 0;

left: 0 ;}

@media screen and (max-width: 1024px) {}

{img.BG}

left: 50%;

left margin:-512px ;}

{#web_centre_wrap}

Auto margin: 0 ;}

{#menu_bar}

#header {}

Background: url (.. /.. Images/Connor/Header.png) ;}

#content {}

Background: url (.. /.. Images/Connor/content.png) ;}

#footer {}

Background: url (.. /.. Images/Connor/footer.png) ;}

Try this:

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

Nancy O.

ALT-Web Design & Publishing

Web | Graphics | Print | Media specialists

http://ALT-Web.com/


Tags: Dreamweaver

Similar Questions

  • How to set a background image

    HY guys, I'm trying to set a background image on a Blackberry screen. I used this code, but the image dousen can't cover the full screen. Can someone me say what the problem is, or give me an example of how's done it? package mypackage;

    SerializableAttribute public class BackgroundImage extends UiApplication
    {
    Imagearriereplan private bitmap;
    fieldBitmap private bitmap;
        
    Public Shared Sub main (String [] args)
    {
    BackgroundImage PAP = new BackgroundImage();
    theApp.enterEventDispatcher ();
    }
        
    public BackgroundImage()
    {
    The background image.
    Imagearriereplan = Bitmap.getBitmapResource ("loginBackground.png");
            
    Display display = new MainScreen();
            
    HorizontalFieldManager horizontalFieldManager = HorizontalFieldManager(HorizontalFieldManager.USE_ALL_WIDTH | nouveau HorizontalFieldManager.USE_ALL_HEIGHT) {}
                
    Override the paint method to draw the background image.
    public void paint (Graphics graphics)
    {
    Draw the background image, then paint.
    graphics.drawBitmap (0, 0, 240, 240, Imagearriereplan, 0, 0);
    Super.Paint (Graphics);
    }
                
    };
            
    The LabelField will be visible through the transparent image.
    LabelField labelField is new LabelField ("is a label");.
            
    A bitmap with a transparent image field.
    The background image will be visible through the transparent BitMapField image.
    BitmapField bitmapField = new BitmapField (Bitmap.getBitmapResource ("field.png"));

    Add the handler to the screen.
    mainScreen.add (horizontalFieldManager);
            
    Add the fields to the Manager.
    horizontalFieldManager.add (labelField);
    horizontalFieldManager.add (bitmapField);
            
    Tap on the screen.
    pushScreen (mainScreen);
    }
    }

    Thanks in advance

    You can scale the image with EncodedImage, but it is usually best to use an image with a sufficient size

  • How to set a background image in javafx?

    Hello world

    I draw FXML GUI, it includes labels and ProgressBar, load it into JavaFX, it is a code snippet.

    root = FXMLLoader.load (getClass () .getResource ("StartMenuFXML.fxml"));

    Label1 = (label) root. Lookup ("#label");

    Label2 = (label) root. Lookup ("#label");

    progressBar = (ProgressBar) root.lookup ("#ProgressBar");

    scene = new Scene (root, 600, 400);

    stage.setTitle ('start progress");

    Progress p = new Progress();

    p.Start ();

    stage.setScene (scene);

    internship. Show();

    I need to add a background image, so I add the declarations:

    Component GridPane = new GridPane();

    pane.setTitle ("background - fx - image: url ('image1.jpg')");

    and change: scene = new Scene(pane,600,400);

    It can display the background image, but I don't know how to display tags and ProgressBar on the background image.

    Give me a good resolution, please!

    Thank you very much!

    Just do

    root.setStyle("-fx-background-image: url('image1.jpg')");
    

    and use your new Scene call (...) original.

  • How can I force an image to open completely on the screen in action?

    In PS CS5 when I open an image with height in the range of 1405-1411 or 1873-1882, the image opens half of the bottom of the screen.  Width opts seem to matter.

    I guess it's a bug, but until it is fixed, I'm trying to work around.

    For manual fitting the vertical adjustment button or zoom out screen causes the image to the screen lights up but neither of these options will save in an action to display.

    When an image is opened halfway off the screen, Place a command place precisely for these images.  So an action that includes a place does not work for these images.

    So either I want to find an arrangement (Nothing in preferences that I can find) to force the image open to the screen, or find a command that runs in an action that activates the picture to come on the screen, while not interefering with images that open normally.

    You can use Insert a Menu item (the Launcher to the Panel menu actions) to record something like view > fit to the screen, but what you describe should not be the case.

    You are using tabs or floating documents?

    Have you tried resetting preferences cs5?

    http://forums.Adobe.com/thread/375776?TSTART=0

    Maybe you could post a screenshot showing how the image opens.

  • How to have a background image transparent web page to the browser

    I used a color gradient background image on my scene for my Web site.

    Managed to load the same background on the background of the browser.

    However, the result is not satisfactory that I can see the limits of background image site against the background of the browser.

    How can I get around this? Or y at - it a code that allows me to change my transparent Web site background so that I do not have a background of the browser?

    Tried to post using the window Mode: Transparent windowless, but does not work.

    Pls help...

    Thank you!

    You can try to remove the background image on the Flash file, and then will the WMODE = transparent route.

  • Background image with scrolling not for the screen

    Hi all.

    I use the following code to make the background dropdown not image, and it works for all BlackBerry Storm2 (OS 5.0) except (I tried it on a simulator):

    public class MyScreen extends MainScreen{
    
    ...
    
        public MyScreen() {
           super(NO_VERTICAL_SCROLL);
           bitmap=loadBG();       super.add(mContainer = new BGVerticalFieldManager(bitmap));
        }
        public void add(Field field){        mContainer.add(field);    }...
    
    }
    
    public class BGVerticalFieldManager extends VerticalFieldManager {
        Bitmap mBgBitmap = null;
        int mBgWidth = -1;
        int mBgHeight = -1;
        int mBgX = -1;
        int mBgY = -1;
    
        public BGVerticalFieldManager(Bitmap background) {
            super(USE_ALL_WIDTH | USE_ALL_HEIGHT | VERTICAL_SCROLL
                    | VERTICAL_SCROLLBAR);
            mBgBitmap = background;
            mBgWidth = mBgBitmap.getWidth();
            mBgHeight = mBgBitmap.getHeight();
            mBgX = (Display.getWidth() - mBgWidth) >> 1;
            mBgY = (Display.getHeight() - mBgHeight) >> 1;
    
        }
    
        protected void paintBackground(Graphics graphics) {
            paintBackgroundBitmap(graphics);
        }
    
        protected void sublayout(int maxWidth, int maxHeight) {
            mBgX = (Display.getWidth() - mBgWidth) >> 1;
            mBgY = (Display.getHeight() - mBgHeight) >> 1;
            super.sublayout(maxWidth, maxHeight);
        }
    
        private void paintBackgroundBitmap(Graphics graphics) {
            if (null != mBgBitmap) {
                int x = mBgX
                        + getHorizontalScroll();
                int y = mBgY
                        + getVerticalScroll();
                graphics.drawBitmap(x, y, mBgWidth, mBgHeight, mBgBitmap, 0, 0);
            }
        }
    
    }
    

    The Storm2 scrolls the background image, looks that getVerticallScroll() does not work.

    Can someone help me with this?

    Thank you.

    also have glance at this:

    http://supportforums.BlackBerry.com/T5/Java-development/use-a-background-image-in-application-screen...

  • How to set or keep a background image in my application at the beginning of the application that is, after clicking on the application icon.

    How to set or keep a background image in my application at the beginning of the application that is, after clicking on the application icon.

    I have developed a BB 7.0 BONE HTML5 / web app in which I want to include background image.

    Please guide me.

    Take a loot of rim: loadingScreen on config.xml http://developer.blackberry.com/html5/documentation/rim_loadingscreen_element_834680_11.html

  • How can I restore all images in a collection at the original imported proportions?

    In general, I select all images in a catalog, resize the first image to 640 x 480.  I then right click on the first image (all images are always selected) click settings to develop, sync and choose to sync only the proportions.  All images are then cut to 640 x 480 as the first picture, that I then export to a folder.

    Then I need to restore all the images in the original proportions for creating a slide show export to my Web site.  I followed the same procedure is selected all the images, click on the first image, change the original appearance, right click on the first picture and sync proportions for all images.

    The problem is that the rest images do not return to their original proportions, but return to the aspect ratio of 4 x 6 instead of the original size when they are imported.  I changed the lock open and tried both but still no result.  Now I have to select each image individually, open the dialog of cultures and choose custom to retrieve for the imported image format.

    How do I batch restore images from a collection to the image format when imported?

    I see, it is something you do at the end of your treatment, for the slide show to a Web site special... maybe you said it at the beginning, but I respond by e-mail and don't see any of these messages.

    In any case, what you can do is to export all your images with their existing to a subfolder (original) aspect ratio, somewhere and add those to the library using the parameter to the top near where you set the directory put them in, and then set a harvest of 4:3 on these imported JPGs and their re-export in 640 x 480 for the RMLS site.  If it is a unique thing for each collection, you could easily just delete both sets of jpg files to your library and the drive to keep the use of extra space, or at least those intermediate.  As you said, that it was a collection, perhaps from different folders, but if they all come from the same folder, to make the JPGs intermediaries and the jpg final 640 x 480 as subdirectories in the original in order to better RAWs keep track of them.

  • Hi, how can I change the screen resolution?

    I keep saying to change the resolution of the screen but don't know how to proceed and would appreciate some advice before doing the wrong thing.

    Hello

    I don't think there is a problem with Firefox, but I got a peek inside and I think I'm able to help.

    The screen resolution is a Windows 8 setting you need to change. I found this walk through (with screenshots) that should help you.

    I hope this helps, but if not, please come back here and we can look at another solution for you.

  • Skype is running in the background, but does not open on the screen

    Skype is running in the background, but does not open on the screen

    Uninstall ArcSoft software. This application adds a filter cell of webcam and is originally Skype crashing.

    Stack: \Driver\,ArcSoftKsUFilter, \Driver\ksthunk,\Driver\usbvideo,\Driver\usbccgp

  • How to change the screen resolution of 1024 x 768 to 1600 x 900

    original title: How can I update my computer for the new screen resulition my old system just to 1024 x 768 and my new moniter is 1600 x 900

    My computer is fine, but I like update the resolution of the screen, it is only 1024 x 768 and I would that he 1600 X 900, what can I'd to make do this

    Hello

    Thanks for posting in the Microsoft Community. Looks like you want to change the screen resolution of 1600 x 900.

    We need additional information about this problem to help you better:

    1. what version of Windows are you using?

    2. What is the brand and model of the computer?

    Visit this link to learn more about the operating system that you use:

    Operating system Windows am I running?

    http://Windows.Microsoft.com/en-in/Windows/which-operating-system

    Visit this link if you use Windows 7 to change the resolution:

    Change your screen resolution

    http://Windows.Microsoft.com/en-us/Windows7/change-your-screen-resolution

    Visit this link if you are using Windows Vista for change the resolution:

    http://Windows.Microsoft.com/en-us/Windows-Vista/change-screen-resolution

    In addition, check if the graphics card drivers are updated:

    Updated a hardware driver that is not working properly

    http://Windows.Microsoft.com/en-us/Windows7/update-a-driver-for-hardware-that-isn ' t-work correctly

    Hope this information helps. If you have any other questions feel free to respond and we would be happy to help.

  • Cannot bar resolution move to set the screen resolution

    I just installed vista and everything was huge! I went screen resolution under Customize and there is no other options on the scroll bar expect I am the one on which is 640 X 480 at an average of 16-bit color, I tried to update the drivers for the card and the screen but its still the same, I also reinstalled vista but its still the same HELP!

    Go to the Web site of the manufacturer of your laptop computer-graphics/computer card > drivers and downloads Section > key in your model number > look for the latest Vista drivers > download/install them.

    If there is no graphics Vista drivers available for your model, nothing can be done about it.

    Then:

    http://Windows.Microsoft.com/en-AU/Windows-Vista/change-screen-resolution

    Change the screen resolution

    Screen resolution refers to the clarity of the text and images on your screen. At higher resolutions, items appear sharper. They appear also smaller, so more items adapted to the screen. At lower resolutions, fewer items adapted to the screen, but they are larger and easier to see. At very low resolutions, however, images may have serrated edges.

    See you soon.

    Mick Murphy - Microsoft partner

  • I have netbook Asus eeepc 1005HA with windows 8 instaled as, how can I increase the screen resolution? Thank you in advance.

    I want to enjoy the new interface and not access anything from there. I hope that there is a way.
    Thanks in advance.

    Hi , Sideria,

    Thanks for posting in the Forum the Microsoft community.

    I understand from your description you want to change the resolution of the screen.

    To change the Screen resolution, do the following:

    Step 1: Right click on the desktop and select Screen Resolution screen resolution window.

    Step 2: You can see the current screen resolution then the resolution box. If the resolution is less than 1024 x 768 pixels, you can set a higher resolution, if your PC supports. To change the resolution in progress, click resolution box and select a higher resolution.

    See also:

    Make the text on the screen larger or smaller

    http://Windows.Microsoft.com/en-us/Windows-8/make-text-screen-larger-smaller

    I hope this helps solve your problem. If you continue to face the questions and reply to this thread, we will be happy to help you further.

  • I have photoshop 7. How can I change background images?

    I have photoshop 7 I want to change the background images. can someone pls tell me the step by step process how to do this?

    In fact, I'm running a niche entertainment site: Movies of Punjabi and I want to learn this function because I want to download wallpapers HD in my site.

    Hi jagjeets,

    Please see the tutorial below.

    How to change the background of the Photo in Photoshop - YouTube

    How to change the background of a Photo in Photoshop

    Let us know if that helps.

    Kind regards

    Mohit

  • How to add a background image in a slidehsow yet?

    How can I add a background image in a slidehsow yet? Currently, the slide show has a black background and I wish I could change that to an image.

    You can always start first (or Photoshop) and create images with any background you choose...

Maybe you are looking for