В заголовок сайта картинка вставляется тремя способами:
- фоном для единого рисунка. Текст будет располагаться поверх фотографии.
- изображением-ссылкой, когда отсутствует текст.
- с помощью :before и :after для резиновых ресурсов.
У шапки блога на Blogger id='header-inner'. Зная это мы можем дополнить стиль CSS, скажем так:
#header-inner h1 { overflow: hidden; line-height: 200px; /* текст по центру по вертикали */ text-align: center; /* текст по центру по горизонтали */ position: relative; } #header-inner h1:before { content: url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif); } #header-inner h1:after { content: url(http://4.bp.blogspot.com/_ebKrCj8TLPk/TRSLqf1V6II/AAAAAAAABPA/gxtqKRprck4/s1600/demoHeader.jpg); position: absolute; transform: translate(100px, 0px); /* смещение вправо */ }
Для варианта, когда присутствует изображение на вкладке "Дизайн" в блоке "заголовок" применим CSS наложение:
#header-inner { position: relative; } #header-inner:after { content: url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif); position: absolute; top: 20px; /* свои значения */ left: 50px; /* свои значения */ }
Смена изображения заголовка в зависимости от времени суток
Думаю этот эффект заслуживает внимание: посетителю показывается картинка, которая соответствует часу, когда он зашёл на ресурс.
Перед </head> добавляем скрипт:
<script> var image=new Array(); image[0]="изо0"; image[1]="изо1"; image[2]="изо2"; image[3]="изо3"; image[4]="изо4"; image[5]="изо5"; var now = new Date(); var hours = now.getHours(); var alea=0 if (hours>0) {alea=0;} if (hours>4) {alea=1;} if (hours>8) {alea=2;} if (hours>12) {alea=3;} if (hours>16) {alea=4;} if (hours>20) {alea=5;} document.write("<style>#header-inner:after {content: url(" + image[alea] + "); position: absolute;}</style>"); </script>
Количество изображений (image[номер]="URL_изо") вы можете выбрать любое, но не более 24. Строка "if (hours>0) {alea=0;}" говорит, что первый рисунок (alea=0;) будет показан в течении четырёх часов с 0:00 до 4:00. Далее по аналогии.
Например, картинка авто меняется с каждым четвёртым часом.
Смена фона при обновлении страницы
Показывается случайная картинка из списка при обновлении страницы. Перед </body> вносим:
<script> var image=new Array(12); image[0]="изо0"; image[1]="изо1"; image[2]="изо2"; image[3]="изо3"; image[4]="изо4"; image[5]="изо5"; image[6]="изо6"; image[7]="изо7"; image[8]="изо8"; image[9]="изо9"; image[10]="изо10"; image[11]="изо11"; var alea=Math.round(Math.random()*11); document.write("<style>#header-inner:after {content: url(" + image[alea] + "); position: absolute;}</style>"); </script>
Как сделать, чтобы фон менялся при смене месяца
Перед </body> вносим:
<script> var d=new Date(); var month=new Array(12); month[0]="изо0"; month[1]="изо1"; month[2]="изо2"; month[3]="изо3"; month[4]="изо4"; month[5]="изо5"; month[6]="изо6"; month[7]="изо7"; month[8]="изо8"; month[9]="изо9"; month[10]="изо10"; month[11]="изо11"; document.write("<style>#header-inner:after {content: url(" + month[d.getMonth()] + "); position: absolute;}</style>"); </script>
72 комментария:
Только в свойства добавьте
#Image999 {filter:alpha(opacity=80); opacity:0.80;}
Будьте добры, подскажите пожалуйста, как можно разместить много картинок на одной страничке, чтобы посетители могли их скачивать?
2. Как можно сделать так, чтобы при нажатии на картинку она увеличивалась и приводила на другую страницу, где она крупным планом?
3. И пробовали ли Вы когда нибудь сделать анимацию картинки?
Вот у меня много картинок, и мне хотелось бы их выложить на сайт, но, чтобы обязательно внизу были ссылки на них.
Я не могу сообразить, как это сделать. Я еще просто совсем чайник.
Я думаю, что с вашим вниманием, вы меня не оставите без ответа.
Заранее спасибо.
Я наверное вас уже замучил своими проблемами.
В общем сделал картинку со слоями и все в нее втиснул.
http://myrussiammm.blogspot.com/
Вот что у меня получилось.
Наташа помогите пожалуста, над шапкой блога осталось место и с лева тоже. Подскажите как сдвинуть картинку, чтобы она полностью закрывала эти пространства.
#header
на
.header-outer
У меня разрешение монитора чуть выше вашего, и поэтому выглядить будет всё равно не очень. Я бы на вашем месте сделала так:
.header-outer {background:
transparent url(http://s007.radikal.ru/i301/1105/5c/44b3124a98e1.jpg);
height: 288px;
}
Картинка будет повторяться по-горизонтали. Но нужно предварительно в Фотошопе убрать полосу справа.
Твой блог уж больно долго грузиться - 3,7 секунд.
В шаблоне "Путешествие" нужно также изменить
html body .region-inner {
min-width: 0;
max-width: 100%;
width: auto;
}
на
html body .content-outer {
min-width: 0;
max-width: 100%;
width: 100%;
}
А в "Простая"
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}
.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}
изменить на
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
$(body.background.override)
}
html body .content-outer {
min-width: 0;
max-width: 100%;
width: 100%;
}
.content-inner {
padding: 0;
}
пока решила остановить на шаблоне "путешествие". и если там изменить, как Вы предложили, то ширина растягивается не только шапки, а всего того фона, что под шапкой и телом сообщений (не основного фона и не фона под самими сообщениями). а мне надо, только шапку растянуть.
.header-outer {
margin: -3em -50em 0em -50em;
border-bottom: 2px ridge #ebe0c7;
text-align: center;
background: #512525;
height: 150px;
}
-50em - это довольно завышенные величины. Укажи другие.
Попробуйте для фонового рисунка задать background-size: 1 550px 2000px;.
http://www.belo-mor.ru/. Что-то у меня фоновая картинка, на ней фон заголовка, а над ним буквы блога. Жуть.
С фона сайта убирай узор. Его добавь в изображение заголовка. С помощью margin подвинь влево (он может принимать отрицательные значения).
#Header1_headerimg {margin: 0 50px 0 -50px;}
в шаблон.
Подробнее http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html
там в конечном коде есть хотя бы ссыль на картинку... а я даже ее найти не могу
это я понял... но цель то заключалась в том чтобы растянуть эту картинку не затрагивая область сообщений
Посмотрела. Комментарий 23 не подходит. Сделай так:
#Header1 {margin-left: -200px;}
Изменяйте значение процентов, например:
#header-inner {
background: transparent url(http://3.bp.blogspot.com/-ZphfbN_FHK4/TnlyR8Tq_jI/AAAAAAAABEQ/Clf6LnBuCvw/s40/d.png) no-repeat 20% 1%;
height: 100px;
width: 100%;
}
Я, как правило, сейчас не осуществляю обмен ссылками и их продажу. Я думаю вы уже это успели заметить по страницам блога.
Жаль... что не хочешь обменяться. Я ТОДу предложил, но пока еще мне не ответил.
Кстати зря ты девушку убрала с шапки - это твоя фишка была. А теперь чертенок в футере...
Не люблю однообразия, тоскливо становится. Чёртик чем-то приглянулся.
.Header h1 {...}
Вместо троеточия добавьте стили отсюда http://shpargalkablog.ru/2011/02/css-ten-teksta.html#text-shadow
Я верно поняла вопрос?
Пошла рисовать себе картинку :)
Т.е. она есть, но всегда по умолчанию прижимается к левому углу и при расширении границ блога выглядит не очень красиво. Приходится удерживать ширину блога в соответствии с рисунком. Вот адрес блога: http://iherborganic.blogspot.com
Код
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
замените ( http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html ) на (параметры определены с учётом вашего изображения)
<img expr:alt='data:title' height='418' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' width='1022' style='display: block; z-index: 10; margin: 0 auto; width: 1022px;'/>
Еще тысячу мерси!!!!!!!
Большая просьба, перед тем, как писать о проблеме, уберите, пожалуйста, вредоносный код. Его не пропустят ни Яндекс, ни Гугл. В итоге у вас не будет позиций в поисковых системах, а значит и посетителей.
См. http://safesearch.ya.ru/
Яндекс сообщает о всём, что находит, где может крыться угроза. Поскольку всё перечислять не имеет смысла, я дала ссылку на первоисточник.
http://www.spainyribalka.blogspot.com.es/
//www.blogblog.com/1kt/transparent/white80.png
заменить на свой. Картинку можно сделать в Фотошопе.
Но мне кажется это не совсем удобно когда посетитель не находится на странице Сообщения, а просто просматривает анонсы переходя по страницам (кнопки "Вперёд" "Назад"). Тогда, если он находится вверху страницы, ему нужно спуститься вниз и нажать "Главная страница".
В старом шаблоне ссылка на названии блога почему-то всегда была активной...
Простите, Наталья я не подумал. Спасибо.
Посмотрите пожалуйста ещё на это:
http://i46.fastpic.ru/big/2013/0430/db/0c063b04faef83570ba5dd6d2ae672db.png
То есть там добавляете несколько разных URL картинок
-Подскажите в каком месте находится этот, зверь, JavaScript я удалила(очень быстро происходит загрузка, а вот CSS в верхней части не найду : мой сайт :http://myguitara08.blogspot.com
Спасибо! С уважением,Юлия.
Строки из комментариев: «А как можно вставить картинку - логотип с прозрачным фоном в левый верхний угол блога? Не в заголовок, а еще левее?»
Ваш ответ: «Добавьте новый блок: http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html и в созданном гаджете укажите необходимый URL
Только в свойства добавьте
#Image999 {filter:alpha(opacity=80); opacity:0.80;}»
А мне нужно в правый угол,но..
1.гаджет я добавила только изменением цифры 1 на 2.
,не добавляя
2.при заполнении гаджета картинка не на прозрачном изначальном фоне, а с тонюсенькой квадратной окантовкой(вставляла с жесткого диска и привязывала на картинку ссылку на другую страницу).
3.можно ли в position перед ]]> установить самые крайние значения верх и вправо?
4. и как можно не добавлять название гаджета?(без него не сохраняется, а оно мне не нужно)
5. у меня для заголовка стоит :помещать описание под изображением, но картинка прижата влево и справа пустота. Поэтому хотелось бы, не выходя на фон, на одном(или выше, что не так заметно) уровне с заголовком добавить Logo(о котором говорилось выше), и прижать его вправо
<img alt='Всё по Закону!' height='123' id='Header1_headerimg' src='адрес' style='display: block; margin: 0 auto;' width='587'/>