Jump to content
  • 0

Меняющейся фон

Clubberry

Asked by Clubberry,

 Share

Question

Clubberry Explorer

Clubberry

Posted
Posted (edited)

Есть сайт-визитка (уже наверное надоел :) ), в качестве фона фотография. Как сделать, чтобы фон при каждом обновлении (посещении сайта) менялся?

Edited by Clubberry
Link to comment
Share on other sites

29 answers to this question

Recommended Posts

  • 0
Clubberry Explorer

Clubberry

Posted
  • Author
Posted

Желательно сделать это при помощи HTML + CSS, ибо знания только этого имеется, но можно и при помощи JS (базовые знания есть), но желательно тогда какие-то фреймворки, что ли. :)

Link to comment
Share on other sites
  • 0
Vlad Explorer

Vlad

Posted
Posted
Желательно сделать это при помощи HTML + CSS, ибо знания только этого имеется, но можно и при помощи JS (базовые знания есть), но желательно тогда какие-то фреймворки, что ли. :)

Раз фрейморки хочется, то вот примеры:

http://charles-harvey.co.uk/plugins/random...ndImageChanger/

http://forum.jquery.com/topic/random-css-f...ackground-image

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted

Нафига какие-то фреймворки?

Тут скрипта на пару строк.

Есть массив с нужными картинками. Из него случайным образом выбирается изображение и назначается фоном нужному элементу.

Link to comment
Share on other sites
  • 0
Clubberry Explorer

Clubberry

Posted
  • Author
Posted
на стороне сервера выбирать, и при выводе коде html вставлять фон примерно таким образом: 
<body style="background: url(bg_748.png);">

Т.е. мне надо примерно так сделать?

background: url(../img/me_wide.jpg), url(../img/woodenbg.jpg);

Попытался, как-то не то. При обновлении просто грузится сначала бекграунд колор, потом одно фото, затем главное фото и оно же остаётся. :D

Другого выхода нет, если делать при помощи js, ибо в нём я не совсем разбираюсь.

Спасибо за ссылки, буду изучать. :)

Нафига какие-то фреймворки?

Тут скрипта на пару строк.

Есть массив с нужными картинками. Из него случайным образом выбирается изображение и назначается фоном нужному элементу.

Никто мне писать этот скрипт не будет, а сам я не смогу. Вот в чём проблема. У меня только кнопки на js получились, да и то, с большим трудом, ну и твиттер на сайт поставить.

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted
Никто мне писать этот скрипт не будет, а сам я не смогу. Вот в чём проблема. У меня только кнопки на js получились, да и то, с большим трудом, ну и твиттер на сайт поставить.

Ну, если никто раньше не отпишется, то напишу, но ближе к вечеру :)

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted

Clubberry,

Вот держи.

Вариант 1, содержит пути к картинкам в массиве, имена могут быть любые.

var bgFolder = 'bg/';
var backgrounds = [
  'bg0.jpg',
  'bg1.jpg',
  'bg2.jpg',
  'bg3.jpg',
  'bg4.jpg'
];
var rndBg = Math.floor(Math.random() * 5);
document.body.style.backgroundImage = 'url(' + bgFolder + backgrounds[rndBg] + ')';

Вариант 2. Не нужно забивать картинки в массив. Но имена картинок должны быть одинаковые и отличаться только цифрой

var bgPath = 'bg/bg';
var imagesNumber = 5;
var rndBg =  Math.floor(Math.random() * imagesNumber);
document.body.style.backgroundImage = 'url(' + bgPath + rndBg + '.jpg)';

Link to comment
Share on other sites
  • 0
Clubberry Explorer

Clubberry

Posted
  • Author
Posted
Clubberry,

Вот держи.

Вариант 1, содержит пути к картинкам в массиве, имена могут быть любые.

var bgFolder = 'bg/';
var backgrounds = [
  'bg0.jpg',
  'bg1.jpg',
  'bg2.jpg',
  'bg3.jpg',
  'bg4.jpg'
];
var rndBg = Math.floor(Math.random() * 5);
document.body.style.backgroundImage = 'url(' + bgFolder + backgrounds[rndBg] + ')';

Вариант 2. Не нужно забивать картинки в массив. Но имена картинок должны быть одинаковые и отличаться только цифрой

var bgPath = 'bg/bg';
var imagesNumber = 5;
var rndBg =  Math.floor(Math.random() * imagesNumber);
document.body.style.backgroundImage = 'url(' + bgPath + rndBg + '.jpg)';

Прости за тупость, но как мне это правильнее привязать к html, ибо я в принципе сделал пути такие как у тебя в коде, имена такие же, количество уменьшил до 2, привязал к html, но не работает. :)

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted
Прости за тупость, но как мне это правильнее привязать к html, ибо я в принципе сделал пути такие как у тебя в коде, имена такие же, количество уменьшил до 2, привязал к html, но не работает. :)

А скрипт случайно не в head засунул? В данном случае он должен находится в боди и чем выше, тем лучше.

Link to comment
Share on other sites
  • 0
Clubberry Explorer

Clubberry

Posted
  • Author
Posted (edited)

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Artem Korolenko + Graphic designer</title>
		<meta name="author" content="Artem Korolenko" />
		<meta name="revised" content="24/01/2011" />
		<meta name="description" content="Artem Korolenko is a web and graphic designer." />
		<meta name="keywords" content="Web design, Graphic design, GUI, Icon, Customization, HTML, CSS, XHTML, HTML5, CSS3, Web, Artem, Korolenko, Clubberry" />
<link rel="stylesheet" type="text/css" href="inc/style.css" />
<script type="text/javascript" src="inc/script.js"></script>
</head>

<body>
<script type="text/javascript">
var bgPath = 'img/';
var imagesNumber = 2;
var rndBg =  Math.floor(Math.random() * imagesNumber);
document.body.style.backgroundImage = 'url(' + bgPath + rndBg + '.jpg)';
</script>
<div class="floating">
I'm just another mr. «designer» from Ukraine<br />
I have a strong opinion in web and graphic design<br />
You can check my works on <a href="http://dribbble.com/Clubberry" target="_blank" class="dribbble links">dribbble</a> 
	and <a href="http://clubberry.deviantart.com/" target="_blank" class="deviantart links">deviantart</a> <br />
Also follow me on <a href="http://twitter.com/#!/Clubb3rry" target="_blank" class="twitter links">twitter</a> 
	or just <a href="mailto:artkorolenko@russia.ru?Subject=Hello!" class="hello links">say hello</a><br />
</div>

<div class="icons">
	<a href="http://cargocollective.com/artkorolenko" target="_blank"><img class="icon" alt="Cargo" src="img/icons/bw/cargo_16.png" /></a> 
		<a href="http://clubberry.deviantart.com/" target="_blank"><img class="icon" alt="deviantART" src="img/icons/bw/deviantart_16.png" id="deviantart" width="16" height="16" onmouseover="mouseOver1()" onmouseout="mouseOut1()" /></a> 
		<a href="http://dribbble.com/Clubberry" target="_blank"><img class="icon" alt="Dribbble" src="img/icons/bw/dribbble_16.png" id="dribbble" width="16" height="16" onmouseover="mouseOver2()" onmouseout="mouseOut2()" /></a> 
		<a href="http://www.facebook.com/iksdejkee" target="_blank"><img class="icon" alt="Facebook" src="img/icons/bw/facebook_16.png" id="facebook" width="16" height="16" onmouseover="mouseOver3()" onmouseout="mouseOut3()" /></a> 
		<a href="http://www.flickr.com/photos/iksde/" target="_blank"><img class="icon" alt="Flickr" src="img/icons/bw/flickr_16.png" id="flickr" width="16" height="16" onmouseover="mouseOver4()" onmouseout="mouseOut4()" /></a> 
		<a href="http://www.lastfm.ru/user/WebScUm" target="_blank"><img class="icon" alt="Last.fm" src="img/icons/bw/lastfm_16.png" id="lastfm" width="16" height="16" onmouseover="mouseOver5()" onmouseout="mouseOut5()" /></a> 
		<a href="skype:man.hunt-"><img class="icon" alt="Skype" src="img/icons/bw/skype_16.png" id="skype" width="16" height="16" onmouseover="mouseOver6()" onmouseout="mouseOut6()" /></a>

		<a href="http://iksde.tumblr.com/" target="_blank"><img class="icon" alt="Tumblr" src="img/icons/bw/tumblr_16.png" id="tumblr" width="16" height="16" onmouseover="mouseOver7()" onmouseout="mouseOut7()" /></a> 
		<a href="http://twitter.com/#!/Clubb3rry" target="_blank"><img class="icon" alt="Twitter" src="img/icons/bw/twitter_16.png" id="twitter" width="16" height="16" onmouseover="mouseOver8()" onmouseout="mouseOut8()" /></a>
		<a href="http://vimeo.com/clubberry" target="_blank"><img class="icon" alt="Vimeo" src="img/icons/bw/vimeo_16.png" id="vimeo" width="16" height="16" onmouseover="mouseOver9()" onmouseout="mouseOut9()" /></a>
		<a href="mailto:artkorolenko@russia.ru?Subject=Hello!" target="_blank"><img class="icon" alt="Email" src="img/icons/bw/email_16.png" /></a>
</div>

</body>
</html>

CSS

body {
	background-color: #E6E6E6;
	font-family: "Trebuchet MS", Georgia, Times New Roman, serif;
	font-style: italic;
	font-size: 12px;
	color: #353535;
}

img {
	border:none;
}

a {
	text-decoration: none;
}

a.links {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5s ease;
}

a.dribbble {
	color: #ea4c89;
	background: #ffffff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 1px;
	margin: -3px;
}

a.dribbble:hover {
	color: #ffffff;
	background: #353535;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 1px;
	margin: -3px;
}

a.deviantart {
	color: #425349;
	background: #ffffff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 1px;
	margin: -3px;
}

a.deviantart:hover {
	color: #ffffff;
	background: #353535;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 1px;
	margin: -3px;
}

a.twitter {
	color: #46d1ff;
	background: #ffffff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 1px;
	margin: -3px;
}

a.twitter:hover {
	color: #ffffff;
	background: #353535;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 1px;
	margin: -3px;
}

a.hello {
	color: #000000;
	background: #ffffff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 1px;
	margin: -3px;
}

a.hello:hover {
	color: #ffffff;
	background: #353535;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 1px;
	margin: -3px;
}

.icon {
	opacity: 0.25;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */
	filter: alpha(opacity = 25); /* IE 5-7 hack */
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all  0.5s ease;
}

.icon:hover {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 hack */
	filter: alpha(opacity = 100); /* IE 5-7 hack */
}

.floating {
	position: absolute;
	bottom: 40%;
	left: 50%;
	margin-left: -150px;
	width: 300px;
	line-height: 18pt;
}

.icons {
	position: absolute;
	bottom: 37.5%;
	left: 50%;
	margin-left: -150px;
	width: 300px;
}

Edited by Clubberry
Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted
Я не стал писать имя картинки потому что их же много и это просто путь ко всем картинкам которые будут использоваться.

Всё равно не работает. :)

Имя картинки нужно! Если только картинки у тебя не имеют название 0.jpg, 2.jpg и т.д.

Путь к картинке складывается из части bg/bg + номер картинки + расширение. Таким образом получаем bg/bg1.jpg (например).

Link to comment
Share on other sites
  • 0
Clubberry Explorer

Clubberry

Posted
  • Author
Posted 

var bgPath = 'img/bg0.jpg';
var imagesNumber = 2;
var rndBg =  Math.floor(Math.random() * imagesNumber);
document.body.style.backgroundImage = 'url(' + bgPath + rndBg + '.jpg)';

Вот так я сделал. Причём, если я вместо * ставлю любое число или убераю её вообще, то фон появляется.

Link to comment
Share on other sites
  • 0
Clubberry Explorer

Clubberry

Posted
  • Author
Posted
Clubberry,

А дай ссылку на страницу.

Я на харде делаю. Могу дать ссылку чтобы скачать, другой возможности нет с моим ограниченным интернетом на работе. Ну или могу вечером дома загрузить куда-нибудь. :)

Link to comment
Share on other sites
  • 0
Clubberry Explorer

Clubberry

Posted
  • Author
Posted
Clubberry,

Что ж за работа такая в выходной?

Давай ссылку :) Только со всей структурой (html + css + папка с картинками).

Я тестировщик ПО. Работаю в http://isd.dp.ua/. Да и 23 февраля не выходный, в Украине по крайней мере. :D

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted
Ещё пару вопросиков. :)

1) Почему скрипт нужно кидать в <body></body>?

Потому что этот скрипт будет исполнятся по ходу кода, т.е. как только браузер его увидит. Если его поместить в head, но он начнет исполнятся до того как появится элемент body на странице, и, не найдя его выведет ошибку.

Можно поместить его и в head, но тогда нужно заключить его в обработчик собития:

window.onload = {

}

Но тогда фон загрузится уже после полной загрузки всей страницы.

2) Если мне нужно будет, чтобы рандомно грузился CSS этот скрипт будет работать?

Будет. Фактически он генерирует любое число от 0 до n (где n — общее число файлов в папке минус один). Это число добавляется как окончание к имени файла, потом к нему добавляется нужное расширение.

Link to comment
Share on other sites
  • 0
sotrudnik Explorer

sotrudnik

Posted
Posted

var bgPath = 'img/bg0.jpg';

var imagesNumber = 2;

var rndBg = Math.floor(Math.random() * imagesNumber);

document.body.style.backgroundImage = 'url(' + bgPath + rndBg + '.jpg)';

как суда добавить чтобы картинка выводилась width="100%" height="100%"

не повторялась

и была по центру по горизонтали и по вертикали?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept