Перепробовал все что можно, но так и не смог понять как увеличить. Сам сайт расширяется, а фон остается на месте. Помогите.
вот код css
body {
font:75%/150% "Trebuchet MS", Tahoma, Arial;
color:#333;
background:#FFF url(images/main-bg.gif);
margin:0;
padding:0;
}
a {
color:#b31919;
text-decoration:none;
}
a:visited {
color:#898989;
text-decoration:none;
}
a:hover {
color:#898989;
text-decoration:underline;
}
img {
border:none;
}
p {
margin:0;
padding:0 0 15px;
}
h1 {
height:60px;
font:bold 36px/100% "Trebuchet MS", Tahoma, Arial;
color:#ACD7EE;
margin:0;
}
h1 a,h1 a:visited {
color:#ACD7EE;
text-decoration:none;
}
h1 a:hover {
color:#F6F5EE;
text-decoration:none;
}
h2 {
color:#740000;
border-bottom:1px dotted #D0D0BF;
letter-spacing:-1px;
font:normal 190%/100% "Trebuchet MS", Tahoma, Arial;
padding-bottom:3px;
margin:0 0 2px;
}
h2 a,h2 a:visited {
color:#2b2b2b;
text-decoration:none;
}
h2 a:hover {
color:#9b9b9b;
text-decoration:none;
}
h3 {
font:normal 140%/100% "Trebuchet MS", Tahoma, Arial;
color:#343434;
margin:10px 0 5px;
}
h4 {
font:normal 130%/100% "Trebuchet MS", Tahoma, Arial;
color:#758d38;
margin:10px 0 5px;
}
#page {
width:760px;
border-left:5px solid #D0D0BF;
border-right:5px solid #D0D0BF;
background:#FFFFFE url(images/content-bg.gif) repeat-y;
margin:0 auto;
}
#header {
background:#2D405B;
height:110px;
border-bottom:3px solid #D16683;
position:relative;
color:#D16683;
}
#headerimg {
position:relative;
background:url(images/logo.phg) no-repeat left center;
height:60px;
width:680px;
margin:0 auto;
padding:10px 0 0 60px;
}
#headerimg .description {
position:absolute;
bottom:3px;
color:#F6F5EE;
font-size:14px;
}
#navi {
background:#F1EFE8;
height:30px;
width:760px;
border-top:5px solid #D0D0BF;
border-left:5px solid #D0D0BF;
border-right:5px solid #D0D0BF;
text-align:center;
margin:5px auto 0;
}
#nav li {
float:left;
border-right:1px solid #D0D0BF;
height:30px;
}
#nav .current_page_item a,#nav .current_page_item a:visited {
color:#303030;
text-decoration:none;
background:#FFFFFE;
}
#nav .page_item a {
color:#40608C;
text-decoration:none;
background:#F1EFE8;
font:bold 14px Arial, Helvetica, sans-serif;
display:block;
line-height:30px;
padding:0 15px;
}
#nav .page_item a:hover {
color:#D16683;
background:#FFFFFE;
}
#content {
float:left;
width:492px;
overflow:hidden;
padding:10px 0 30px 13px;
}
#content img {
border:1px solid #D0D0BF;
padding:5px;
}
.post {
clear:both;
padding-top:15px;
}
.post-date {
width:45px;
height:49px;
float:left;
background:url(images/date-bg.gif) no-repeat;
}
.post-month {
font-size:11px;
text-transform:uppercase;
color:#FFF;
text-align:center;
display:block;
line-height:11px;
padding-top:2px;
margin-left:-3px;
}
.post-day {
font-size:18px;
text-transform:uppercase;
color:#999;
text-align:center;
display:block;
line-height:18px;
padding-top:7px;
margin-left:-3px;
}
.entry {
float:right;
width:438px;
}
.post-cat {
background:url(images/mini-category.gif) no-repeat left center;
padding-left:20px;
float:left;
font-size:95%;
color:#999;
}
.post-comments {
background:url(images/mini-comments.gif) no-repeat left bottom;
padding-left:20px;
float:right;
font-size:95%;
}
.post-calendar {
background:url(images/mini-calendar.gif) no-repeat left center;
padding-left:20px;
float:right;
font-size:95%;
color:#999;
}
.post-content {
clear:both;
padding-top:10px;
}
.post-content blockquote {
background:#F1EFE8;
border-left:5px solid #D0D0BF;
padding:5px;
}
.navigation {
clear:both;
padding:10px 0;
}
.navigation a,.navigation a:visited {
color:#59770e;
}
.previous-entries a {
float:left;
padding-left:18px;
background:url(images/mini-nav-left.gif) no-repeat left center;
}
.next-entries a {
float:right;
padding-right:18px;
background:url(images/mini-nav-right.gif) no-repeat right center;
}
#comments,#respond {
border-bottom:1px dotted #D0D0BF;
clear:both;
padding:10px 0 5px;
}
.commentlist {
padding-left:20px;
line-height:130%;
margin:10px 0;
}
.commentlist li {
padding:10px 10px 0;
}
.commentlist .alt {
background:#F1EFE8;
border:1px dotted #D0D0BF;
}
.commentlist cite,.commentlist cite a,.commentlist cite a:visited {
font-weight:700;
font-style:normal;
font-size:120%;
}
.commentlist small {
margin-bottom:5px;
display:block;
font-size:87%;
}
#commentform {
margin-top:10px;
font:110% Arial, Helvetica, sans-serif;
}
#commentform p {
margin:0;
padding:6px 0;
}
#commentform label {
color:#787878;
font-size:87%;
}
#commentform input {
width:200px;
background:#F1EFE8;
border:1px dotted #D0D0BF;
margin-top:3px;
padding:3px;
}
#commentform textarea {
width:485px;
height:115px;
background:#F1EFE8;
border:1px solid #D0D0BF;
margin-top:3px;
padding:2px;
}
#commentform textarea:focus,#commentform input[type=text]:focus {
background:#fff;
}
#commentform #submit {
background:url(images/btn-bg.gif) no-repeat;
font:bold 12px Arial, Helvetica, sans-serif;
color:#FFF;
border:none;
float:right;
width:144px;
height:28px;
cursor:pointer;
}
#sidebar {
float:right;
width:220px;
color:#666;
overflow:hidden;
padding:0 10px 20px 0;
}
#sidebar h2,#sidebar .sidebartitle {
font:normal 140%/100% "Trebuchet MS", Tahoma, Arial;
color:#928F61;
border-bottom:1px solid #D0D0BF;
margin:20px 0 2px;
}
#sidebar a,#sidebar a:visited {
color:#495233;
text-decoration:none;
}
#sidebar a:hover {
color:#D16683;
text-decoration:none;
}
#sidebar ul li {
list-style:none;
border:none;
margin:0;
padding:0;
}
#sidebar ul li ul {
margin:0;
padding:0;
}
#sidebar ul li ul li {
border-bottom:1px solid #E4E4D5;
padding:2px 0;
}
#sidebar ul li ul li ul li {
border:none;
padding:1px 0 1px 10px;
}
ul.list-blogroll li {
background:url(images/mini-blogroll.gif) no-repeat left center!important;
padding-left:20px!important;
}
ul.list-cat li,li.widget_categories li {
background:url(images/mini-category.gif) no-repeat left center!important;
padding-left:20px!important;
}
ul.list-archives li,li.widget_archives li {
background:url(images/mini-monthly-archive.gif) no-repeat!important;
padding-left:20px!important;
}
ul.list-page li,li.widget_pages li,li.widget_recent_entries li {
background:url(images/mini-page.gif) no-repeat left center!important;
padding-left:20px!important;
}
ul.list-page li ul li,li.widget_pages li ul li {
background:url(images/mini-page-arrow.gif) no-repeat!important;
padding-left:10px!important;
}
li.widget_recent_comments li {
background:url(images/mini-recent-comments.gif) no-repeat!important;
padding-left:20px!important;
}
li.widget_calendar td {
padding:1px 7px;
}
.textwidget {
padding-top:5px;
}
#searchform {
margin:15px 0 0;
}
#searchform br {
display:none;
}
#searchform #s {
width:115px;
height:22px;
border:1px solid #D0D0BF;
background:#fffffe url(images/search-icon.gif) right center no-repeat;
margin-right:2px;
color:#000;
font-weight:400;
padding:4px 20px 0 5px;
}
#searchform input {
background:url(images/search-btn-bg.gif) no-repeat;
border:none;
width:67px;
height:26px;
font:bold 12px Arial, Helvetica, sans-serif;
color:#FFF;
vertical-align:middle;
}
#footerbg {
clear:both;
background:#2D405B;
border-top:3px solid #D16683;
padding-bottom:20px;
}
#footer {
width:760px;
font-size:95%;
color:#ACD7EE;
line-height:130%;
margin:0 auto;
}
#footer a,#footer a:visited {
color:#fff;
}
#footer h4 {
font:normal 146%/100% "Trebuchet MS", Tahoma, Arial;
color:#9cdbfb;
margin:10px 0 5px;
}
.footer-meta {
width:220px;
float:right;
margin-left:10px;
}
.footer-meta ul li {
background:url(images/mini-footer-icon.gif) no-repeat 5px 4px;
font-size:107%;
line-height:135%;
font-weight:700;
padding:0 0 10px 20px;
}
#credits {
width:760px;
color:#FFF;
font-size:85%;
line-height:120%;
margin:0 auto;
}
#credits a,#credit a:visited {
color:#ACD7EE;
}
.footer-meta ul li.rss {
background:url(images/mini-rss.gif) no-repeat left 2px;
padding:0 0 10px 20px;
}
.loginout {
background:url(images/mini-loginout.gif) no-repeat left center;
padding-left:18px;
padding-bottom:2px;
margin-left:8px;
}
.center {
text-align:center;
}
img.center,img[align=center] {
display:block;
margin-left:auto;
margin-right:auto;
}
.alignleft {
float:left;
}
img.alignleft,img[align=left] {
float:left;
margin:2px 10px 5px 0;
}
.alignright {
float:right;
}
img.alignright,img[align=right] {
float:right;
margin:2px 0 5px 10px;
}
.clear {
clear:both;
}
hr.clear {
clear:both;
visibility:hidden;
margin:0;
padding:0;
}
a.xl {
display:none!important;
}
form,#sidebar ul {
margin:0;
padding:0;
}
#nav,.footer-recent-comments ul {
list-style:none;
margin:0;
padding:0;
}
.footer-recent-comments,.footer-recent-posts {
width:240px;
float:left;
margin-left:10px;
}
.footer-recent-comments ul li,.footer-recent-posts ul li {
background:url(images/mini-footer-icon.gif) no-repeat 5px 4px;
padding:0 0 10px 20px;
}
.footer-recent-posts strong,.footer-meta strong {
font-size:107%;
line-height:135%;
font-weight:700;
}
.footer-recent-posts ul,.footer-meta ul {
list-style:none;
font-size:92%;
line-height:110%;
margin:0;
padding:0;
}
Менял размеры width. Главная загвостка - это фон который не растягивается.
вот код css
body {
font:75%/150% "Trebuchet MS", Tahoma, Arial;
color:#333;
background:#FFF url(images/main-bg.gif);
margin:0;
padding:0;
}
a {
color:#b31919;
text-decoration:none;
}
a:visited {
color:#898989;
text-decoration:none;
}
a:hover {
color:#898989;
text-decoration:underline;
}
img {
border:none;
}
p {
margin:0;
padding:0 0 15px;
}
h1 {
height:60px;
font:bold 36px/100% "Trebuchet MS", Tahoma, Arial;
color:#ACD7EE;
margin:0;
}
h1 a,h1 a:visited {
color:#ACD7EE;
text-decoration:none;
}
h1 a:hover {
color:#F6F5EE;
text-decoration:none;
}
h2 {
color:#740000;
border-bottom:1px dotted #D0D0BF;
letter-spacing:-1px;
font:normal 190%/100% "Trebuchet MS", Tahoma, Arial;
padding-bottom:3px;
margin:0 0 2px;
}
h2 a,h2 a:visited {
color:#2b2b2b;
text-decoration:none;
}
h2 a:hover {
color:#9b9b9b;
text-decoration:none;
}
h3 {
font:normal 140%/100% "Trebuchet MS", Tahoma, Arial;
color:#343434;
margin:10px 0 5px;
}
h4 {
font:normal 130%/100% "Trebuchet MS", Tahoma, Arial;
color:#758d38;
margin:10px 0 5px;
}
#page {
width:760px;
border-left:5px solid #D0D0BF;
border-right:5px solid #D0D0BF;
background:#FFFFFE url(images/content-bg.gif) repeat-y;
margin:0 auto;
}
#header {
background:#2D405B;
height:110px;
border-bottom:3px solid #D16683;
position:relative;
color:#D16683;
}
#headerimg {
position:relative;
background:url(images/logo.phg) no-repeat left center;
height:60px;
width:680px;
margin:0 auto;
padding:10px 0 0 60px;
}
#headerimg .description {
position:absolute;
bottom:3px;
color:#F6F5EE;
font-size:14px;
}
#navi {
background:#F1EFE8;
height:30px;
width:760px;
border-top:5px solid #D0D0BF;
border-left:5px solid #D0D0BF;
border-right:5px solid #D0D0BF;
text-align:center;
margin:5px auto 0;
}
#nav li {
float:left;
border-right:1px solid #D0D0BF;
height:30px;
}
#nav .current_page_item a,#nav .current_page_item a:visited {
color:#303030;
text-decoration:none;
background:#FFFFFE;
}
#nav .page_item a {
color:#40608C;
text-decoration:none;
background:#F1EFE8;
font:bold 14px Arial, Helvetica, sans-serif;
display:block;
line-height:30px;
padding:0 15px;
}
#nav .page_item a:hover {
color:#D16683;
background:#FFFFFE;
}
#content {
float:left;
width:492px;
overflow:hidden;
padding:10px 0 30px 13px;
}
#content img {
border:1px solid #D0D0BF;
padding:5px;
}
.post {
clear:both;
padding-top:15px;
}
.post-date {
width:45px;
height:49px;
float:left;
background:url(images/date-bg.gif) no-repeat;
}
.post-month {
font-size:11px;
text-transform:uppercase;
color:#FFF;
text-align:center;
display:block;
line-height:11px;
padding-top:2px;
margin-left:-3px;
}
.post-day {
font-size:18px;
text-transform:uppercase;
color:#999;
text-align:center;
display:block;
line-height:18px;
padding-top:7px;
margin-left:-3px;
}
.entry {
float:right;
width:438px;
}
.post-cat {
background:url(images/mini-category.gif) no-repeat left center;
padding-left:20px;
float:left;
font-size:95%;
color:#999;
}
.post-comments {
background:url(images/mini-comments.gif) no-repeat left bottom;
padding-left:20px;
float:right;
font-size:95%;
}
.post-calendar {
background:url(images/mini-calendar.gif) no-repeat left center;
padding-left:20px;
float:right;
font-size:95%;
color:#999;
}
.post-content {
clear:both;
padding-top:10px;
}
.post-content blockquote {
background:#F1EFE8;
border-left:5px solid #D0D0BF;
padding:5px;
}
.navigation {
clear:both;
padding:10px 0;
}
.navigation a,.navigation a:visited {
color:#59770e;
}
.previous-entries a {
float:left;
padding-left:18px;
background:url(images/mini-nav-left.gif) no-repeat left center;
}
.next-entries a {
float:right;
padding-right:18px;
background:url(images/mini-nav-right.gif) no-repeat right center;
}
#comments,#respond {
border-bottom:1px dotted #D0D0BF;
clear:both;
padding:10px 0 5px;
}
.commentlist {
padding-left:20px;
line-height:130%;
margin:10px 0;
}
.commentlist li {
padding:10px 10px 0;
}
.commentlist .alt {
background:#F1EFE8;
border:1px dotted #D0D0BF;
}
.commentlist cite,.commentlist cite a,.commentlist cite a:visited {
font-weight:700;
font-style:normal;
font-size:120%;
}
.commentlist small {
margin-bottom:5px;
display:block;
font-size:87%;
}
#commentform {
margin-top:10px;
font:110% Arial, Helvetica, sans-serif;
}
#commentform p {
margin:0;
padding:6px 0;
}
#commentform label {
color:#787878;
font-size:87%;
}
#commentform input {
width:200px;
background:#F1EFE8;
border:1px dotted #D0D0BF;
margin-top:3px;
padding:3px;
}
#commentform textarea {
width:485px;
height:115px;
background:#F1EFE8;
border:1px solid #D0D0BF;
margin-top:3px;
padding:2px;
}
#commentform textarea:focus,#commentform input[type=text]:focus {
background:#fff;
}
#commentform #submit {
background:url(images/btn-bg.gif) no-repeat;
font:bold 12px Arial, Helvetica, sans-serif;
color:#FFF;
border:none;
float:right;
width:144px;
height:28px;
cursor:pointer;
}
#sidebar {
float:right;
width:220px;
color:#666;
overflow:hidden;
padding:0 10px 20px 0;
}
#sidebar h2,#sidebar .sidebartitle {
font:normal 140%/100% "Trebuchet MS", Tahoma, Arial;
color:#928F61;
border-bottom:1px solid #D0D0BF;
margin:20px 0 2px;
}
#sidebar a,#sidebar a:visited {
color:#495233;
text-decoration:none;
}
#sidebar a:hover {
color:#D16683;
text-decoration:none;
}
#sidebar ul li {
list-style:none;
border:none;
margin:0;
padding:0;
}
#sidebar ul li ul {
margin:0;
padding:0;
}
#sidebar ul li ul li {
border-bottom:1px solid #E4E4D5;
padding:2px 0;
}
#sidebar ul li ul li ul li {
border:none;
padding:1px 0 1px 10px;
}
ul.list-blogroll li {
background:url(images/mini-blogroll.gif) no-repeat left center!important;
padding-left:20px!important;
}
ul.list-cat li,li.widget_categories li {
background:url(images/mini-category.gif) no-repeat left center!important;
padding-left:20px!important;
}
ul.list-archives li,li.widget_archives li {
background:url(images/mini-monthly-archive.gif) no-repeat!important;
padding-left:20px!important;
}
ul.list-page li,li.widget_pages li,li.widget_recent_entries li {
background:url(images/mini-page.gif) no-repeat left center!important;
padding-left:20px!important;
}
ul.list-page li ul li,li.widget_pages li ul li {
background:url(images/mini-page-arrow.gif) no-repeat!important;
padding-left:10px!important;
}
li.widget_recent_comments li {
background:url(images/mini-recent-comments.gif) no-repeat!important;
padding-left:20px!important;
}
li.widget_calendar td {
padding:1px 7px;
}
.textwidget {
padding-top:5px;
}
#searchform {
margin:15px 0 0;
}
#searchform br {
display:none;
}
#searchform #s {
width:115px;
height:22px;
border:1px solid #D0D0BF;
background:#fffffe url(images/search-icon.gif) right center no-repeat;
margin-right:2px;
color:#000;
font-weight:400;
padding:4px 20px 0 5px;
}
#searchform input {
background:url(images/search-btn-bg.gif) no-repeat;
border:none;
width:67px;
height:26px;
font:bold 12px Arial, Helvetica, sans-serif;
color:#FFF;
vertical-align:middle;
}
#footerbg {
clear:both;
background:#2D405B;
border-top:3px solid #D16683;
padding-bottom:20px;
}
#footer {
width:760px;
font-size:95%;
color:#ACD7EE;
line-height:130%;
margin:0 auto;
}
#footer a,#footer a:visited {
color:#fff;
}
#footer h4 {
font:normal 146%/100% "Trebuchet MS", Tahoma, Arial;
color:#9cdbfb;
margin:10px 0 5px;
}
.footer-meta {
width:220px;
float:right;
margin-left:10px;
}
.footer-meta ul li {
background:url(images/mini-footer-icon.gif) no-repeat 5px 4px;
font-size:107%;
line-height:135%;
font-weight:700;
padding:0 0 10px 20px;
}
#credits {
width:760px;
color:#FFF;
font-size:85%;
line-height:120%;
margin:0 auto;
}
#credits a,#credit a:visited {
color:#ACD7EE;
}
.footer-meta ul li.rss {
background:url(images/mini-rss.gif) no-repeat left 2px;
padding:0 0 10px 20px;
}
.loginout {
background:url(images/mini-loginout.gif) no-repeat left center;
padding-left:18px;
padding-bottom:2px;
margin-left:8px;
}
.center {
text-align:center;
}
img.center,img[align=center] {
display:block;
margin-left:auto;
margin-right:auto;
}
.alignleft {
float:left;
}
img.alignleft,img[align=left] {
float:left;
margin:2px 10px 5px 0;
}
.alignright {
float:right;
}
img.alignright,img[align=right] {
float:right;
margin:2px 0 5px 10px;
}
.clear {
clear:both;
}
hr.clear {
clear:both;
visibility:hidden;
margin:0;
padding:0;
}
a.xl {
display:none!important;
}
form,#sidebar ul {
margin:0;
padding:0;
}
#nav,.footer-recent-comments ul {
list-style:none;
margin:0;
padding:0;
}
.footer-recent-comments,.footer-recent-posts {
width:240px;
float:left;
margin-left:10px;
}
.footer-recent-comments ul li,.footer-recent-posts ul li {
background:url(images/mini-footer-icon.gif) no-repeat 5px 4px;
padding:0 0 10px 20px;
}
.footer-recent-posts strong,.footer-meta strong {
font-size:107%;
line-height:135%;
font-weight:700;
}
.footer-recent-posts ul,.footer-meta ul {
list-style:none;
font-size:92%;
line-height:110%;
margin:0;
padding:0;
}
Менял размеры width. Главная загвостка - это фон который не растягивается.
Изменено:
Alexandr - 8 Августа 2013 13:49