Как да направя картинката за фон?

[Anton40]

Примерно имам картинка, която искам да сложа за фон на страницата.
Тя примерно е с размери 1000x1000. Как да направя така, че тя да покрива страницата при всички резолюций без да се повтаря надолу или на страни?

 

[sandh]

Никак, не е възможно. Ако картинката е измерена в пиксели, а резолюцията определя това колко пиксела могат да бъдат показани на екрана, няма как да постигнеш абсолютно съотношение. (е, ако ползваш векторни изображения нещата стоят по различен начин, но имплементацията е малко по-сложна)

Някои хора правят 10 вида картинки и с един скрипт слагат точното изображение спрямо резолюцията на потребителя. Не го прави. Това е абсолютно излишно нагаждане. Да не говорим, че не можеш да обхванеш всички резолюции.

Други хора разпъват изображението на 100% височина и ширина. Това също не е много добър вариант по две причини:
1. Изображението трябва да е много голямо, за да не се нарушава качеството (съответно потребителя ще зарежда страницата по-бавно и тромаво)
2. Изображението по някакъв начин или ще се изкриви или част от него ще остане скрита. Това се получава, защото няма как да спазиш съотношение на размера на изображението с размера на монитора (в частност резолюцията).

Зависи конкретно от изображението, но има няколко трика. Например можеш да поставиш градиент върху изображението, който ти подсигурява, че краищата му ще бъдат винаги в един и същ цвят. Тогава поставяш въпросния цвят за background-color и фона изглежда като естествено продължение на изображението.

Последно - не се вманиячавай на темата. Когато някой има по-голям монитор е естествено да ползва и по-голяма резолюция. Всеки ползва резолюцията, която относително му се струва най-разумна. Т.е. никой не ползва прекалено голяма резолюция, защото така няма да може да вижда текста. Никой не ползва прекалено малка резолюция, защото така губи пространство от екрана. Така, че не се притеснявай за това - погледни сайтовете, които ползваш всеки ден под различни резолюции и ще видиш, че подобна конвенция не се спазва никъде.

 

[I_V_O]

Аз съм на мение, че в някои случаи е необходимо да се поставя фона според резолюцията, защото при някои дизайнерски решения просто няма друг начин и е напълно постижимо да се фиксират най-популярните резолюции.
И все пак ако решиш да правиш както колегата ти каза да не правиш, това ще ти помогне:

[js]
var CURRENT_PAGE_WIDTH = parseFloat( $(document).width() );
var footerImg;

if( CURRENT_PAGE_WIDTH <= 1024 )
footerImg = "img/footer/footer_w1024.png";
else if( CURRENT_PAGE_WIDTH <= 1280 )
footerImg = "img/footer/footer_w1280.png";
else if( CURRENT_PAGE_WIDTH <= 1366 )
footerImg = "img/footer/footer_w1366.png";
else if( CURRENT_PAGE_WIDTH <= 1440 )
footerImg = "img/footer/footer_w1440.png";
else if( CURRENT_PAGE_WIDTH <= 1680 )
footerImg = "img/footer/footer_w1680.png";
else if( CURRENT_PAGE_WIDTH <= 1920 )
footerImg = "img/footer/footer_w1920.png";

$('#main_wrapper')css('backgroundImage',"url('" + footerImg + "');");
[/js]

 

[sandh]

Възможно е да има частни случаи, в които наистина се налага. В общия случай обаче този сорт теми се пораждат от някакъв криворазбран перфекционизъм: "Искам да е еднакво и на телефона ми и на телевизора в хола"

Иначе може да ползваш просто screen.width и screen.height, за да определиш резолюцията. Кода горе изисква инклудване на библиотека и до колкото мога да предположа няма да покаже коректни резултати ако прозореца например се оразмери по някакъв начин примерно до 600px в ширина, документът се зареди и след това се максимизира. Тук вече идва проблемът с големината на прозореца, не само на екрана.

P.S. - я, още един фен на лулите

 

[tedo96]

http://fridaycode.net/scalable-full-body-background-with-css/