Jump to content
  • 0

свойство background в бразуерах не соответствует w3c?

clavin

Asked by clavin,

 Share

Question

clavin Explorer

clavin

Posted
Posted

В стандарте http://www.w3.org/TR/CSS2/colors.html#propdef-background говорится, что фоновое изображение можно устанавливать таким образом:

background:transparent url('images/1.gif') no-repeat fixed center;

Но на практике значение "fixed" оказывается лишним. Только IE6 понимает свойство с этим словом. В остальных браузерах фон просто не отображается. Что с этим свойством не так?

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Fixed привязывает фон к окну браузера (viewport-у). Если при изначальной загрузке фон был за его границами (что вероятно, ибо center), он там, за границами, и останется при скроллинге. А IE6, ЕМНИП, понимает fixed только для body (впрочем, для других элементов он редко имеет смысл)...

Link to comment
Share on other sites
  • 0
clavin Explorer

clavin

Posted
  • Author
Posted (edited)

Не очень понятно. Меняю fixed на scroll - тот же результат. Фоновое изображение появляется только если слово "fixed" или "scroll" отсутствует в значении свойства.

Edited by clavin
Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

Что я делаю не так?

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>

	<style type="text/css">
		body {height: 3000px; background: url('http://6inchmove.files.wordpress.com/2010/03/pipboy300.jpg') fixed 50% 50% no-repeat;}
	</style>
</head>
<body>



</body>
</html>

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted (edited)

FF 3.6.10 — scroll работает (что логично, оно же дефолтное значение). А fixed в сочетании с center для позиции сдвигает фон в центр окна (если сжать окно до где-то 400 на 300 px, будет видно).

P.S. Упс, долго писал — мой коммент относится к примеру clavinа.

Edited by SelenIT
Link to comment
Share on other sites
  • 0
clavin Explorer

clavin

Posted
  • Author
Posted
FF 3.6.10 — scroll работает (что логично, оно же дефолтное значение). А fixed в сочетании с center для позиции сдвигает фон в центр окна (если сжать окно до где-то 400 на 300 px, будет видно).

То есть fixed можно применять только к тегу body? Я считал, что можно ко всем элементам ставить.

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted (edited)

clavin, применять можно ко всем (исключая IE6, где работает только для body). Но результат будет именно таким... своеобразным, необходимость в таком эффекте (имхо) возникает редко.

Edited by SelenIT
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
То есть fixed можно применять только к тегу body? Я считал, что можно ко всем элементам ставить.

Можно к любому элементу( кроме ИЕ6, там только к body). Сам фон будет расположен с учётом области просмотра, а не элемента, но только виден он будет в рамках нашего элемента)

Link to comment
Share on other sites
  • 0
clavin Explorer

clavin

Posted
  • Author
Posted

Ничего все равно не понял. :)

Если задать fixed, то у меня как раз в IE6 всё работает, в остальных браузерах нет. И куда картинка по-вашему уезжает если я ей однозначно поставил свойство center? Она должна быть в центре дива, для которого я бекграунд устанавливаю. Может она при этом позиционируется относительно корневого тега body?

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
Может она при этом позиционируется относительно корневого тега body?

Практически. Точнее, относительно окна браузера. Если окно скукожить до очень маленького размера, картинка попадет в правый див и станет видна. Так работает во всех браузерах, кроме IE6.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept