Background HTML - HTML и CSS

Guzal · 28.11.2010, 16:44

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

Код:

<style type="text/css">
   #layer1 {
    z-index: 1; /* Порядок слоев */
    width: 100%; /* Ширина слоя с фоном */
    height: 100%; /* Высота слоя с фоном */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Положение от левого края окна */
    top: 0; /* Положение от верхнего края */
   }
   #layer2 {
    position: absolute; /* Абсолютное позиционирование */
    z-index: 2; /* Порядок слоев */
   }
  </style>
 </head>
 <body>
  <div id="layer1"><img src="http://s011.radikal.ru/i316/1011/1c/8031acaffe65.jpg" width="100%" alt=""> </div>
  <div id="layer2">

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

Naive · 28.11.2010, 20:50

Код:

<body background="http://s011.radikal.ru/i316/1011/1c/8031acaffe65.jpg">

Guzal · 28.11.2010, 23:24

этот вариант не подойдет для всех фонов,
картинка попросту размножится(

Naive · 29.11.2010, 05:06

Цитата:

Сообщение от Guzal

картинка попросту размножится(

Код:

body {background-repeat: no-repeat}

Что касается именно "растягивания" изображения, все-таки это не есть гуд. если Вам так нравится эта картинка, то я бы посоветовал зациклить ее каким-нибудь образом( ну, например плавный переход в черный цвет или размазанный градиент) и установить по центру без повторений, так хотя бы можно будет привязать верстку к ней.

Alexei91 · 29.11.2010, 06:06

В CSS-файле пишите что-то типа

Код HTML:

body {
	background: url(/*путь до картинки*/) no-repeat 
/*здесь можете ещё цвет указать, например*/;
}

repeat-x
repeat-y и т.п. - циклить по X и т.п.

Guzal · 29.11.2010, 21:39

Цитата:

Сообщение от Naive

установить по центру без повторений,

вот это было бы лучше, только какк, пожалуйста скажите как на хтмл, потому что CSS мы не проходили(

Guzal · 29.11.2010, 21:52

Код:

<html>
<head>
<style>
  body
  {
  background-image: url('http://radikal.ru/F/i005.radikal.ru/1011/87/113c6c3bef9d.jpg') 
  background-repeat: no-repeat center center black
  }
</style>
</head>

если так, то картинка совсем изчезает

вот моя цель)) http://prophetofislam.com/what_do_muslims_say.php
хочу сделать фон такого типа

KPEATuBHO · 30.11.2010, 10:18

дк, если вы хотите сделать такой фон, что мешает посмотреть в исходный код то???

grafgrial · 30.11.2010, 13:59

Цитата:

дк, если вы хотите сделать такой фон, что мешает посмотреть в исходный код то???

Деиствительно...

Код:

<div id="background">
        <img src="images/background_main.jpg" width="750" height="701" alt="" />
      </div>

в css

Код:

#background {
  position: absolute;
  top: 1px;
  left: -4px;
  background-color: #2f0d01;
  width: 750px;
  overflow: hidden;
}

Guzal · 30.11.2010, 18:51

хм, конечно смотрела, но так все равно не получается, ок спасибо всем, нашла картинку побольше)

28.11.2010, 16:44	#1
Guzal Форумчанин Регистрация: 11.09.2010 Сообщений: 101	Background HTML Здравствуйте, уже второй день мучаюсь с фоновым рисунком на сайте, мудрю разные коды, но картинка не хочет замещаться по всему экрану, их появляется несколько, читала в инете, что это проблемный вопрос, самый оптимальный код получается Код: <style type="text/css"> #layer1 { z-index: 1; /* Порядок слоев / width: 100%; / Ширина слоя с фоном / height: 100%; / Высота слоя с фоном / position: absolute; / Абсолютное позиционирование / left: 0; / Положение от левого края окна / top: 0; / Положение от верхнего края / } #layer2 { position: absolute; / Абсолютное позиционирование / z-index: 2; / Порядок слоев */ } </style> </head> <body> <div id="layer1"><img src="http://s011.radikal.ru/i316/1011/1c/8031acaffe65.jpg" width="100%" alt=""> </div> <div id="layer2"> закрываю див в конце , перед боди, картинка выглядит хорошо, но если свернуть браузер ... все насмарку( видно тольно пол картинки . Подскажите что делатььь I'm a rebel. [I think positively].

28.11.2010, 23:24	#3
Guzal Форумчанин Регистрация: 11.09.2010 Сообщений: 101	этот вариант не подойдет для всех фонов, картинка попросту размножится( I'm a rebel. [I think positively].

29.11.2010, 06:06	#5
Alexei91 Заблокирован Форумчанин Регистрация: 30.12.2009 Сообщений: 544	В CSS-файле пишите что-то типа Код HTML: body { background: url(/путь до картинки/) no-repeat /здесь можете ещё цвет указать, например/; } repeat-x repeat-y и т.п. - циклить по X и т.п. Темы для WordPress. Русские WordPress шаблоны

29.11.2010, 21:52	#7
Guzal Форумчанин Регистрация: 11.09.2010 Сообщений: 101	Код: `<html> <head> <style> body { background-image: url('http://radikal.ru/F/i005.radikal.ru/1011/87/113c6c3bef9d.jpg') background-repeat: no-repeat center center black } </style> </head>` если так, то картинка совсем изчезает вот моя цель)) http://prophetofislam.com/what_do_muslims_say.php хочу сделать фон такого типа I'm a rebel. [I think positively]. Последний раз редактировалось Guzal; 29.11.2010 в 22:09.

30.11.2010, 10:18	#8
KPEATuBHO Форумчанин Регистрация: 03.09.2010 Сообщений: 197	дк, если вы хотите сделать такой фон, что мешает посмотреть в исходный код то??? быстрый хостинг. недорогие домены.

28.11.2010, 20:50	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Код: `<body background="http://s011.radikal.ru/i316/1011/1c/8031acaffe65.jpg">` Alar, верни репу!

30.11.2010, 18:51	#10
Guzal Форумчанин Регистрация: 11.09.2010 Сообщений: 101	хм, конечно смотрела, но так все равно не получается, ок спасибо всем, нашла картинку побольше) I'm a rebel. [I think positively].

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
CSS Background	bill	HTML и CSS	1	28.10.2010 22:03
background-color, не работает, почему?	shadowsman	HTML и CSS	4	22.10.2010 02:59
Background в wordpress (картинка)	ziim	WordPress и другие CMS	0	23.06.2010 16:07
Не сразу подгружается background-image	rolling	HTML и CSS	7	09.10.2009 20:38