Страница 1 из 1
Как привязать рисунок в Css чтоб он не плавал ?
Добавлено: 2013-02-13 0:12:06
bobot
Вот код
Код: Выделить всё
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>?????????? ????????</title>
<meta name="generator" content="">
<style type="text/css">
body
{
background-color: #FFFFFF;
color: #000000;
}
</style>
</head>
<body>
<div id="wb_Shape1" style="margin:0;padding:0;position:absolute;left:21px;top:19px;width:1200px;height:511px;text-align:center;z-index:0;">
<img src="images/img0001.gif" id="Shape1" alt="" title="" style="border-width:0;width:1200px;height:511px"></div>
</body>
</html>
Это код обычной рамки !! И в завмсимости от размера монитора изображение плавает (смещается)
Как от этого избавиться ?
Re: Как привязать рисунок в Css чтоб он не плавал ?
Добавлено: 2013-02-13 16:01:19
tom.cat
Пример есть плавания/смещения?
Re: Как привязать рисунок в Css чтоб он не плавал ?
Добавлено: 2013-02-13 16:35:11
bobot
tom.cat писал(а):Пример есть плавания/смещения?
Вот код !!!
Код: Выделить всё
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>yura</title>
<meta name="generator" content="yurec">
<style type="text/css">
body
{
background-color: #FFFFFF;
color: #000000;
}
</style>
<style type="text/css">
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
</style>
</head>
<body>
<style>
body {
background: url(images/img0001.gif) no-repeat;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
}
</style>
</body>
</html>
Этот код растягивает фоновый рисунок по размеру экрана (фоновый рисунок обычный квадрат)
ПОлучается что я квадрат растягиваю по размерам экрана, но получается буква "П " т.е. нижней границы нету
Re: Как привязать рисунок в Css чтоб он не плавал ?
Добавлено: 2013-02-14 8:17:36
tom.cat
Код: Выделить всё
background: url(images/img0001.gif) repeat top left;
Я так полагаю черный квадрат это img0001.gif?
=====================
Только не понимаю, зачем остальное в блоке body?
Код: Выделить всё
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
Re: Как привязать рисунок в Css чтоб он не плавал ?
Добавлено: 2013-02-14 8:53:45
tom.cat
Пардон, я тебя неправильно понял. Вот решение, как раз рамки, фона рамки, стиля обрамления рамки)))
Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background</title>
<style type="text/css">
div {
height: 200px; /* Высота блока */
width: 200px; /* Ширина блока */
overflow: auto; /* Добавляем полосы прокрутки */
padding-left: 15px; /* Отступ от текста слева */
background: url(images/hand.png) repeat-y; /* Цвет фона,
путь к фоновому изображению и
повторение фона по вертикали */
}
.brd {
border: 2px dotted red; /* Параметры границы */
background: gray; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="brd">
Это код обычной рамки !! И в завмсимости от размера монитора изображение плавает (смещается) Как от этого избавиться ?
</div>
</body>
</html>
можешь скопировать код и протестировать. Рамка никуда не уезжает, если растянуть на полный экран.
Работа CSS
Добавлено: 2013-03-16 20:04:50
SviZ
Смотрите работу с CSS. У вас в HTML указан блок с центрированием текста и в этот блок вставлен IMG без float или position. По этому изображение просто центрируется. Уберите text-align: center или позиционируйте изображение явным способом.