Jump to content
  • 0

Неизменяемый фон при разном разрешении экрана?

ADK

Asked by ADK,

 Share

Question

17 answers to this question

Recommended Posts

  • 0
LunatiK Explorer

LunatiK

Posted
Posted
Здраствуйте, как можно сделать фон(картинку) на страничке, чтоб ее размер не менялся при открытии на разных компьютерах (с разным розрешением экрана)????

Можно поместить картинку на слой который апсолютно спозиционировать с зади (к примеру z-index: -1), но лучше не надо, бросьте эту затею.

Link to comment
Share on other sites
  • 0
Trayanez Explorer

Trayanez

Posted
Posted

если ты хочешь чтобы у тебя размер фоновой картинки был постоянный на всех компьютерах независимо от разрешения пропиши ширину глобального дива стационарно, или пропиши на него min-width!!!! но тогда если откроют страницу на компе с маленьким разрешением появится горизонтальный скрол в окне браузера(но с фоновой картинкой ничего не будет)

Link to comment
Share on other sites
  • 0
LunatiK Explorer

LunatiK

Posted
Posted
если ты хочешь чтобы у тебя размер фоновой картинки был постоянный на всех компьютерах независимо от разрешения пропиши ширину глобального дива стационарно, или пропиши на него min-width!!!! но тогда если откроют страницу на компе с маленьким разрешением появится горизонтальный скрол в окне браузера(но с фоновой картинкой ничего не будет)

Как вы думаете, вы помогли ADK ? ключевая фраза вашего поста: (но с фоновой картинкой ничего не будет) , а ADK просил чтоб тянулась.

Link to comment
Share on other sites
  • 0
Trayanez Explorer

Trayanez

Posted
Posted

"чтоб ее размер не менялся при открытии"

я эту часть текста понял наоборот..... Правда не любитель я отвечать на теоретические вопросы, а больше люблю заниматься кодом и отвечать так же готовым кодом :(

Link to comment
Share on other sites
  • 0
Trayanez Explorer

Trayanez

Posted
Posted

примерно понял что ты хочешь сделать.... мы с другом подобное делали для шапки одного сайта, но там применили одну хитрость! разбили рисунок на три части, средняя была как бы монотонная и ее можно было заполнить фоном repeat-x, а две крайние стационарные по ширине!!!! думаю идея понятна, но такая идея подойдет не для всех фоновых рисунков....

Link to comment
Share on other sites
  • 0
LunatiK Explorer

LunatiK

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">
<head>
<style type="text/css">
.fonn {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
</style>
</head>
<body>
<p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p>
<p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p>
<p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p>
<p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p><p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p>
<p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p>
<p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p>
<p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p><p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p>
<p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p>
<p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p>
<p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p><p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p>
<p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p>
<p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p>
<p>Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо! Ололо,пыщ пыщ пыщ упячка олололо!</p>
<p>Это всё заместа Lorem ipsum</p>


<div class="fonn">
<img src="bg-01.jpg" width="100%" height="100%" />
</div>
</body>
</html>

Картинко тут

На кросбраузерность не проверял, да и не притендую

Link to comment
Share on other sites
  • 0
LunatiK Explorer

LunatiK

Posted
Posted
У меня получается что ШАПКА - бэкграунд один, а Меню - Быкград другой! Как сделать чтоб под этим всем была одна картинка?

бекграунд для боди, либо для дива основного, либо пользуйте мною приведённый выше извращённый пример

Link to comment
Share on other sites
  • 0
Zippovich Explorer

Zippovich

Posted
Posted (edited)

иногда проще словами сказать, чем писать кучу кода в котором надо еще и разобраться. Помоему сказано предельно ясно:

я делал картинкой с width="100%" и абсолютным позиционированием под контентом. Все работало кроссброузерно.

кому будет не понятно, могу написать примерно следующее:

<img src="image.jpg" width="100%" style="position: absolute; z-index: 1; top: 0; left: 0" />
<div style="position: relative; z-index: 2">
...
</div>

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

Edited by Zippovich
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