簡單的HTML和CSS背景重複

-1

我的網站是http://nickliddell.com/pieres。簡單的HTML和CSS背景重複

正如您所看到的，標題上的背景正在重複。我試圖將background-repeat:no-repeat;添加到標題中的所有div，並且仍在重複。這裏是我的header.php

<?php 
/** 
* The Header for our theme. 
* 
* @package WordPress 
*/ 
global $cubby_options; 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html <?php language_attributes(); ?>> 
<head> 
<meta charset="<?php bloginfo('charset'); ?>" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title> 
<?php wp_title('|', true, 'right'); ?> 
</title> 
<?php wp_head(); ?> 
</head> 
<body <?php body_class(); ?>> 
<center> 
<div class="header"> 
    <div class="top"> 
    <div class="container"> 
     <div class="contact left"> 
     <?php echo cubby_options_array('top_contact_info') ; ?> 
     </div> 
     <div class="follow right"> <?php echo cubby_get_social_network(array("skype","facebook",'twitter','google_plus','youtube',"linkedin",'pinterest','rss'));?> </div> 
    </div> 
    </div> 
    <div class="top2"> 
    <div class="container"> 

     <div class="logo left"><a href="<?php echo esc_url(home_url('/')); ?>"> 
     <?php if (cubby_options_array('logo')!="") { ?> 
     <img src="<?php echo cubby_options_array('logo'); ?>" alt="<?php bloginfo('name'); ?>" /> 
     <?php }else{ ?> 
     <span class="site-name"> 
     <?php bloginfo('name'); ?> 
     </span> 
     <?php }?> 
     </a><span class="tagline"><?php echo get_bloginfo('description');?></span></div> 
    </div> 
    </div> 
    <div class="menu_bottom"> 
    <?php do_action('wp_menubar','Home'); ?> 
    </div> 
    </div> 
</div> 
</center> 
<!--header-->

這裏是我的樣式表：

.top2 { 
    display:inline-block; 
    width:100%; 
    min-height:186px; 
    background:#cccccc; 
    padding:20px 0 0; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    background-repeat:no-repeat; 
} 
.container { 
    width:960px; 
    margin:0 auto; 
    background-repeat:no-repeat; 
} 
.top { 
    height:20px; 
    background:#333333; 
    padding:5px 0; 
    color:#ccc; 
    background-repeat:no-repeat; 
} 
    min-height:60px 
    margin-left:auto; 
    margin-right:auto; 
    background-repeat:no-repeat; 
} 
.top2 .menu_bottom{ 
    display: block; 
    position: absolute: 
    width: 100%; 
    bottom: -20px 
} 
.header { 
    }.center-content,.footer { 
    margin-top:20px; 
}

對不起，我是新來的HTML和CSS。我還想知道，怎麼樣在樣式表中聲明類有顏色作爲背景，但是在頁面上它顯示圖像？所有回覆讚賞:)

來源

2014-05-23 user3668491

你能減少代碼的數量，這樣它仍然顯示你的問題，但更容易讓我們閱讀嗎？ – jornane

如果這實際上是你的代碼，你應該穿過它。因爲我想不是所有事情都像你想的那樣工作。你有'min-height：60px;保證金左：自動; margin-right：auto;背景重複：不重複;沒有任何元素鏈接到它。另外，使用'margin：0 auto;' - 這將和'margin-left：auto; margin-right：auto;' – RubberPoint

那麼檢查你的代碼。因爲你有這個：

.header .top2 { 
url("http://www.nickliddell.com/pieres/wp-content/uploads/2014/05/cropped-header1.png") repeat scroll 0 0 rgba(0, 0, 0, 0) 
}

它說重複的地方。將其更改爲：

.header .top2 { 
    background-image: url("http://www.nickliddell.com/pieres/wp-content/uploads/2014/05/cropped-header1.png"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

此外，如果您是新的。像我輸入的內容一樣，你會更容易看到這個錯誤;）

來源

2014-05-23 16:42:20 RubberPoint

你在哪裏看到「.header .top2」？ – user3668491

它在你的.php文件中。它不在你的任何css文件中。所以我猜想，在''在index.php或（single.php（？））也許。 – RubberPoint

簡單的HTML和CSS背景重複

回答

相關問題