forum.boolean.name

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 адреса это ни есть гуд.

ABTOMAT 12.03.2015 05:12
Ответ: Фоновое изображение по ширине сверху
 
На правах частного мнения:

Ящитаю что единственная цель mod_rewrite'а — это любой запрос направить на index.php, который в себе уже сам раздуплит, что ему там в GET'е передано.
Плюс такого подхода в том, что можно сделать единую систему раздупления GET-запросов, через которую будет проходить всё.

Код:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^.*$ index.php [NC,L]
И если вы считаете, что это расточительно — раздуплять строку гет-запроса в пыхе, то это просто копейки по сравнению с... да с чем угодно, с доставанием записей из базы данных, например.

Trazzy 12.03.2015 15:48
Ответ: Фоновое изображение по ширине сверху
 
Вложений: 2
Цитата:
Сообщение от ABTOMAT (Сообщение 294038)
Ящитаю что единственная цель mod_rewrite'а — это любой запрос направить на index.php, который в себе уже сам раздуплит, что ему там в GET'е передано.
Я именно этого и пытаюсь добиться :)
...но продолжаю бороться со слешем,
который как я понимаю сбивает правильный путь.

п.с. над "2015" указан принятый $_SERVER['REQUEST_URI']

ABTOMAT 12.03.2015 15:59
Ответ: Фоновое изображение по ширине сверху
 
Цитата:
Сообщение от Trazzy (Сообщение 294048)
Я именно этого и пытаюсь добиться :)
...но продолжаю бороться со слешем,
который как я понимаю сбивает правильный путь.

п.с. над "2015" указан принятый $_SERVER['REQUEST_URI']
Я же выше дал рабочий .htaccess!

Trazzy 12.03.2015 16:10
Ответ: Фоновое изображение по ширине сверху
 
получается что нет...

localhost/blablabla - good
localhost/blablabla/ - bad
localhost/index.php - good
localhost/index.php/ - bad
localhost/index.php?act=news - good
localhost/index.php?act=news/ - good

Отображение страницы сбивается когда в пути похоже на директорию.
Единственное что приходит в голову - передавать URI без слешей.

Randomize 12.03.2015 18:19
Ответ: Фоновое изображение по ширине сверху
 
Цитата:
Сообщение от Trazzy (Сообщение 294050)
получается что нет...
Цитата:
Сообщение от Randomize (Сообщение 294024)
игнорировать слеш
PHP код:
trim($_GET['act'], '/'); 
Только так тогда.
Trim отсекает символы в начале и в конце строки, указанные во втором параметре (в данном случае это слеш).

Trazzy 12.03.2015 21:24
Ответ: Фоновое изображение по ширине сверху
 
Вложений: 1
Randomize, это не поможет, т.к. если я перейду например по http://localhost/blablabla/ скрипт хоть и затримит принятое значение, но все равно blablabla будет восприниматься как директория из-за чего не отобразятся изображения, стили и др. подключаемые файлы.

Можешь протестировать на локалхосте:

Trazzy 12.03.2015 21:39
Ответ: Фоновое изображение по ширине сверху
 
Цитата:
Сообщение от Trazzy (Сообщение 294050)
Единственное что приходит в голову - передавать URI без слешей.
Это можно сделать через .htaccess с помощью регулярного выражения или я ошибаюсь?..
(иначе придется редиректить)

Randomize 12.03.2015 22:54
Ответ: Фоновое изображение по ширине сверху
 
Цитата:
Сообщение от Trazzy (Сообщение 294065)
из-за чего не отобразятся изображения, стили и др. подключаемые файлы.
А, вот в чём проблема.
Ну тут 3 варианта:
1) Прописать в html в <head>:
PHP код:
<head>
...
<base href="/">
...
</head> 
* Где "/" наш путь от корня домена.

Минус в том, что не будут работать например якоря

2) Сразу писать все пути внутри html от слеша
вместо style.css писать /style.css и тд.

3) Подставлять в пути директорию, определённую в php (в данном случае относительную):
PHP код:
$webPath = (rtrim(str_replace('\\', '/', dirname($_SERVER['PHP_SELF'])), '/') . '/'); 
и использовать так
PHP код:
<img src="<?= $webPath; ?>images/some.png" alt="" />
Последний как бы универсальный.

Trazzy 13.03.2015 16:19
Ответ: Фоновое изображение по ширине сверху
 
Отлично! Буду использовать 2-й вариант: лишний слеш не помешает :)


Часовой пояс GMT +4, время: 14:54.

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