[WordPress] background bridge

Тема в разделе "Скины", создана пользователем Outset, 14 сен 2009.

Статус темы:
Закрыта.
  1. Outset

    Outset Писатель

    Регистр.:
    29 авг 2009
    Сообщения:
    9
    Симпатии:
    0
    Ребят переделал дизайн полностью под себя шаблона WordPress Бруклинского моста, но вот проблема бекграунд картинок он автоматом ставит белыми, хотя файл css отредактировал именно на прозрачность и сами картинки в формате png и gif с прозрачным фоном
    выкладываю файл css шедший в архиве:
    HTML:
    
    body { 
    	margin:5px 0; 
    	padding:0; 
    	font: 74% Arial, Sans-Serif; 
    	color:#FFF;  
    	background-color:#eee;
    	line-height: 1.4em; 
    	background : #3C3C3C url(images/bg.jpg) repeat-x;
    }
    .topmenu {
    	background: #1E1F21;
    	height: 26px;
    	font-size: 90%;
    	margin: 0 auto; padding: 0;
    	border-bottom: 1px solid #333;
    	color: #888;
    }
    	.topmenu .right_ {
    		float: right;
    		background: #1E1F21;
    		text-align: right;
    		margin: 0;
    		padding: 5px 0 0 0;
    		color: #888;
    		border: 0px;
    	}
    	.topmenu a { color: #888; }
    	.topmenu a:hover { color: #aaa; }
    	.topmenu .date_ { float: left; background: #1E1F21; color: #888; padding: 5px 0 0 5px; }
    #submenu {
    	color: #aaa;
    	padding: 10px 5px 5px 5px;
    	height: 67px;
    	background: #1E1F21;
    }
    	#submenu a { color: #AEB9CC; }
    	#submenu a:hover { color: #EAE8E1; }
    	#submenu .searchb {
    		float: right;
    		width: 363px;
    		text-align: right;
    		padding-right: 5px;
    		border-left: 1px solid #333;
    	}
    .bridge {
    	background: #4C180F url(images/bridge.jpg) no-repeat bottom;
    	height: 268px;
    	margin: 0; padding: 0;
    }
    	.bridge .title { 
    		color: #783B2E;
    		float: right;
    		padding: 20px 20px 0 0px;
    		font: bold 1.6em Arial, sans-serif;
    	}
    	.bridge .slogan {
    		float: right;
    		clear: both;
    		padding: 1px 20px 0 0px;
    		color: #595C5B;
    		font: bold 0.8em Arial, sans-serif;
    }
    input.submit { width: 28px; height: 20px; font-weight: bold; border: none; background: #1E1F21; padding: 3px; color: #888; }
    .nav { 
    	clear: both;
    	text-align: center;
    	color: 	#BC6247;
    	padding: 5px 0 0 0;
    }
    blockquote {
    	background: #515556;
    	color: #BBB;
    	border: 1px dashed #BC6247;
    	padding: 5px;
    }
    p { 
    	margin: 0 0 5px 0; 
    	padding: 0; 
    	color: #888; 
    	background: inherit;
    }
    hr {
       border: 0;
       height: 1px;
       color: #eee;
       background-color: #eee;
    }
    a { 
    	color: #888;
    	background: inherit; 
    	text-decoration:none;
    }
    a:hover { 
    	background: inherit;
    	text-decoration: underline;
    }
    h1 { 
    	padding:0; 
    	margin:0; 
    	color: #FFF; 
    	background: inherit;
    	font: bold 1.8em Arial, Sans-Serif; 
    	letter-spacing: -1px;
    }
    h1 a {
    	color: #FFF; 
    	background: inherit;
    }
    h2 { 
    	background-color: inherit; 
    	color:#BC6247; 
    	font-size:140%; 
    	font-weight:bold; 
    	margin: 10px 0 10px 0; 
    	padding:0; 
    }
    h2 a { 
    	background-color:#3C3C3C; 
    }
    .nav ul { 
    	margin: 0 0 10px 0; 
    	padding : 0; 
    	list-style : none; 
    }
    .nav li { 
    	float: left;
    	font-weight: bold;
    	margin: 0 0 8px 0;
    	padding: 0 0 0 5px;
    }
    .nav li a { color: #FF6538; }
    .nav li a:hover { background: url(images/select.gif) no-repeat center top;
    	background-position: 50% 30px;color: #C62C00; }
    img {
    	border: 0;
    }
    .content { 
    	color: #FFF; 
    	margin: 0 auto; 
    	padding: 0; 
    	width: 766px; 
    	background: #3C3C3C;
    }
    hr { background: #3C3C3C; border: 1px solid #555; margin: 10px 0 10px 0;}
    .right {  
    	clear: both; 
    	font-size: 95%; 
    	float:right; 
    	width: 200px; 
    	padding: 15px 1em 1em 10px; 
    	border-left: 1px solid #555; 
    }
    .right a { color: #AEB9CC;}
    .left_article { 
    	margin: 10px 0 10px 0; 
    	padding: 10px 0 10px 0;
    	border-top: 1px solid #eee; 
    	border-bottom: 1px solid #eee; 
    }
    .center { 
    	float:left; 
    	width: 500px; 
    	font-size: 95%; 
    	margin: 15px 0 5px 5px; 
    	padding: 0; 
    	background: #3C3C3C; 
    	color: #FFF;
    }
    .center a { color: #AEB9CC;}
    .footer { 
    	clear:both;
    	width: auto;
    	color:#888;  
    	font-size:90%;
    	background: #3C3C3C;
    	border-top: 1px solid #555; 
    	text-align:center; 
    	margin-top: 30px;
    	margin-right: 0px;
    	margin-left: 0px;
    	padding: 10px 10px 10px 10px;
    }
    .footer padding{
    	text-align: center;
    }
    .right ul { margin: 5px 0 20px 15px; padding : 0; list-style : none; }
    .right ul li {background:#3C3C3C url(images/li.gif) color: #F29900;	margin: 0 0 0px 0;	padding: 0 0 0 0px; }
    .right li a { color: #7D8085; }
    .right li a:hover { color: #F29900;  }
    fieldset {
    	border: 1px solid #eee;
    }
    textarea.text { 
    	height: 150px; 
    	width: 90%; 
    	border: 1px solid #ccc; 
    	background: #fff; 
    	color: #000;
    }
    textarea.text:hover { 
    	border: 1px solid #eee; 
    	background: #FFFFF4; 
    	color: #000;
    }
    input.field { 
    	border: 1px solid #ccc; 
    	background-color: #3C3C3C; 
    	width: 100px; 
    	color: #000;
    }
    input.field:hover { 
    	border: 1px solid #eee; 
    	background: #ccc; 
    	color: #000;
    }
    input.text { 
    	margin: 0; 
    	width: 110px;
    	border: 1px solid #ccc; 
    	background: #3C3C3C;
    	color: #A4B4C8; 
    }
    input.text:hover { 
    	border: 1px solid #eee; 
    }
    input.searchbutton { 
    	margin: 0; 
    	font-size: 100%; 
    	font-family: Arial, Sans-serif; 
    	border: none; 
    	background: #FFFFFF; 
    	color: #808080; 
    	padding: 1px; 
    	font-weight: bold; 
    }
    .date { 
    	color: #ccc; 
    	background: #3C3C3C;
    	text-align: right; 
    	margin: 4px 0 5px 0; 
    	padding: 0.4em 0 0 0; 
    	border-top: 1px solid #555;
    }
    .date a { color: #ccc; }
    .time { 
    	color: #192D50; 
    	float: left;
    	text-align: left; 
    	padding: 5px 0 0 15px; 
    }
    input.button { 
    	background: #FFFFF4; 
    	color: #808080;
    	border-right: 1px solid #ccc;
    	border-bottom: 1px solid #ccc;
    }
    .comments { 
    	padding: 10px 10px 8px 10px; 
    	margin: 0 0 7px 0; 
    	background: #3f3f3f; 
    	color: #000;
    }
    .commentsbox { 
    	padding: 8px 0 10px 10px; 
    	margin: 0 0 10px 0; 
    	background: #f4f4f4; 
    	color: #000;
    }
    .error {
    	color: #990000;
    	background-color: #FFF0F0;
    	padding: 7px;
    	margin-top: 5px;
    	margin-bottom: 10px;
    	border: 1px dashed #990000;
    }
    #commentlist li {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid #700000;
    }
    #commentform {
    margin: 1em 0;
    background: #3C3C3C;
    width: 280px;
    }
    #commentform textarea {
    background: #f8f7f6;
    border: 1px solid #d6d3d3;
    width: 280px;
    }
    #commentform textarea:hover {
    background: #FFFFFF;
    border: 1px solid #d6d3d3;
    }
    #commentform textarea:focus {
    background: #ffffff;
    border: 1px solid #939793;
    }
    #commentform #email, #commentform #author, #commentform #url {
    font-size: 1.1em;
    background: #f8f7f6;
    border: 1px solid #d6d3d3;
    width: 280px;
    }
    #commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
    font-size: 1.1em;
    background: #ffffff;
    border: 1px solid #d6d3d3;
    width: 280px;
    }
    #commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
    font-size: 1.1em;
    background: #ffffff;
    border: 1px solid #939793;
    width: 280px;
    }
    #commentform input{
    margin-bottom: 3px;
    }
    a img
    {
    border:none;
    }
    
     
  2. rewiaca

    rewiaca

    Регистр.:
    29 апр 2009
    Сообщения:
    192
    Симпатии:
    30
    Ты случайно не в старом ИЕ смотришь? Он не поддерживает прозрачность пнг и гиф
    Для верности можешь юзануть этот сервис http://browsershots.org/
     
  3. Outset

    Outset Писатель

    Регистр.:
    29 авг 2009
    Сообщения:
    9
    Симпатии:
    0
    This service

    Да нет, в том то и дело, что всю жизнь пользуюсь
    последними версиями Mozilla FireFox.
    Сервис, который ты указал жалуется на XHTML:
    Unsupported content type: image/jpeg. This service is for HTML or XHTML content.
     
  4. rewiaca

    rewiaca

    Регистр.:
    29 апр 2009
    Сообщения:
    192
    Симпатии:
    30
    я конечно не особо силен в ксс, но в body
    background : #3C3C3C url(images/bg.jpg) repeat-x;
    зачем здесь цвет #3C3C3C если есть картинка?

    тебе же только этот бэкграунд?
     
    Outset нравится это.
  5. Outset

    Outset Писатель

    Регистр.:
    29 авг 2009
    Сообщения:
    9
    Симпатии:
    0
    просто размер картинки как ты мог заметить в коде уже прописан(а я использую свою картинку с меньшими размерами), это не было бедой если бы, ту картинку которую я сейчас использую специально сделана под наклоном, как бы в стиле техно.
    Поэтому необходимо указать цвет заливки фона изображения, что бы задний план
    слился с основным фоном.
     
  6. whitewolff

    whitewolff Лимонадный Джо :)

    Регистр.:
    29 май 2007
    Сообщения:
    168
    Симпатии:
    33
    не в тему наверное, но старайся пути прописывать в кавычках.

    HTML:
    
    // не по феншую
    background : #3C3C3C url(images/bg.jpg) repeat-x;
    // по феншую
    background : #3C3C3C url('images/bg.jpg') repeat-x;
    
    и скинь линк в личку, гляну, мб помогу, не Кашпировские тут ведь
     
    Outset нравится это.
  7. fonclub

    fonclub Постоялец

    Регистр.:
    28 май 2008
    Сообщения:
    135
    Симпатии:
    50
    Вроде как не совсем правильно (отметил красным), у тебя стоит bakcground-color и потом еще раз bakcground с указанием цвета и картинки. Пробуй тогда так:
    HTML:
    
    body { 
    	margin:5px 0; 
    	padding:0; 
    	font: 74% Arial, Sans-Serif; 
    	color:#FFF;  
    	line-height: 1.4em;
    	background-color:#3C3C3C;
    	background-image: url('images/bg.jpg') repeat-x;
    }
    
     
    Outset нравится это.
  8. Outset

    Outset Писатель

    Регистр.:
    29 авг 2009
    Сообщения:
    9
    Симпатии:
    0
    Спасибо народ за помощь, сделал через css заменой расширением картинки на png на прозрачном фоне.
     
Статус темы:
Закрыта.