как расположить фон для большого изображения по центру страницы?

У меня есть изображение размером 2350*180.

Я работаю над разрывом телефона. Итак, мне нужно дать код в общем формате, чтобы он был применим к любому устройству.

Теперь у меня есть фоновое изображение для этого большого изображения.

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

этот код работает только для немногих. Есть ли ошибка в моем коде?

Еще один вопрос: когда я прокручиваю, полоса прокрутки видна. ТАК Я добавил

style="overflow:hidden;"

<img src=""/> tag.

Я прав или нужно добавить какой-то другой код?

ИЗМЕНИТЬ:

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>

Я использую этот фон background:url("img/bg.png") в коде, и это изображение, приведенное здесь в , является образцом, НО его размер 2350*180.

EDIT:2-->весь код

HTML-КОД:

<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-код:

    .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;
    }

cordova html css media-queries cordova-2.0.0
person user    schedule 06.06.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Теперь вы можете настроить фоновое изображение так, чтобы оно растягивалось до краев контейнера различными способами. Если вы не возражаете против искажения изображения, вы должны сделать это следующим образом:

background-size: 100% 100%;

Вместо этого (который сломан)

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

попробуйте это в своей таблице стилей:

body {
    background-image:url("img/bg.png");
    background-size: 100% 100%;
}
person ralph.m    schedule 06.06.2013
comment
ОК, см. мой пересмотренный ответ. - person ralph.m; 06.06.2013
comment
этот фон имеет дизайн, поэтому продолжает повторяться. когда я даю это no-repeat fixed center top; width:100%; height:100%;. фон фиксирован и прокручивается только изображение. Что мне делать, чтобы избежать полосы прокрутки - person user; 06.06.2013
comment
Вы, кажется, игнорируете мои предложения, так что я не знаю, что сказать. Я не понимаю, что ты делаешь. Я думаю, вы могли бы использовать body {overflow: hidden;}, но обычно это катастрофический ход. - person ralph.m; 06.06.2013
comment
Нет, сэр. Я последовал этому предложению и заметил, что дизайн фона повторяется. Я бы предпочел, чтобы он был в том же положении, позволяя прокручивать только изображение - person user; 06.06.2013
comment
Не могли бы вы показать нам пример того, что вы делаете? Или хотя бы опубликовать код, который у вас есть сейчас? - person ralph.m; 06.06.2013
comment
Сэр, пожалуйста, найдите версию edit 2, в которой есть весь HTML-код и соответствующий CSS. - person user; 06.06.2013