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



 

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

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

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Размер фонового изображения на WP
skrivelyov
skrivelyov
Topic Starter сообщение 2.11.2014, 23:27; Ответить: skrivelyov
Сообщение #1


Доброго времени суток

Я столкнулся с одной проблемой, в которой мне требуется компетентная помощь. Я хочу поменять фоновое изображение для сайта, чтобы оно было во весь экран как на маленьких, так и на больших мониторах. А то сейчас на моем сайте на широкоформатных мониторах края обрезаны. Вот сайт, чтобы вы понимали http://nasha-vselennaya.ru

Сейчас я нашел хорошие фото с большим разрешением, но вот не знаю какой размер выбрать, да так, чтобы перегруза не было. Посоветуйте какой оптимальный размер изображения должен быть и какое разрешение надо делать?

Заранее спасибо


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
seo_talisman
seo_talisman
сообщение 3.11.2014, 2:07; Ответить: seo_talisman
Сообщение #2


Попробуй добавить в style следующее:

Код
{
        background: url(http://nasha-vselennaya.ru/wp-content/themes/jd-nebula-3c-10/images/sf-body.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
skrivelyov
skrivelyov
Topic Starter сообщение 3.11.2014, 10:40; Ответить: skrivelyov
Сообщение #3


seo_talisman,

Извиняюсь за невежество, а куда конкретно добавить
CODE
body {
color: #eeddfd;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-attachment: fixed;
background-color: #000000;
background-image: url(images/sf-body.jpg);
background-repeat: no-repeat;
background-position: center top;
}

#content {
margin: 0 auto;
padding: 0;
width: 925px;
background-image: url(images/sf-content.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #000000;
background-position: center top;
border: 2px solid #000000;
}

#header {
height: 70px;
margin: 0;
padding: 0;
}

#pages {
font-size: 12px;
margin: 0;
padding: 15px 0 6px 20px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
}

#search {
float: right;
margin: 0;
padding: 0;
position: relative;
right: 10px;
top: -22px;
}

#notice {
float: left;
margin: 0;
padding: 0 0 20px 20px;
width: 550px;
}

#sidebar {
font-size: 13px;
line-height: 1.5em;
margin: 0;
padding: 0;
}

#left-sidebar {
float: left;
width: 170px;
}

#right-sidebar {
float: right;
width: 170px;
}

#credits {
font-family: "Small Fonts", VT100, Arial, Helvetica;
font-size: 9px;
margin: 0;
padding: 5px 20px;
text-align: center;
color: #eeddfd;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #AE99C2;
}


/* Config Structure Divs */

/* Header */
#header h1 {
font-size: 30px;
letter-spacing: 0.1em;
margin: 0;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

#header a, #header a:hover {
background: transparent;
color: #ae99c2;
text-decoration: none;
}

/* Pages */
#pages li {
display: inline;
list-style-type: none;
}

#pages ul, ol {
margin: 0;
padding-left: 20px;
}

#pages a {
background: #000000;
color: #ECACE8;
font-weight: bold;
margin: 0 3px 0 0;
padding: 6px 10px;
}

#pages a:hover {
color: #000000;
background-color: #ECACE8;
}

.current_page_item a, .current_page_item a:hover {
background: #ECACE8!important;
color: #eeddfd !important;
}

/* Search */
#search input {
border: 2px solid #AE99C2;
font-size: 12px;
padding: 2px;
width: 160px;
}

/* notice */
#notice p {
font-size: 13px;
line-height: 1.6em;
text-align: justify;
}

#notice ul, #notice ol {
font-size: 11px;
line-height: 1.6em;
}

#notice ul {
list-style-type: circle;
margin: 0 0 0 30px;
padding: 0;
}

#notice li {
margin: 0;
padding: 0;
}

#notice h2, #notice h2 a {
color: #AE99C2;
font-size: 18px;
font-weight: normal;
margin: 20px 0 0 0;
padding: 0;
text-decoration: none;
}

#notice h2 a:hover {
background: transparent;
color: #eeddfd;
}

#notice h3 {
color: #de6fa8;
font-size: 13px;
font-weight: normal;
margin: 0;
padding: 20px 0 5px 0;
}

#notice small {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 10px;
}

.feedback {
color: #898A8A;
font-size: 11px;
margin: 0;
padding: 0 20px;
text-align: center;
}

/* entrance */
.entrance {
margin: 0;
padding: 0;
}

/* Comments */
#commentlist {
list-style-type: none;
margin: 0;
padding: 0;
}

#commentlist li {
margin: 10px 0;
padding: 5px 10px;
}

#commentlist p {
margin: 0;
padding: 0;
}

#commentlist small {
font-size: 11px;
}

.class_comment1 {
background-color: #42223C;
}
.class_comment2 {
background-color: #000000;
}

#comments, #postcomment {
color: #E379C0;
font-size: 11px !important;
font-weight: normal;
margin: 40px 0 10px 10px;
text-transform: uppercase;
}

#commentform {
border: 2px solid #763E6B;
padding: 5px 20px;
background-color: #000000;
}

#commentform input, #commentform textarea {
border: 1px solid #763E6B;
font-size: 11px;
padding: 1px;
background-color: #ECDDE7;
}

#commentform input:focus, #commentform textarea:focus {
background-color: #FFFFFF;
}

/* Sidebar */
#sidebar h3 {
background: url(images/dot.gif) repeat-x bottom;
color: #AE99C2;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.2em;
margin: 0;
padding: 0;
text-transform: uppercase;
}

#sidebar ul, #sidebar ol {
list-style: none;
margin: 0;
padding: 5px;
}

#sidebar li, #sidebar li:hover {
margin: 0;
padding: 0;
}

#sidebar a {
color: #e379c0;
}

#sidebar a:hover {
background: url(images/dot.gif) repeat-x bottom;
color: #e379c0;
}

#sidebar div {
margin: 0;
padding: 0;
}

/* Credits */
#credits a {
color: #eeddfd;
}

#credits a:hover {
background: transparent;
color: #AE99C2;
}

#credits p {
margin: 0;
padding: 0;
}

/* General */
a {
color: #e379c0;
text-decoration: none;
}

a:hover {
background: #2e4f8e;
color: #eeddfd;
}

acronym, abbr, span.caps {
cursor: help;
border-bottom: 1px dotted #000;
}

blockquote {
padding: 5px 20px 25px 25px;
margin: 1em;
background-image: url(images/blockquote.png);
background-repeat: no-repeat;
background-position: left top;
background-color: #000000;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #763E6B;
}

cite {
text-decoration: none;
}

code {
font-family: 'Courier New', Courier, Fixed, sans-serif;
font-size: 1.1em;
}

img {
border: 0;
margin: 4px;
}

h4 {
color: #CCCCCC;
}

/* Float and Clear */
div.floatleft {
float: left;
}

div.floatright {
float: right;
}

div.both {
clear: both;
}

/* Images align */
img.border {
border: 1px solid #C6C6C6;
padding: 4px;
margin: 0;
}

img.border:hover {
background: #E3F5FE;
}

img.center {
display: block;
margin: auto;
}

