forum.boolean.name
Страница 1 из 2 1 2 >
Показывать 64 сообщений этой темы на одной странице

forum.boolean.name (http://forum.boolean.name/index.php)
-   JavaScript / HTML (http://forum.boolean.name/forumdisplay.php?f=136)
-   -   Фоновое изображение по ширине сверху (http://forum.boolean.name/showthread.php?t=19726)

Trazzy 03.03.2015 14:33
Фоновое изображение по ширине сверху
 
Вложений: 1
Подскажите как лучше (и чем) спозиционировать background, чтобы он располагался сверху по ширине клиентской области браузера.

ABTOMAT 03.03.2015 19:13
Ответ: Фоновое изображение по ширине сверху
 
http://htmlbook.ru/css/background-size

background-size: contain

Но не работает в IE8. Если надо и в нём, то придётся городить огород из <img> и блоков. Но, думаю, нет смысла так делать, если заказчику прямо не всралось чтоб это работало в IE8 и он готов за это заплатить. (Я бы в качестве graceful drgradation просто однотонный цвет вставил).

Trazzy 04.03.2015 12:33
Ответ: Фоновое изображение по ширине сверху
 
И опять автэ :)

хм, не думал что так всё просто...
Но в моем варианте мне наверное больше подходит cover чем contain, который кстати не сработал как показано в примерах.
З.Ы. IE пока не интересует. Хотя хотелось бы увидеть какие есть еще варианты реализации, кроме этого:

PHP код:
body {
    background: url('bg.jpg') no-repeat;
    background-size: cover;
} 
т.к. я как раз перед этим и сделал некую "грядку".

moka 04.03.2015 13:26
Ответ: Фоновое изображение по ширине сверху
 
https://jsfiddle.net/891vwvcL/1/

Trazzy 04.03.2015 13:32
Ответ: Фоновое изображение по ширине сверху
 
moka,

Цитата:
Сообщение от Trazzy (Сообщение 293752)
Подскажите как лучше (и чем) спозиционировать background, чтобы он располагался сверху по ширине клиентской области браузера.
:)

moka 04.03.2015 13:52
Ответ: Фоновое изображение по ширине сверху
 
Если тебе конкретно то что на скринах выше нужно, то тупо background-size: 100% auto; или background-contain, но это не красиво т.к. внизу будет цвет зеленый.

Trazzy 04.03.2015 14:07
Ответ: Фоновое изображение по ширине сверху
 
Вложений: 1
да, именно то что на скринах. фон и картинка будут другие (эти я поставил для наглядности). твой вариант с background-size: 100% auto; вполне подходит, также как и background-size: cover; ... и вот уже есть 2 варианта. осталось проверить кроссбраузерность каждого.

Результат должен быть вроде этого:

ABTOMAT 04.03.2015 22:41
Ответ: Фоновое изображение по ширине сверху
 
Поверх фона absolute-блоком внизу повесить png-шку с градиентом прозрачность-цвет фона.

Trazzy 05.03.2015 10:44
Ответ: Фоновое изображение по ширине сверху
 
остановился на варианте с background-size: 100% auto; не хочу лишних блоков. а градиент уже на картинке)
всем спасибо, на данном уровне проблема решена:)

moka 05.03.2015 13:11
Ответ: Фоновое изображение по ширине сверху
 
Не "проблема", а "задача" - это важное отличие разработчика от всех остальных - подход к делу, ментально другой. ;)

impersonalis 05.03.2015 13:56
Ответ: Фоновое изображение по ширине сверху
 
Цитата:
Сообщение от moka (Сообщение 293857)
Не "проблема", а "задача" - это важное отличие разработчика от всех остальных - подход к делу, ментально другой. ;)
Согласен, но если придраться к словам, то в научной литературе порой встречается контекстно неверный перевод слова "problem" как "проблема", хотя подразумевается "задача". Хотя, это не оправдывает некорректное использование.

Trazzy 10.03.2015 20:46
Ответ: Фоновое изображение по ширине сверху
 
Ок. Тогда новая задача:

Требуется преобразовать пути вида
http://localhost/?act=news ---> http://localhost/news
mod_rewrite?.. тогда какие использовать регулярки?


(Добавлено через 12 минут)

Нашел кое-что (пункт 4) -
при переходе по http://localhost/news скрипт (index.php) успешно принял get-значение "news",
(http://localhost/news/ - тоже принято "news", но страница отобразилась неверно).

Файл .htaccess
PHP код:
RewriteEngine On
  RewriteRule ^([a-zA-Z0-9_-]+)$ index.php?act=$1
  RewriteRule ^([a-zA-Z0-9_-]+)/$ index.php?act=$1 
Но как сделать чтобы при переходе по http://localhost/?act=news убиралось ?act= ??? :dontknow:

Randomize 11.03.2015 15:01
Ответ: Фоновое изображение по ширине сверху
 
Цитата:
Сообщение от Trazzy (Сообщение 293995)
Но как сделать чтобы при переходе по http://localhost/?act=news убиралось ?act= ??? :dontknow:
Ну rewrite это именно rewrite. Не путай с редиректом. То что ты хочешь сделать делается через редирект внутри твоего php файла.
Нечто вроде этого:
PHP код:
<?php
if (isset($_GET['act']) && $_SERVER['QUERY_STRING'] !== $_GET['act']) {
    header('Location: /' . $_GET['act']);
    exit();
}

Trazzy 11.03.2015 15:51
Ответ: Фоновое изображение по ширине сверху
 
Гудно. Значит буду использовать редирект.
Вот только не знаю что делать со слешем....

Цитата:
Сообщение от Trazzy (Сообщение 293995)
...при переходе по http://localhost/news скрипт (index.php) успешно принял get-значение "news",
(http://localhost/news/ - тоже принято "news", но страница отобразилась неверно).

Randomize 11.03.2015 18:57
Ответ: Фоновое изображение по ширине сверху
 
Цитата:
Сообщение от Trazzy (Сообщение 294023)
Вот только не знаю что делать со слешем....
Ну либо игнорировать слеш
PHP код:
trim($_GET['act'], '/'); 
Либо не подставлять его в url.
Второе предпочтительнее ведь когда у одной страницы есть 2 адреса это ни есть гуд.


Часовой пояс GMT +4, время: 15:50.
Страница 1 из 2 1 2 >
Показывать 64 сообщений этой темы на одной странице

vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot