X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Растяжения фона на весь экран с обрезанием.
lensoy
lensoy
Topic Starter сообщение 14.12.2011, 2:29; Ответить: lensoy
Сообщение #1


Привет, читающий сейчас это сообщение :rolleyes:
Помоги! Как сделать в виде фона сайта, картинку? Да так, чтобы она растягивалась на весь экран. Но это еще не все, ведь экраны у всех разные. От виндскина до эрана мобильного телефона. Надо сделать так, чтобы края у фона обрезались, в зависимости от экрана пользователя(а точнее от рабочего поля браузера у пользователя, конечно же.) Картинка фона обрезается слева и справа если экран пользователя более высокий, чем картинка. Обрезается снизу и сверху, если экран, соответственно, более широкий.
Я рассчитываю на тебя!

Вот небольшой наглядный пример, если ты еще не совсем понял, чего мне нужно:
http://i.imgur.com/64YKf.jpg
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LoaD_hb
LoaD_hb
сообщение 14.12.2011, 10:26; Ответить: LoaD_hb
Сообщение #2


Возможно поможет

[CSS]body {
background: url(путь к картинке.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
height:100%;
}
[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lensoy
lensoy
Topic Starter сообщение 14.12.2011, 19:38; Ответить: lensoy
Сообщение #3


Спасибо тебе, LoaD! Сработало на ура!)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lensoy
lensoy
Topic Starter сообщение 29.12.2011, 2:30; Ответить: lensoy
Сообщение #4


А можно ли проделать такое с флешь роликом?
Не в виде фона. А просто растянуть флешь ролик на весь экран?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Сергей Шолохов
Сергей Шолохов
сообщение 29.12.2011, 2:51; Ответить: Сергей Шолохов
Сообщение #5


Можно.
У флеш ролика даём высоту и ширину 100%
В css:
[CSS]
html,body{
height:100%;
}
[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lensoy
lensoy
Topic Starter сообщение 29.12.2011, 16:22; Ответить: lensoy
Сообщение #6


Сделал так:
<html>

<head>
<style>
html,body{
height:100%;
}
</style>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript">
var params = {wmode:'transparent', scale:'noscale', loop:'false', menu:'false'};
swfobject.embedSWF('/flash/swf.swf','swf', '550', '400', '8.0.0',{},{},params,{});
</script>
</head>

<body>
<div id='swf'></div>
</body>

</html>


Не работает. В общем-то вот как все выглядит.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 29.12.2011, 22:01; Ответить: pavelsc
Сообщение #7


Потому что у вас размеры стоят 550х400. Надо ставить так например:
[JS]
<script type="text/javascript">
window.onload = function(){
var screenW = document.getElementsByTagName('body')[0].clientWidth;
var screenH = document.getElementsByTagName('body')[0].clientHeight;
var coveredH = Math.round(screenW*400/550);
var params = {wmode:'transparent', scale:'scale', loop:'false', menu:'false'};
swfobject.embedSWF('/flash/swf.swf','swf', screenW, coveredH, '8.0.0',{},{},params,{});
}
</script>
[/JS]
Это если на всю ширину. Либо screenH ставьте для размеров по высоте.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lensoy
lensoy
Topic Starter сообщение 30.12.2011, 3:32; Ответить: lensoy
Сообщение #8


pavelsc, Спасибо, ты меня просто спас. Серьезно!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lensoy
lensoy
Topic Starter сообщение 30.12.2011, 3:33; Ответить: lensoy
Сообщение #9


Добавил маленькую тонкость. Теперь все идеально.
<html>

<head>
<style>
html,body{
overflow:hidden;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript">
window.onload = function(){
var swf_width = 550; var swf_height = 400;
var screenW = document.getElementsByTagName('body')[0].clientWidth;
var screenH = document.getElementsByTagName('body')[0].clientHeight;
var coveredH = Math.round(screenW*swf_height/swf_width);
var coveredW = Math.round(screenH*swf_width/swf_height);
var params = {wmode:'transparent', scale:'scale', loop:'false', menu:'false'};
if (screenW/screenH>=swf_width/swf_height) swfobject.embedSWF('/flash/swf.swf','swf', screenW, coveredH, '8.0.0',{},{},params,{});
else swfobject.embedSWF('/flash/swf.swf','swf', coveredW, screenH, '8.0.0',{},{},params,{});
}
</script>
</head>

<body>
<div id='swf'></div>
</body>

</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lensoy
lensoy
Topic Starter сообщение 30.12.2011, 4:30; Ответить: lensoy
Сообщение #10


Хотя, вот еще маленький вопросик: когда идет растяжение по высоте, ролик всегда обрезается с правого боку. Как можно сделать, чтобы он обрезался с двух краев и центр флешки оставался по-прежнему в центре?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Нужна база форумов тематики криптовалюты. Гео весь мир.
2 Mixatraider 2191 27.7.2023, 22:28
автор: leviathan
Открытая тема (нет новых ответов) ClickStar.me - Топовая рекламная сеть [ Монетизируем весь мир ]
Монетизируйте свой сайт вместе с Clickstar
2 ClickStar 3115 19.12.2022, 8:59
автор: ClickStar
Открытая тема (нет новых ответов) Работа: Удаление фона с фотографий
0 upinseo 3197 18.9.2019, 12:01
автор: upinseo
Открытая тема (нет новых ответов) Разработчик (PHP, JS, Wordpress). Весь мир. Удаленно. 700$ per month
2 Le0li 2797 20.9.2017, 9:22
автор: WoWeb
Открытая тема (нет новых ответов) Вакансия. Весь мир. Программист удаленно. ЗП 50-70 тысяч.
0 dimas19 1735 26.6.2017, 11:43
автор: dimas19


 



RSS Текстовая версия Сейчас: 29.3.2024, 11:18
Дизайн