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

но это - модель идиалистическая. размеры страницы на моем мониторе: 1257х865 пкс (без учета бокового скрола), картинка, соответственно, такая же. Но, как я поняла уже позже, у разных людей разные разрешения экрана, и с такой красотой будет комфортно только мне... Что делать? Попробовала обрезать до 1020 пкс - у меня смотрится убого :/ Реално ли сделать так, чтобы картинка заполняла собой весь фон на любом мониторе? (чтобы смотрелось это вот так:


может быть можно сделать "запаски" по горизонтали и вертикали, которые бы "разъезжались" в углы при изменении расширения?
Я в этом пока не очень-то разбираюсь, помогите пожалуйста...

@темы: фоновые картинки

Комментарии
04.09.2009 в 19:41

Совершенству эволюция не нужна.
Картинки не грузятся почему-то..
04.09.2009 в 19:52

Все изменится. Рано или поздно. Так или иначе.
сейчас должно заработать...
04.09.2009 в 19:52

Все изменится. Рано или поздно. Так или иначе.
вот ты мне и нужен, кстати (: мне посоветовали что-то наподобии твоего диза отсюда diary-design.diary.ru/p51727286.htm
04.09.2009 в 20:03

Совершенству эволюция не нужна.
Время...
:) Ну, этот диз как раз сюда не подходит по определению.

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

Тебе в любом случае надо подгонять картинку так, чтобы пустые пространства вокруг или внутри нее были неотделимы от рисунка. Например края картинки сделать плавно перетекающими в белый фон или фон другого цвета, а саму картинку в центре поместить и подогнать под нее блоки.

В ином случае придется все перерисовать, чтобы разделить на нужные части без ущерба для картинки..
04.09.2009 в 20:08

Все изменится. Рано или поздно. Так или иначе.
мне проще перерисовать, это все было сложено из отдельных жпг-файликов, сложить еще раз не проблема (ну еще 10 часов работы, но чего тока не жаль для хорошего дела)) я могу разрезать на 4 части и засунуть их в каждый угол, просто сбоку между небом и землей будет белое пространство, это особого ущерба не нанесет, но это точно верно? и нужно ли мне будет писать что-то еще в код? просто 4 кода для боди с указанием положения каждого кусочка?
04.09.2009 в 20:08

Все изменится. Рано или поздно. Так или иначе.
мне очень-очень хочется такой диз или очень похожий... ээээх
04.09.2009 в 20:09

Все изменится. Рано или поздно. Так или иначе.
если что - змей пойдет в экстратор, так что остается проблема с боковыми рисунками...
04.09.2009 в 20:19

Совершенству эволюция не нужна.
Время...
В общем, нужно сделать картинку для верха, две картинки для боков, и для централнього блока записей что-то повторяющееся по вертикали придумать. Я бы на твоем месте сначала поигрался с кодом, попробовал, как работают другие дизайны с картинками, и потом будет проще нарисовать.
04.09.2009 в 20:22

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

04.09.2009 в 20:58

Все изменится. Рано или поздно. Так или иначе.
две картинки для боков, по две на каждый бок или по одной? (:
и куда же именно вставлять боковые картинки - по-моему в боди больше одной не лезет... или в #wrapper или куда еще??
05.09.2009 в 04:48

Все изменится. Рано или поздно. Так или иначе.
ну ладно, с этим я вроде разобралась, кое-что перерисовала... почти все подогнала, и появилась одна мелочная проблемища!
текст Мое творчество и обрамляющая его рамка (с частью мородочки Змея) у меня стоят в пиграфе в виде одной картинки, хочу навесить на нее ссылку на другой сайт. Остальная часть туловища Змея и все что над лентой записей - в эстратопе, подогнанно 1 к 1, чтобы змей был цельный. вот так это выглядит без фона в .singlePost-е):

а теперь заполняю .singlePost фоном, такой код: .singlePost {background: url('/userdir/4/3/8/7/43873/45764240.jpg')}
и получаю дурацкую полосу на мордочке Змея! %( х( ;(

нельзя ее как-то того...?
05.09.2009 в 12:32

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

Убрать полосу из эпиграфа: #epigraph .singlePost {background:none}

Реализация вашей задумки требует учесть множество нюансов. И для этого неплохо бы знать структуру шаблона дайриков, или уметь найти селектор нужного элемента что-бы его подвинуть, изменить, присвоить фон, отступ и т.д. Для этого могу посоветовать браузер Firefefox + плагин Firebug. При помощи его легко можно найти нужный элемент в коде страницы.

З.Ы. и давать ответы на ваши вопросы проще когда можно воочию увидеть все на вашем дневнике, а не только описание на словах (к примеру используя все тот же Firebug я могу ткнуть мышкой по проблемному участку и уточнить что именно там не так, или как минимум вспомнить как этот элемент называется)
05.09.2009 в 13:58

Все изменится. Рано или поздно. Так или иначе.
Ater Спасибо за внимание (: Да, с разрешением я как-то не подумала раньше, пришлось нижнюю половину убрать и поставить повторяющуюся картинку - ИМХо так будет лучше..
Про устройство дайри и сам CSS я читала, может далеко не все, но пока мне хватило, вроде бы все стоит на своих местах теперь... только вот отображается по-разному. сейчас я только включила комп, зашла на свою страницу - а там вчерашнее оформление, еще не переделанное (хотя перед сном я все изменила и сохранила изменения). как у других юзверей не знаю.
А вот по поводу эпиграфа - что-то у меня эта команда не сработала... может оно не сразу отображаться начинает? для вас я открыла дневник, может там где-то ошибка... посмотрите, если будет минутка, пожааалуйта (:
05.09.2009 в 14:37

Какое значение имеют слова, когда в небе столько звезд и шелком трава?...
может так:
#epigraph .singlePost {background:none !important}
или
#epigraph .singlePost {background-image:none !important}
05.09.2009 в 15:06

Все изменится. Рано или поздно. Так или иначе.
что-то пока не хочет работать... :/
05.09.2009 в 19:48

Совершенству эволюция не нужна.
))
Так наверное все-таки #epigraph .singlePost .header {background:none !important}

а вторая полоса - .order_button {display:none !important}
05.09.2009 в 20:03

Все изменится. Рано или поздно. Так или иначе.
Roldo *сожеленчески качает головой...*
так тоже не получилось убрать верхнюю полосу. (зато вторую полосу убрать удалось, я сама додумалась до этого 2 часа назад)))
возможно, я где-то накосячила в кодах, вот собсна все, что я "насочиняла" на данный момент (а еще открыла доступ к дневу для тебя, может это будет полезно) :

body {margin:0; padding:0;}
#wrapper {background:url('/userdir/4/3/8/7/43873/45764237.jpg ') no-repeat top center; background-position: hight -50px !important; padding:0}
#postsArea, #commentsArea {width:665px; position:relative; left: -13px;}
#postsArea {margin-top:-20px;}
.left #postsArea, #commentsArea {margin-left:100px;}
#YaSearch, #upInChart, #postsCalendar, #albumLink, #rssLink, #myQuotLink, #myStatLink, #photolibLink, allDiaryLink, #favListLink, #pchListLink, #communityCatalogueLink, #myCommunitiesLink, #randomDiaryLink, #diarySpiritLink, #diarySupportLink, #paySupportLink, #faqLink, #more_login, #tagslistlink, #headlineList, #comments, #subscribe, #addToQuote, #subscribeEmail, #upInChurt, #mainpageLink, #iAmQuit, #myLinksLink, #myProfileLink, #authorFav, #authorQuot, #authorLiks, #authorAlbum, #authorRSS, #writeToAuthor, #subscribeEmail, #addToFav, #unsubscribeEmail, #delFromFav, #myFavLink {display:none}
#side h1 {display:none}
#side {margin-top:50px;}
#epigraph {background:url('/userdir/4/3/8/7/43873/45764234.jpg') background-position: hight -50px !important; }
.singlePost {background: url('/userdir/4/3/8/7/43873/45764240.jpg')}
.singlePost {margin-top:295px;}
#epigraph .singlePost {background:none}
#wrapper{position:relative;}
#epigraph .singlePost {background-image:none !important}
.order_button {display:none}
#addCommentArea_title, .formcontainer {margin-bottom:256px;}
#addCommentArea {margin-left: 10px !important;}
#addCommentArea {margin-right: 10px !important;}
.formcontainer{margin-left: 10px !important;}
.formcontainer{margin-right: 10px !important;}
.prevPostLink, .nextPostLink {display:none}
#myDiaryLink { display:block !important; width:50px !important; height:30px !important; line-height:150px !important; overflow:hidden !important; background: url('/userdir/4/3/8/7/43873/45774551.jpg') 2px 4px no-repeat !important;}
#sortFromBegin {display:none !important;}
#sortFromEnd {display:none !important;}
#sortFromLastComment {display:none !important;}
.order_button {display:none}
#extratop {height: 225px; background:url("secure.diary.space/userdir/4/3/8/7/43873/457642...") no-repeat bottom;}
#extratop {margin-left: 65px !important;}
.prevPostLink {display:none}
#epigraph .singlePost .header {background:none !important}