Сделайте изображение позади текста и держите его в центре, используя css

Я создаю веб-страницу, где у меня есть изображение, которое я хочу разместить в центре, а затем поверх этого изображения. Я хочу иметь поля ввода и метки и кнопку отправки.

Я пытаюсь использовать css

img.center
{
    z-index:-1;
}

но это не работает. и когда я меняю код на

img.center
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

если сделать изображение позади, но тогда, когда я использовал left:0px и top:0px... он помещает изображение в loaction 0,0.. но я хочу, чтобы изображение оставалось в центре.

чтобы сохранить изображение в центре, у меня есть тег <div align="center">.

так или иначе, я могу сохранить изображение в центре и заставлять его заходить слишком.

Моя .html-страница выглядит так: (я попытался получить фоновое изображение для моего тега div, но изображение не появляется там)

<html>
<head>
<title>Question of the Week</title>
<style type="text/css">
    body
    {
        background-image:url('images/background.jpg');
        background-repeat:repeat-x;
    }

    .container
    {
    background-image:url('images/center.jpg');
    background-repeat:no-repeat;
    }
    td.cntr {padding-top:50px;}
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td><div align="left"><img src="images/logo.jpg"></div></td>
                    <td></td>
                    <td><div align="right"><img src="images/right_logo.jpg"></div></td></tr>
            </table>
        </tr>
        <tr>
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="cntr">
                        <div id="container">
                            <input name="box" type="textbox" />
                            <input name="box" type="textbox" />
                            <input name="submit" type="submit" />
                        </div>
                    </td>
                </tr>
            </table>
        </tr>
    </table>
</body>
</html>

Ответы

Ответ 1

Хорошо, разместите свое изображение на заднем плане вашего веб-сайта/контейнера и поставьте все, что захотите, поверх этого. так скажите, что у вас есть:

<div id="container">
   <input name="box" type="textbox" />
   <input name="box" type="textbox" />
   <input name="submit" type="submit" />
</div>

Это будет в вашем коде, и вы будете выглядеть так:

#container {
    background-image:url(yourimage.jpg);
    background-position:center;
    width:700px;
    height:400px;
}

Чтобы это работало, вы должны иметь высоту и ширину, определенные для определенных значений (т.е. нет%). Я мог бы помочь вам более конкретно, если вам это нужно, но мне понадобится дополнительная информация.

Ответ 2

Сделайте фоновое изображение с центром.

.wrapper {background:transparent url(yourimage.jpg) no-repeat center center;}

<div class="wrapper">
 ...input boxes and labels and submit button here
</div>

Ответ 3

Вы можете расположить как изображение, так и текст с помощью position:absolute или position:relative. Затем будет свойство z-index. Например.

#sometext {
    position:absolute;
    z-index:1;

}
image.center {
    position:absolute;
    z-index:0;
}

Используйте любой метод, который вы хотите центрировать.

Другой вариант/взломать - сделать изображение фоном, либо на всей странице, либо только в текстовом поле.

Ответ 4

Попробуйте этот код:

body {z-index:0}
img.center {z-index:-1; margin-left:auto; margin-right:auto}

Установка левого и правого полей в авто должна центрировать ваше изображение.

Ответ 5

Начните с 0 и идите оттуда, а не используйте -1. Например, установите div, содержащий ваши входы и метки, в индекс z, равный 100, и дайте изображению, которое вы хотите поместить за ним, z-index из 50.

В качестве альтернативы просто установите изображение как фоновое изображение div, содержащего входы и метки. Так как изображение, вероятно, является иллюстративным и, следовательно, презентационным, на самом деле не обязательно быть фактическим элементом img.

Ответ 6

Есть два способа справиться с этим.

  • Фоновое изображение
  • Использование свойства z-index для CSS

Фоновое изображение, вероятно, проще. Где-то нужна фиксированная ширина.

.background-image {
    width: 400px;
    background: url(background.png) 50% 50%;
}

<div class=".background-image"><form></form></div>