Полноэкранный фон + 5 баннеров в центре

Question

Полноэкранный фон + 5 баннеров в центре

0

Как вы можете видеть на следующем изображении: http://shrani.si/f/47/NX/CSI3Y2A/indexw.jpg

Мне нужно создать простую HTML-страницу с полноэкранным фоном. Это было бы не так сложно, если бы он мог быть совместим только с одной резолюцией, но я действительно не могу заставить его реагировать, даже не частично. Я попытался использовать некоторые уроки CSS для такого типа фонов, которые мне удалось найти, но без какой-либо удачи. Кроме того, эта страница должна быть совместима с IE8+, поэтому я не могу просто использовать какие-либо правила CSS.

В основном есть 3 типа элементов: - фон (синие линии) - логотип (который всегда должен располагаться поверх синих линий, как на образце) - 4 маленьких баннера с HTML-ссылками

На данный момент я слил логотип поверх фона, так что это просто одно изображение, чтобы упростить положение. Размер фона составляет 1920 x 1080 пикселей.

Здесь мой код, но есть, вероятно, лучшие решения:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Intro</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>

<body>
<body background="index.jpg" class="bg">
<div style="outer">
<div class="centered">
  <table width="200" border="0" align="center" cellpadding="0" cellspacing="50">
    <tr>
      <td><img src="icon3.png" width="168" height="128" alt=""/></td>
      <td><img src="icon6.png" width="128" height="128" alt=""/></td>
      <td><img src="icon4.png" width="168" height="128" alt=""/></td>
      <td><img src="icon9.png" width="128" height="128" alt=""/></td>
      <td><img src="icon5.png" width="128" height="128" alt=""/></td>
    </tr>
  </table>
</div>
</div>
</body>
</html>

index.css:

@charset "utf-8";
img.bg {
  /* Set rules to fill background */
  min-height: 768px;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1920px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

.outer{
    position: relative;
}


.centered{
    position:absolute;
    top:50%;
    height:10em;
    margin:0px auto;
    left:0;
    right:0;
    text-align: center;
    display:block;
}

Mem Faction 30 нояб. 2013, в 03:09

Источник

1

покажи свой код пожалуйста
Satya 30 нояб. 2013, в 02:07
0

Я сделал, пожалуйста, пересмотрите мой вопрос.
Mem Faction 30 нояб. 2013, в 15:24

Теги:

html

css

css3

web

1 ответ

Ещё вопросы

Я сделал, пожалуйста, пересмотрите мой вопрос.

Zaqx · Answer 1 · 2013-11-30T01-28-00.000Z

Вы можете сделать это с помощью свойства background-size. https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Фоновый размер игнорируется в IE8, но IE8 будет только когда-либо иметь размер рабочего стола, поэтому сделайте изображение масштабированным до обычного размера рабочего стола и используйте свойство background-size, чтобы обеспечить отзывчивость для всего современного, который поддерживает.