如何用css3重複居中主要內容的背景圖像

我一直在嘗試在CSS3的HTML頁面上實現特定的外觀（採用基礎框架的嬰兒步驟）。我想主要內容由重複的背景圖像的側翼（有點像這個公共例子：public site - 即該博客的內容是由他的形象「包圍」這是我的app.css文件：如何用css3重複居中主要內容的背景圖像

body { 
    background: url('../img/TCBlogo-beta.jpg'); 
}

我的形象是388px由261px這裏： image for my test

這裏是我的home.html的（重複JPG文件不「側翼」的，每邊的div;它「覆蓋」的內容）：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title>Welcome</title> 
<link rel="stylesheet" href="css/foundation.css" /> 
<link rel="stylesheet" href="css/app.css" /> 
<script src="js/vendor/modernizr.js"></script> 
</head> 
<body> 
<div class="row"> 
    <div class="large-4 columns"> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
    </p> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
    </p> 
    </div> 
    <div class="large-4 columns"> 
     <h1>Welcome to my site</h1> 
    </div> 
    <div class="large-4 columns "> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
    </p><p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
    </p><p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin 
    urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. 
    </p> 
    </div> 
</div> 
<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script> 
<script> 
    $(document).foundation(); 
</script> 
</body> 
</html>

來源

2014-02-07 John Adams

通過疊加你的意思是在文本的頂部？ –

是的。例如，如果我在上面的身體中將我的css更改爲背景色：黃色，那麼整個寬屏幕都是黃色的。我希望div的顏色是白色，並且背景圖像（或顏色）填充左右邊距。我確定我忽略了一些非常基本的東西。謝謝你的時間。 –

在你的CSS做，其中width:***px;是，你希望你的「白div的」像素所需的寬度是：

body{background-color:yellow;} 
.row{width:***px;margin:0 auto;background-color:white;}

一個例子來看看這個JSFiddle。

來源

2014-02-08 10:19:59

謝謝。你很高興迴應。我也一夜之間實現了類似的方法。事後看來，我的問題很愚蠢。感謝您的時間。我必須更多地瞭解CSS和JSFiddle。 –

是的，我的榮幸！每當你需要幫助時給我留言:) –

如何用css3重複居中主要內容的背景圖像

回答

相關問題