1. Начало
  2. Архив
  3. Уеб дизайн и UI технологии
  4. CSS: Backgroud min-height?! Как?

CSS: Backgroud min-height?! Как?

1

      Здравейте. Търсих из google, но не намерих  точно това, което ме интересува. Пробвах с разни неща, за които се сетих - сложих в <div> картинката, дива... display block, после му сложих min-height и изчезна картинката. Явно не става така, както си мисля. То и така както съм го направил става... все пак ще е нещо като blog (макар да е доста шаренко) и ще е SPA, но нещо не ми се получава като на този сайт: https://www.taleworlds.com/en/Games/Warband

What kind of sorcery is this :D


Ето го моето (проблема):
http://prikachi.com/images.php?images/138/7400138T.png

http://prikachi.com/images.php?images/148/7400148x.png


На този сайт, който съм дал:
1. Background-a се измества сякаш встрани.
2. Background-a се оразмерява докато прозореца не стигне до рамките на content-div. 
 

Мен ме интересува 2-рото, защото явно първото не е само css - не знам. Вие кажете.

в Уеб дизайн и UI технологии от Dimitur_Mitov (191 точки)
background css html javascript софтуерна-академия

Отговори


0

Здравей, колега

Това, което ти трябва, е да сложиш margin: 0 auto; на div-a, точно това са използвали и при направата на сайта, който си дал. Първо трябва да зададеш на div-а колко да е широк, за да се получи този ефект. Иначе и div-ът ще ти се оразмерява. Като му зададеш width той ще си остава един и същ и само разтоянието отляво и отдясно ще се оразмерява. Ето един пример, който написах набързо.

Поздрави!

от Nikolay_Radkov (2911 точки)

0
Благодаря за отговора, но на мен ми се оразмерява. Въпроса е, че при мен просто background-a се свива, но не изчезва. На този сайт, който дадох се вижда как все едно маргина става отрицателен за background-a. Помислих си, че може да стане с JS, но това, което си предложил не ми помогна. Аз го бях пробвал така или иначе. То моето е горе долу същото. Аз съм задал на всички елементи маргин 0.
от Dimitur_Mitov (191 точки)

0
help.. Не мога да го измисля.
от Dimitur_Mitov (191 точки)

0
No voodoo magic here. Само игра с относителни и абсолютни единици.
1) position: relative; left: 50%
2) margin-left: -960px;
3) voilà
Първо изместват контейнера с 50% надясно, а после го връщат с -960px наляво. Тънкия момент е при преоразмеряването, защото 50% се взимат от големината на прекия родител, който е div#outer. Той пък е голям колкото целия документ. А пък отрицателния margin си седи на -960px. Така докато margin-а не стане по-голям от left-а и спре да се мести изображението. При мен се случва като смаля прозореца на около 1200px width.
от rkunev (470 точки)