Question

Home Page Screenshot

我需要做一些事情来修复我的背景。

1。）我需要将它向右移动，以便它与水平导航栏和下面的图片完美对齐。 2.）我需要将其向下移动，以便在水平导航栏上方看不到任何内容。

背景图片只是棕色圆圈，里面有白色圆圈（见右图）。

这是我的完整代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--

#banner {width:100%}
#banner img {width:100%;height:auto}

nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-align:center;
background-color:#c0872e;}
nav li {display:inline-block;background-color:
#c0872e;font family:Georgia;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:22px;
font-family:Georgia; background-color:#c0872e;}
nav a:hover {text-decoration:none}

a{float:left;
margin-right:58px;
margin-left:58px;
color:#000;
text-decoration:none;
}

body {background-image: url("daikinbackground1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

-->
</style>

<meta charset="utf-8"/>
<title>daikininc.com</title>
</head>

<body>
<div id="body">
<header>
<div>
<div style="text-align:center" id="banner">
<title="daikinincbanner">
<img src="daikinbanner1.jpg" border="0" alt="daikinbanner1">
</div>
<!--
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
</ul>
</nav>
-->
<nav style="text-align:center">
<img style ="height:300px" width="1355" src="navbarimage1.jpg">
</nav>
<br>
<p style="text-align:center;font-family:WindsorDemi;">
<font size="4">
Welcome to daikininc.com! Home to the world's greatest 
eggorll wrappers and noodles.
</font>
</p>

<br><br><br><br><br><br><br><br><br>

</nav>
</header>

<section>
<aside>
</aside>
<article>
</article>

<footer>
</footer>

</div>

</body>
</html>

谢谢。

Answer 1

CSS：

body {background-image: url("daikinbackground1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 126px 50px;}

background-position控制背景图像的x和y坐标。

编辑背景图像

1 个答案: