ფონის სურათის გადატვირთვის შესაძლებლობა ბრაუზერის ფანჯრის მთელ სიგანეზე CSS– ის გამოყენებით მხოლოდ მისი უახლესი სპეციფიკაციის - CSS3 გამოშვების შემდეგ გამოჩნდა. სამწუხაროდ, ჯერჯერობით ვებ – სერფერების დიდი რაოდენობა იყენებს ადრეულ ბრაუზერებს, რომლებსაც არ ესმით CSS3 დაზუსტება. ამიტომ, თქვენ უნდა გააკეთოთ არჩევანი - ან გამოიყენოთ ნაკლებად მოსახერხებელი, მაგრამ ჯვარედინი ბრაუზერის გადაწყვეტა, ან მაღალტექნოლოგიური, მაგრამ შეზღუდული აუდიტორიისთვის. მოდით განვიხილოთ ორივე ვარიანტი.
აუცილებელია
HTML და CSS– ის ძირითადი ცოდნა
ინსტრუქციები
Ნაბიჯი 1
პირველი ვარიანტი ემყარება CSS ენის ადრინდელ სპეციფიკაციებს. თქვენ უნდა შექმნათ HTML კოდის სტრუქტურა, რომელსაც აქვს ორი გადაფარებული ფენა, ერთი ზემოთ. შრეები (div) შეიძლება გადაჭიმული იყოს ეკრანის სიგანეზე ძველი კასკადური სტილის აღწერის ენის სპეციფიკაციით. ფენების ქვედა ნაწილში უნდა განათავსოთ ფონის სურათი, ხოლო ზედა ნაწილში განთავსდება გვერდის მთელი შინაარსი. დოკუმენტის ტექსტში ასეთი სტრუქტურა შეიძლება ასე გამოიყურებოდეს:
ეს იქნება გვერდის შინაარსი
და ამ სტრუქტურის სტილის აღწერა უნდა განთავსდეს სათაურის ნაწილში. მაგალითად, ეს:
html, კორპუსი {
ზღვარი: 0px;
სიმაღლე: 100%;
}
# ფონზე {
პოზიცია: აბსოლუტური;
სიგანე: 100%;
სიმაღლე: 100%;
}
# სხეული {
პოზიცია: აბსოლუტური;
სიგანე: 100%;
სიმაღლე: 100%;
z- ინდექსი: 2;
}
აქ ფენების ID- ების ფონით (ეს არის თქვენი ფონის სურათი) და კორპუსით (ეს არის ფენის გვერდი შინაარსისთვის) დაყენებულია აბსოლუტური პოზიციონირებისთვის და 100% სიგანე და სიმაღლე. გარდა ამისა, შინაარსის ფენას ენიჭება სერიული ნომერი z-index = 2. ის განსაზღვრავს ფენების "სიღრმეს" - რაც უფრო დიდია, მით უფრო შორს მდებარეობს "ფსკერიდან". ჩვენს შემთხვევაში, ეს იქნება ფონის ფენის ზემოთ, რომელიც იყენებს ნაგულისხმევ z- ინდექსს.
ნაბიჯი 2
სრული კოდი შეიძლება ასე გამოიყურებოდეს:
html, კორპუსი {
ზღვარი: 0px;
სიმაღლე: 100%;
}
# ფონზე {
პოზიცია: აბსოლუტური;
სიგანე: 100%;
სიმაღლე: 100%;
}
# სხეული {
პოზიცია: აბსოლუტური;
სიგანე: 100%;
სიმაღლე: 100%;
z- ინდექსი: 2;
}
ეს იქნება გვერდის შინაარსი
ნუ დაგავიწყდებათ, რომ შეცვალოთ ფონური სურათის ფაილის სახელი fon.png.
ნაბიჯი 3
მეორე ვარიანტი გამოიყენებს CSS3- ში დანერგილი ფონის ზომის თვისებას. ამავე დროს, დაამატეთ მსგავსი თვისებები სტილის განმარტებებს, რომლებიც ადრე იყენებდნენ ბრაუზერებს Mozilla Firefox, Google Chrome და Opera. სტილის აღწერის ბლოკი ამ ვერსიაში შეიძლება ასე გამოიყურებოდეს:
html {
ფონი: url (fon.png) განმეორებითი ცენტრის ცენტრი დაფიქსირდა;
-webkit-background-size: ყდა;
-moz-background-size: ყდა;
-o-background-size: ყდა;
ფონის ზომა: ყდა;
}
აქ არ უნდა დაგვავიწყდეს, რომ შეცვალოთ ფონური სურათის ფაილის სახელი fon.png. თავად დოკუმენტის ძირში, ამ ვერსიაში სპეციალური კონსტრუქციები არ არის საჭირო.
