Подгонка фонового рисунка

Gambini · May 4, 2012

Здравствуйте! У меня фоновый рисунок размером 1600х1000 а монитор 1280х800. Когда я вставляю фон некоторая часть фона выходит за рамки разрешения. Как можно сделать, чтобы фон отображался полностью?

Sensei · May 4, 2012

background-size: cover но это css3 в старых браузерах работать не будет.

wildhind · May 4, 2012

нет, cover — это фон масштабируется пропорционально таким образом, чтобы покрывать весь элемент.

То есть, если пропорции фоновой картинки будут такими же, как пропорции элемента, то фон отобразится полностью. Иначе фон будет выходить за пределы элемента и обрезаться.

Если на css3, то background-size: 100% 100%;

а если надо, чтобы работало и в старых браузерах тоже, то больше смысла абсолютно спозиционировать тэг img под содержимым элемента.

Sensei · May 4, 2012

ну да, кавер растягивает изображение, зато на весь экран и не зависит от пропорций. согласен, не всегда нужно именно это.

alexandr_v-vich · May 4, 2012

cover — сохранит пропорции, но выйдет за пределы.

100% 100% — не выйдет за пределы, но исказит изображение, при разных пропорциях экрана и изображения.

contain — сохранит пропорции и не выйдет за пределы, но не покроет ту часть блока (или body, на что фон, в общем), которая выйдет за пропорции изображения.

Если фон с конкретным изображением, узором или фото, то нужен contain. Если текстура, то вообще ничего не надо, репит только поставить. 100% 100% с трудом представляю где можно забацать. Cover тоже не частый и не лучший способ, и думаю, не ваш, Gambini.

Edited May 4, 2012 by alexandr_v-vich

goldoba · May 5, 2012

Привет только учусь верстать возникла ситуация ставлю картинку на bg по средствам css но она не отображается вставляю текст в html, блок растягивается и картинка отображается, min-height:100% и height:100% как будто не работают. Так должно быть или что-то не так делаю?

ps блок вложенный в другой в котором bg повторяется по вертикали и картинка отображается а в этом блоке bg не должен повторятся.

Vin · May 5, 2012

Привет только учусь верстать возникла ситуация ставлю картинку на bg по средствам css но она не отображается вставляю текст в html, блок растягивается и картинка отображается, min-height:100% и height:100% как будто не работают. Так должно быть или что-то не так делаю?

Покажите код. Элемент, которому задаётся фон блочный или строчный? Если строчный, нужно прописать display: block.

ps блок вложенный в другой в котором bg повторяется по вертикали и картинка отображается а в этом блоке bg не должен повторятся.

Увы, из-за отсутствия знаков препинания я не смог понять это предложение :dash:

goldoba · May 5, 2012

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>My One Site</title>
</head>
<body>
	<div id="os">
		<header>
			<div id="head_bg">
				<div id="head_bg_1">
					<div id="hms">
						<a href="#"><img src="images/home.png" title="Home page"></a>
						<a href="#"><img src="images/mail.png" title="Contact Email"></a>
						<a href="#"><img src="images/search.png" title="Search"></a>

					</div>
					<nav>
						<ul>
							<li><a href="#">ABOUT US</a></li>
							<li><a href="#">SERVICES</a></li>
							<li><a href="#">HOSTING</a></li>
							<li><a href="#">DESING</a></li>
							<li><a href="#">CONTACTS</a></li>
						</ul>
					</nav>
				</div>
				<div id="head_bg_2">
					<hgroup>
						<h3>COMPANY SLOGAN</h2>
						<h1>GOES HERE</h1>
					</hgroup>
				</div>
			</div>

	</header>
		<div id="section">
			<section>
				<article>

				</article>
			</section>
		</div>
	</div>
</body>
</html>

CSS

section, article{display:block;}
nav{
	display:block;
	position:relative;
	top:80px;
	left:260px;}
nav li{
	display:block;
	float:left;
	font: bold 12px;}
nav li a{	
	margin-left:20px;
	text-decoration:none;
	color:#007ca3;
}
nav li a:hover{
	text-decoration:underline;
}
html, body{
	margin:0;
	padding:0;
	height:100%;
	width:100%;
}
#os{
	width:796px;
	margin:0;
	padding:0;
	min-height:100%;
	background: #fff url(/images/bgb.gif) repeat-y;
}
#head_bg_1{
	width:778px;
	height:153px;
	background: url(/images/head.jpg) no-repeat;
}
#head_bg_2{
	width:778px;
	height:171px;
	background:url(/images/head1.jpg) no-repeat;
}
#hms{
	position:relative;
	top:131px;
	left:90px;
}
hgroup h3{
	margin:0;
	padding:0;
	color:#fff;
}
hgroup h1{
	margin:0;
	padding:0;
	color:#fff;
	padding-left:100px;
}
hgroup{
	padding:40px 0 0 70px;
}
#section{
	width:778px;
	min-height:100%;
	background:#fff url(/images/bgsection.jpg) no-repeat;
}

проблемы конкретно с id section

Edited May 5, 2012 by goldoba

alexandr_v-vich · May 5, 2012

goldoba, что за min-height: 100%? Пишите просто height: 100%; Это во-первых.

Во-вторых, чтобы был отображён фон, который у „os“, нужно у section это

background:#fff url(/images/bgsection.jpg) no-repeat;

заменить на это

background: url(/images/bgsection.jpg) no-repeat;

100% как бы закрывает 100%!

А в-третьих, и самое главное — вы чего в чужую тему залезли?

Edited May 5, 2012 by alexandr_v-vich

Sign In

Подгонка фонового рисунка

Question

Gambini

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Sensei

Link to comment

Share on other sites

wildhind

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

alexandr_v-vich

Link to comment

Share on other sites

goldoba

Link to comment

Share on other sites

Vin

Link to comment

Share on other sites

goldoba

Link to comment

Share on other sites

alexandr_v-vich

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information