Фоновый рисунок

Mr_ILYAS · August 31, 2012

Я уже замучился. . . Никак не могу сделать, чтобы картинка растягивалась на всё окно фрейма.

Вот index.html:


<!DOCTYPE html>
<html>
    <head>
        <title>Successful Life</title>
        <meta charset="utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
    </head>
    <frameset rows="40% , *" frameborder="0">
	    <frame src="head.html" name="HEAD" scrolling="no" noresize>
	    <frameset cols="25% , *">
	        <frame src="menu0.html"  style="background: #fda" name="MENU0" noresize>
                <frame src="content0.html" style="background: #abc" name="CONTENT0" noresize>
	    </frameset>
     </frameset>
</html>

Создаёт фрейм внутри которого еще 2 фрейма:

Высота верхнего участка 40%, в него то мне и надо картинку впихнуть на всю ширину и высоту

А вот head.html:


<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8">
        <style>
            div {
                background: url(Logo.png) 100% 40% no-repeat;
            }
        </style>
    </head>
    <body>
        <div style="height:40%">...</div>
    </body>
</html>

Edited August 31, 2012 by Mr_ILYAS

solovets-denis · August 31, 2012

Во-первых, укажите в index.html высоту фрейма.

Во-вторых, запись background: url(Logo.png) 100% 40% no-repeat; двигает фоновое изображение на 100% от левого края и на 40% от верхней границы. В вашем случае просто пропишите background: url(Logo.png) left top no-repeat;.

В третьих, "вытягивание" фона - штука весьма специфическая. Тут и пропорции изображения будут потеряны, да и изображение должно быть либо весьма большим, либо однородным, чтобы на мониторах с большим разрешением не появился эффект размытия. Растянуть картинку как фон можно так:

img {display:block;
	content:""; // для старых версий Оперы
	width:100%;
	height:40%;}

Итак, мы превратили изображение в блочный элемент, задали ей высоту и ширину. Если есть необходимость разместить на картинке что-то еще, то код будет таким:

img {display:block;
	content:""; // для старых версий Оперы
	z-index:1;}

img, div {position:absolute;
	width:100%;
	height:40%;}

div {z-index:2;}

И код head.html станет таким:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img {display:block;
				content:""; // для старых версий Оперы
				z-index:1;}

			img, div {position:absolute;
				width:100%;
				height:40%;}

			div {z-index:2;}
		</style>
	</head>
	<body>
	<img src="image/pass" alt="" />
        <div>...</div>
	</body>
</html>

Стили лучше убирать в CSS-файл.

Edited August 31, 2012 by solovets-denis

Mr_ILYAS · September 1, 2012

Мне нужно чтобы картика была именно фоном, то есть без тега img

Я поглядел на ответ, протестировал.

Что даёт z-index?

display:block и вот это непонятно. . .

Sign In

Фоновый рисунок

Question

Mr_ILYAS

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

solovets-denis

Link to comment

Share on other sites

Mr_ILYAS

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information