背景画像がページの一番下まで繰り返されたくない理由がわかりません。新しいアイテムを追加するたびに高さを増やさなければなりません。明確で異なる位置属性を試してみましたが、継ぎ目はありません。ここに私のCSSがあります:
body {
background-color: lightGrey;
}
.wrapper {
background-image: url("../img/cork.png");
width: 1260px;
height: 100%;
margin: 0px auto;
padding: 0px;
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,1);
box-shadow: 0px 0px 15px rgba(0,0,0,1);
clear:both
}
.header {
margin: 0 auto;
width: 94%;
text-align: center;
font-weight: bold;
font-size: 1.2em;
background-color: #fff;
}
.header {
margin: 0 auto;
width: 94%;
text-align: center;
font-weight: bold;
font-size: 1.2em;
background-color: #fff;
}
.container {
width: 400px;
height: 400px;
margin: 10px;
padding: 0;
float: left;
}
.item {
width: 400px;
height: 400px;
float: left;
background-color: #fff9a6;
-webkit-box-shadow: 0px 10px 15px rgba(0,0,0,.5);
-moz-box-shadow: 0px 10px 15px rgba(0,0,0,.5);
box-shadow: 0px 10px 15px rgba(0,0,0,.5);
}
.itemTitle {
margin: 10px 0px 0px 10px;
padding: 0px;
font-weight: bold;
font-style: italic;
}
.itemDesc {
margin-left: 20px;
margin-right: 10px;
margin-bottom: 0px;
padding: 5px;
font-weight: regular;
}
.item img {
width: 350px;
margin: 10px 25px;
/* padding: 0px 0px 10px 10px;
*/}
.empty {
width: 353px;
height: 353px;
margin: auto;
text-align: center;
font-size: 25px;
font-weight: bold;
}
そして、ここにHTMLがあります
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/style.css">
<title>For Sale</title>
</head>
<body>
<div class="wrapper">
<div class="header">To have your item added, please click <a href="mailto:xxx@xxx.com?subject=Item for sale...&body=Item%20Name%3A%0ABrief%20Description%3A%0ASale%20Price%3A%0AWho%20To%20Contact%3A">HERE</a>
<br />Please attach any images to the email that you would like to appear on the listing.
</div>
<div class="container">
<div class="item">
<img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold">
<p class="itemTitle">Sectional Sofa - $400</p>
<p class="itemDesc">Sofa is a brown twill. Had 1.5yrs and is in great shape, no tears, rips or stains. Full dimensions are 23"H x 116.25"W x 61"D and weighs 250lb.
<br />If interested, contact Nick</p>
<img src="img/sofa.png" alt="sofa">
</div>
</div>
<div class="container">
<div class="item">
<img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold">
<p class="itemTitle">Antique Dining Room Table & Chairs - $500 for set</p>
<p class="itemDesc">Solid Mahogany Brandt Brass Claw Foot Drop Leaf Dining Table circa 1920 with (6) Chairs. Three of the chairs have needlepoint work. Table could stand to be refinished, but flaws give it character. Perfect for a formal dining room. Table top pads come with. If interested, contact Amy</p>
<p style="margin-left:10px; margin-bottom: 0px;padding: 0px; font-style: italic;">(click image for larger pic)</p>
<a href="img/amy.png" target="_blank">
<img src="img/amyThumb.png" alt="dining room table">
</a>
</div>
</div>
<div class="container">
<div class="item">
<img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold">
<p class="itemTitle">ProForm 345s CrossWalk Treadmill - $100</p>
<p class="itemDesc">Gently used treadmill – great for home use. Various workouts including cardio and fat burning. This is a great purchase if this is your first treadmill. Easy to use – just plug in and go! If interested, contact Amy</p>
<p style="margin-left:10px; margin-bottom: 0px;padding: 0px; font-style: italic;">(click image for larger pic)</p>
<a href="img/treadmill.png" target="_blank">
<img src="img/treadmillThumb.png" alt="dining room table">
</a>
</div>
</div>
<div class="container">
<div class="item">
<img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold">
<p class="itemTitle">1996 Nissan Pickup - $3000</p>
<p class="itemDesc">Sale 154,000 miles, 5 speed manual, A/C, CD player, bed liner, remoteless key entry (not a typo). This truck has provided me with 12 years and over 130,000 miles of reliable transportation. The price is firm and I wouldn’t mind keeping it as a second vehicle if I can’t find a buyer. If interested, contact John</p>
<img src="img/johnTruck.png" alt="John Truck">
</div>
</div>
<div class="container">
<div class="item">
<!-- <img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold"> -->
<p class="itemTitle">Gold’s Gym Stride Trainer Elliptical - $280</p>
<p class="itemDesc">Gently used elliptical, less than two years old. Set your own resistance level or choose from the six pre-set workouts. Displays time, distance, calories, pulse, speed, and RPM. Battery powered and easy to use. Contact Rachel if interested.</p>
<a href="img/rachel.png" target="_blank">
<img src="img/rachelThumb.png" alt="treadmill">
</a>
</div>
</div>
<div class="container">
<div class="item">
<!--<img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold">-->
<p class="itemTitle">Kenmore Washer & Whirlpool Dryer - $300 for the set</p>
<p class="itemDesc">White, large capacity washer and dryer. They both work great and are not very old. Both have various settings. Must be sold as a set. If interested, contact Rachel </p>
<a href="img/rachelWasher.png" target="_blank"><img src="img/rachelWasherThumb.png" alt="Alt Text"></a>
</div>
</div>
<div class="container">
<div class="item">
<!--<img style="position: absolute; margin-top: 90px;" src="img/Sold-Stamp.png" alt="sold">-->
<p class="itemTitle">Sectional Couch - $150</p>
<p class="itemDesc">Red, microsuede material. There are a few stains, but the couch could easily be reupholstered (I used throw pillows/blankets to hide the stains). Great for college student (apartment, dorm, small living room, etc.). About 5 feet long. Separates into two pieces for moving.</p>
<a href="img/rachelCouch.png" target="_blank"><img src="img/rachelCouchThumb.png" alt="Alt Text"></a>
</div>
</div>
</div>
</body>
</html>