Помогите с позицией фонового изображения сайта

К2
На сайте с 26.05.2011
Offline
37
473

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

вот фоновое изображение:

А вот так оно выглядит на сайте:

Как сделать, что бы при любом разрешении экрана картинка была на всю ширину сайта?:confused:

Вот место кода, где я думаю можно исправить эту ошибку:


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,font,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,center,dl,dt,dd,ul,li,fieldset,form,label,legend,table,caption,tfoot,thead{background: transparent;border: 0;font-style: inherit;font-weight: inherit;margin: 0;padding: 0;outline: 0;vertical-align: baseline;}
tr,th,td {background: transparent;border: 1px solid #e1e1e1;font-style: inherit;font-weight: inherit;margin: 0;padding-left: 7px;outline: 0;vertical-align: baseline;}
table {border-collapse: collapse;border-spacing: 0; width: 100%; border: 1px solid #e1e1e1;}
html {overflow-y: scroll;}


/* Main Layout */
html {height: 100%;}
body { font-family: Helvetica, Arial, sans-serif; font-size:13px; line-height: 1.3; color: #555; }
body.contentpane { background:#fff; color:#555;}



.background {position: absolute; width: 100%; background:#000000 url(/images/4444/bannerwd.jpg) repeat-x;}
h1, h2, h3, h4, a:link, a:visited { text-decoration: none; color: #416b0a;}
.readmore a{ background: #416b0a;}
a:hover { text-decoration: underline; color: #2f7ac0; background:none;}
.logo { position:absolute; left:30px; color:#fff; top: 28px; }
.slogan { position:absolute; left:250px; color:#fff; top: 100px; }
.searchbutton { position:absolute; right:10px; top: 0px; color:#fff; float:right;}

/* Layout */
.componentheading { font-style:italic;font-size:25px; margin:0; padding:0 0 10px 0; color:#1a528c;}
h1 { font-size: 20px;}
h2 { font-size: 18px;}
h3 { font-size: 16px;}
h4 { font-size: 14px;}
h1,h2,h3,h4,h5,h6 {margin:0; padding:5px 0; font-weight:normal; font-family:Arial, Helvetica, sans-serif;}
ul {margin:0 0 0 15px;}
p {margin-top: 0;margin-bottom: 10px;}
p em {font-style:italic;}
blockquote { background:#eee; border:3px solid #ccc; margin:5px; padding:5px; font-size:18px; font-family:Arial, Helvetica, sans-serif; font-style:italic}
element.style { height:auto;}
hr { width:100%; clear:both; border:none; height:2px; background:#eee; margin:0; padding:0;}
.clr {clear: both;}

/* Header */
#header { position:relative; height:98px; width:980px;margin: 0px auto 0;}
#header-w {position:relative; }
.top {color:#fff;width:450px;overflow:hidden; padding:20px 0 0 0; margin:0 0 0 500px;z-index:1;}
.top a {color:#fff; text-decoration:underline}
.topright2 {padding-top:60px;}

.topmenu {right:130px; top:10px; float:right; height:22px;-moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; webkit-bottom-right-radius: 7px; webkit-bottom-left-radius: 7px ;}
.topmenu ul {margin:0; padding:0; float:left; -moz-border-radius: 5px; border-radius: 5px;}
.topmenu ul li {list-style:none;float:left;height:100%;position:relative;}
.topmenu ul li a { display:block;padding:0 10px 0 10px; margin:0; height:20px; line-height:20px; -moz-transition: color 0.3s ease 0s, background 0.3s ease 0s; -webkit-transition: 0.3s ease 0s; -o-transition: 0.3s ease 0s;
background: none;color: #FFFFFF;display: block;position: relative;text-align: left;
text-transform: uppercase; font-size:12px;font-weight:normal; font-family: 'Cuprum', sans-serif; -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; webkit-bottom-right-radius: 7px; webkit-bottom-left-radius: 7px ;}
.topmenu ul li.active {}
.topmenu ul li.active a {}
.topmenu ul li:hover {}
.topmenu ul li a:hover{ text-decoration:none; font-weight:normal; font-size:12px; color:#d7d7d7;text-shadow:none;}
.topmenu ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}
.topmenu ul li:hover ul, #menu ul li.sfHover ul {left:0;}
.topmenu ul li ul li {padding:0;height:auto;width:180px; margin:0; border:none;}
.topmenu ul li:hover ul li a {text-shadow:none;}
.topmenu ul li:hover ul li { background:none;}
.topmenu ul li:hover ul li a, .topmenu ul li ul li a, .topmenu ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#555;border-bottom:1px solid #3a3a3a;color:#d1d1d1; font-size:11px;font-weight:normal;text-shadow:none;}
.topmenu ul li ul li a:hover, .topmenu ul li ul li.active a, .topmenu ul li.active ul li a:hover, .topmenu ul li.active ul li.active a {margin:0; padding:0 0 0 10px;height:24px;line-height:24px;background:#343434;color:#fff; font-size:11px;text-shadow:none;}
.topmenu ul li ul ul, .topmenu ul li:hover ul ul, .topmenu ul li:hover ul ul ul, .topmenu ul li:hover ul ul ul ul, .topmenu ul li.sfHover ul ul, .topmenu ul li.sfHover ul ul ul, .topmenu ul li.sfHover ul ul ul ul {left:-999em;}

#slide-w { margin:0; padding:0; background:#EAEAEA url(../images/bg.png) 0 0 repeat-x; border-bottom:1px solid #d6d6d6;border-top:1px solid #f5f5f5;}
#slide { width:960px; margin:0 auto;}

nikonlay
На сайте с 11.12.2006
Offline
176
#1

а к чему столько кода, если там за бекграунд отвечают пара строк только?

и "ошибкой" я бы это не назвал - картинка имеет фиксированный размер, а разрешие у всех разное - это нормально.

Для этого вебмастера испокон веков делали основную часть бекграунда под 1024 (когда я начинал, еще 800 на 600 учитывали, поэтому делал 780), а остальную часть - повторяющейся, чтобы у кого больше разрешение, картинка множилась. у лебедева, например, основная часть бекграунда шапки - 731, а остальное повторяется.

если же вам нужно именно, чтобы картинка меняла размеры, то вам либо флеш нужен, и в нем тянуть, но качество пострадает.

либо сделать несколько шапок под каждое разрешение, определять разрешение постетителя и поставлять ему нужную картинку.

ах да, а еще можно div.header img {width100%}

Мощные фонари и бинокли: https://market.yandex.ru/store--volny-i-veter?businessId=79203856

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий