Login/Register
how to position a background for a big image which is centered at the center of the page?
Asked Answered
Solved htmlcsscordovamedia-queriescordova-2.0.0
A

1

1

I have a image with dimension with dimensions 2350*180.

I am working on Phone gap. So,I need to give the code in a generic format so that it is applicable to any device.

Now, I have a background image for that big image.

style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%; "

this code works for few only.. Is there any mistake in my code?

another question, is when I scroll there is scroll bar thats visible. SO I added 

style="overflow:hidden;"

<img src=""/> tag.

Am I correct or any other code should be added?

EDIT:

HTML

    <body style="style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%;" class="body">
    <div id="image"  class="noSelect">
        <table class="table">
            <tr>
                <td class="main">
                    <img src="http://www.rhpstudio.com/images/google_icon.png" alt="map" usemap="#map" style="overflow:hidden;" />
                </td>
            </tr>
        </table>
</body>

I am taking about this background background:url("img/bg.png") in the code, and this image given here in is a sample one BUT its dimension is 2350*180.

EDIT:2-->entire code

HTML CODE:

<body style="background-image:url(img/bg.png);" class="body">
    <div id="image"  class="noSelect" style="height:100%;">
       <table class="table">
          <tr>
        <td class="main">
           <img src="img/list.png" alt="bloodtestmap" usemap="#bloodtestmap" class="noSelect" style="overflow:hidden;" />
         </td>
          </tr>
       </table>

CSS CODE:

    .body, .main_html
    {
        height: 100%;
        margin: 0;
    }
    .body
    {
        overflow: hidden;
        background-size: 100% 100%;
    }
    .table 
    {
        width: 100%;
        height: 100%;
        text-align: center;
    }
    .main 
    { 
        max-width: 100%;
        vertical-align: middle;
    }
Aberdare answered 6/6, 2013 at 8:19 Comment(0)
S
1

You can now set a background image to stretch to the edges of the container in various ways. If you don't mind the image distorting, you would do it like this:

background-size: 100% 100%;

Rather than this (which is broken)

style="style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%;"

try this in your style sheet:

body {
    background-image:url("img/bg.png");
    background-size: 100% 100%;
}
Shortcake answered 6/6, 2013 at 8:35 Comment(6)
OK, see my revised answer. – Shortcake
this background has a design so keeps on repeating. when I give this no-repeat fixed center top; width:100%; height:100%;. the background is fixed and only the image scrolls. What should i do to avoid the scrollbar – Aberdare
You seem to be ignoring my suggestions, so I don't know what to say. I don't understand what you are doing. I guess you could use body {overflow: hidden;} but that's usually a disastrous move. – Shortcake
No Sir.I have followed the suggestion and that is when i noticed that the design of the background is repeating. I would prefer if it was in the same position allowing the image alone to scroll – Aberdare
Could you show us an example of what you are doing? Or at least post the code you have now? – Shortcake
Sir, Please find the edit 2 version which has the entire html code and their respective CSS. – Aberdare

© 2022 - 2024 — McMap. All rights reserved.