CODEWITHSUNDEEP
htmlcssimagebackground
HappyHands31
HappyHands31

Reputation: 4101

Editing Background Image

Home Page Screenshot

I need to do a few things to fix my background.

1.) I need to move it over to the right so that it lines up perfectly with the horizontal navigation bar and the pictures below it. 2.) I need to move it down so that won't be seen at all above the horizontal navigation bar.

The background image is just the brown circles with white circles inside them (seen on the right).

Here is my full code:

<!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>

Thank you.

Upvotes: 1

Views: 89

Answers (1)

HappyHands31
HappyHands31

Reputation: 4101

CSS:

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

background-position controls x and y coordinates for background image.

Upvotes: 1

Related Questions