img.alignright {
float: right;
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
float: left;
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

/* Text align */
.center {
text-align: center;
}

.alignright {
text-align: right;
}

.alignleft {
text-align: left;
}


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
samovar
samovar
сообщение 3.11.2014, 12:13; Ответить: samovar
Сообщение #4


вот сразу в body {
и вставляй


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
skrivelyov
skrivelyov
Topic Starter сообщение 3.11.2014, 12:22; Ответить: skrivelyov
Сообщение #5


samovar, Спс, а как проверить на маленьких мониторах нормально ли отображается, да и вообще на всех экранах, даже на мобилах?

Вот еще какой вопрос, как в шапке сайта сделать красочный заголовок "Наша Вселенная". Вернее, я думаю, что сделаю на фотошопе, а вот как его смонтировать на сайт?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fredditton
fredditton
сообщение 3.11.2014, 12:31; Ответить: fredditton
Сообщение #6


Я бы советовал использовать
Цитата
@media screen and (max-width: 200px) {
.body
{}
}
@media screen and (max-width: 400px) {
.body
{}
}
@media screen and (max-width: 600px) {
.body
{}
}
@media screen and (max-width: 800px) {
.body
{}
}
...

Можно выбрать наиболее популярные разрешения и под каждое сделать отдельный бекграунд

Цитата(skrivelyov @ 3.11.2014, 12:22) *
Вот еще какой вопрос, как в шапке сайта сделать красочный заголовок "Наша Вселенная". Вернее, я думаю, что сделаю на фотошопе, а вот как его смонтировать на сайт?

Варианта два - или с помощью css3 или прозрачный png рисунок.а смонтировть... ну я не понимаю этого вопроса. Что значит смонтировать на сайте?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
skrivelyov
skrivelyov
Topic Starter сообщение 3.11.2014, 12:44; Ответить: skrivelyov
Сообщение #7


fredditton, Ну я в принципе проверил на ноутбуке, айфоне и планшете, все отлично отображается, думаете стоит менять?

И если менять то куда вставлять код? Заранее спасибо

Цитата(fredditton @ 3.11.2014, 12:31) *
Что значит смонтировать на сайте?

То есть вставить изображение, я в этом ноль


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fredditton
fredditton
сообщение 3.11.2014, 14:26; Ответить: fredditton
Сообщение #8


Цитата(skrivelyov @ 3.11.2014, 12:44) *
все отлично отображается, думаете стоит менять?

Нет, не стоит, если все ок.

Цитата(skrivelyov @ 3.11.2014, 12:44) *
То есть вставить изображение, я в этом ноль


Тут вряд-ли получиться дистанционно сделать. лучше попросить того кто знает html и css -будет быстрее и надежнее
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
skrivelyov
skrivelyov
Topic Starter сообщение 3.11.2014, 14:53; Ответить: skrivelyov
Сообщение #9


Цитата(fredditton @ 3.11.2014, 14:26) *
Тут вряд-ли получиться дистанционно сделать. лучше попросить того кто знает html и css -будет быстрее и надежнее


А то я уже и картинку сделал


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sanika
sanika
сообщение 3.11.2014, 15:50; Ответить: sanika
Сообщение #10


Попробуйте сами
Заливайте картинку в папку шаблона, после чего урл на нее будет типа
Код
http://nasha-vselennaya.ru/wp-content/themes/jd-nebula-3c-10/images/sf-body.jpg

открываете редактор шаблона в админке, и ищете место, где вы хотите разместить этот рисунок. Вставляете в виде

Код
<img src="урл на картинку" alt="описание картинки">


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Изображения с shutterstock от 15 рублей/штука
5 Mr_Big 3669 10.9.2017, 21:30
автор: Palundra
Открытая тема (нет новых ответов) Продаю 160 статей, размер от 2000 символов, копирайт.
Разные тематики, желательно все сразу
2 vminske 2776 29.12.2016, 15:16
автор: vminske
Открытая тема (нет новых ответов) Вывод изображения при наведения на часть картинки по area
1 androv77 4837 16.7.2016, 17:32
автор: -YroKPROG-
Открытая тема (нет новых ответов) Создаю фрактальные изображения для разных целей
22 Russ33 5072 27.6.2016, 21:42
автор: Russ33
Открытая тема (нет новых ответов) размер таблицы
7 modz 6426 24.10.2014, 14:57
автор: -modz-


 



RSS Текстовая версия Сейчас: 19.4.2024, 22:38
Дизайн