Как разместить содержимое внутри фонового изображения

Как обеспечить, чтобы определенный контент всегда был установлен внутри определенной области веб-страницы?Как разместить содержимое внутри фонового изображения

В качестве примера я хотел бы, чтобы предложение «Fit this inside» появилось внутри фонового изображения. Вот мой test.html файл:

<!DOCTYPE html> 
<html lang="en"> 
    <link href="test.css" rel="stylesheet" type="text/css"> 
    <body>Fit this inside</body> 
</html>

Вот мой test.css файл:

body 
{ 
    background-image: url('bg_img.png'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
    background-size:100% 68%; 
    overflow: scroll; 
}

Это приводит к тексту «Установить этот внутренний» появляется в самом верху страницы, а не в фоновом режиме область изображения.

Каков правильный метод для этого?

JSFiddle: http://jsfiddle.net/u3TAF/

источник

2013-12-20 Dirty Penguin

Просьба http://jsfiddle.net/ – enyce12

выглядит ваш фон-размер (высота) составляет 68% - так это начинается в 16% от высоты. Вы можете найти текст в любом блоке (div/p) и установить его на 16%. * edit - это 16% (32/2) –

Посмотрите на мой комментарий выше. Вы установили фоновое изображение на 68% высоты. установите текст в контейнер с теми же свойствами.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title> Bla! </title> 
     <style type='text/css'> 
      body 
      { 
       background-image: url('image.png'); 
       background-repeat: no-repeat; 
       background-position: center center; 
       background-attachment: fixed; 
       background-size:100% 68%; 
      } 
      div.container { 
       position:absolute; 
       top:16%; 
       height: 68%; 
       left: 0%; 
       overflow:auto; 
      }   
     </style> 
    </head> 
    <body> 
     <div class='container'> 
      Now it's fit! 
     </div> 
    </body> 
</html>

источник

2013-12-20 18:47:06

Это сработало. Благодаря :) –

фоновое изображение должно быть уделено родительского элемента. В вашем случае, в CSS, прикрепите свойство background image к элементу <html>. Таким образом, это изображение будет действовать как фон все содержание этой страницы.

Если это то, что ваша цель, то:

html{ 
     background: url('bg_img.png') no-repeat center center fixed; 
    }

источник

2013-12-20 18:41:51

Я пробовал это, однако текст все еще находится за пределами изображения. –

Я думаю, что лучшим вариантом было бы поместить текст в DIV, а затем применить стили к этому элементу. Где-то вдоль линий:

<html> 
<head> 
<style type="text/css"> 
#test{ 
    background-image: url('bg_img.png'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
    background-size:100% 68%; 
    overflow: scroll; 
    } 
</style> 
</head> 
<body> 
<div id="test"> 
Fit This Inside 
</div> 
</body> 
</html>

источник

2013-12-20 18:47:33 KM123

Как разместить содержимое внутри фонового изображения

ответ

Смежные вопросы