Background vs background-repeat property

@skiaboxAug 08.2007

I have a div element and I style it with this css:

background: url(image) repeat-x top;

so that I get my image horizontally repeated at the upper part of the div element.

I also tried this one :

background-image : url(image);
background-repeat: repeat-x;

but this gave me a div filled up with the image (all the way down).

Any ideas why the second way doesn’t work as it work here?

~~[url]~~http://www.searchengineworld.com/r/redirect.cgi?f=83&d=3416696&url=http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeatx[/url]

to post a comment

CSS

7 Comments(s) _↴

@FangAug 08.2007 — #Should work correctly.

Can you give the full document.

@skiaboxauthorAug 08.2007 — #lounge.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Head First Lounge</title>

<link type="text/css" rel="stylesheet" href="lounge.css" media="screen" />

<link type="text/css" rel="stylesheet" href="print/print.css" media="print" />

</head>

<body>

<p><img src="images/logo.gif" alt="Head First Lounge" /></p>

<h1>Welcome to the Head First Lounge</h1>

<p>

The Head First Lounge is, no doubt, the biggest trendsetter in Webville.

Stop in to sample the eclectic offering of elixirs, teas, and coffees,

or, stay a bit longer and enjoy the multicultural culinary menu that

combines a harmony of taste, texture, and color with the best in fresh

and healthy ingredients.

</p>

<p>
   During your stay at the lounge, you'll enjoy a smooth mixture of 
   ambient and mystic sounds, filling the lounge and adding an extra dimension 
   to your dining experience. The decor surrounds you with the relaxing sentiments 
   of sights from eras past. And, don't forget, the lounge offers free wireless 
   access to the Internet, so bring your laptop. 
  </p>
 
  <p id="guarantee">
   Our guarantee: at the lounge, we're committed to providing you, 
   our guest, with an exceptional experience every time you visit. 
   Whether you're just stopping by to check in on email over an 
   elixir, or are here for an out-of-the-ordinary dinner, you'll 
   find our knowledgeable service staff pay attention to every detail. 
   If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
  </p>
 
  <p>
   But that's not all; at night, join us in the backroom as our resident 
   DJ spins a choice selection of trance and drum&amp;bass beats across 
   our spacious tiki-themed dance floor. Or just hang out in one of our 
   comfy white vinyl booths at the dance bar. You can have your elixirs 
   delivered from the main lounge right to the dance floor. If you've 
   had enough of the beat, just head back to the lounge area to relax.
   And, no matter where you find yourself in the lounge, you'll always be 
   connected with our wireless Internet access.
  </p>
 
  <p>
   Now that you've experienced the lounge <em>virtually</em>, isn't 
   it time to check us out <em>for real</em>? We're located right
   in the heart of Webville, and we've created some 
   <a href="about/directions.html"
   title="Detailed Directions to the Lounge">detailed directions</a> 
   to get you here in record time. No reservations necessary; 
   come and join us anytime.
  </p>

<div id="elixirs">

<h2>Weekly Elixir Specials</h2>

<p>

<img src="images/yellow.gif" alt="Lemon Breeze Elixir" />

</p>

<h3>Lemon Breeze</h3>

<p>

The ultimate healthy drink, this elixir combines

herbal botanicals, minerals, and vitamins with

a twist of lemon into a smooth citrus wonder

that will keep your immune system going all

day and all night.

</p>

<p>
   <img src="images/chai.gif" alt="Chai Chiller Elixir" />
  </p>
  <h3>Chai Chiller</h3>
  <p>
   Not your traditional chai, this elixir mixes mat&eacute;
   with chai spices and adds an extra chocolate kick for
   a caffeinated taste sensation on ice.
  </p>
 
  <p>
   <img src="images/black.gif" alt="Black Brain Brew Elixir" />
  </p>
  <h3>Black Brain Brew</h3>
  <p>
   Want to boost your memory?  Try our Black Brain Brew
   elixir, made with black oolong tea and just a touch
   of espresso.  Your brain will thank you for the boost.
  </p>
 
  <p>
   Join us any evening for these and all our 
   other wonderful 
   <a href="beverages/elixir.html" 
   title="Head First Lounge Elixirs">elixirs</a>.
  </p>

</div>

<h2>What's playing at the Lounge</h2>
  <p>
   We're frequently asked about the music we play at the lounge, and no wonder, 
   it's great stuff. Just for you, we keep a list here on the site, updated weekly. 
   Enjoy.
  </p>
  <ul>
   <li>Buddha Bar, Claude Challe</li>
   <li>When It Falls, Zero 7</li>
   <li>Earth 7, L.T.J. Bukem</li>
   <li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
   <li>Music for Airports, Brian Eno</li>
  </ul>
 
  <p>
   &copy; 2005, Head First Lounge<br />
   All trademarks and registered trademarks appearing on this site are 
   the property of their respective owners.
  </p>

</body>

</html>

--------------------------------------------------------------------------
lounge.css :

body {

font-size: small;

font-family: Verdana, Helvetica, Arial, sans-serif;

line-height: 1.6em;

}

h1, h2 {

color: #007e7e;

}

h1 {

font-size: 150%;

}

h2 {

font-size: 130%;

}

#guarantee {

line-height: 1.9em;

font-style: italic;

font-family: Georgia, "Times New Roman", Times, serif;

color: #444444;

border-color: white;

border-width: 1px;

border-style: dashed;

background-color: #a7cece;

padding: 25px;

padding-left: 80px;

margin: 30px;

margin-right: 250px;

background-image: url(images/background.gif);

background-repeat: no-repeat;

background-position: top left;

}

#elixirs {

border-width: thin;

border-style: solid;

border-color: #007e7e;

width: 200px;

 padding-right: 20px;
   padding-bottom: 20px;
   padding-left: 20px;
 
   margin-left: 20px;
 
   text-align: center;
 
   background: url(images/****tail.gif) repeat-x top;
   }

files : http://www.headfirstlabs.com/books/hfhtml/code/HFHTML_ch11.zip

@FangAug 08.2007 — ##elixirs div does not exist in the zipped html.

Change:

#elixirs {
 font-family: Verdana, Helvetica, Arial, sans-serif; 
 width: 200px;
 [COLOR="Green"]background:#fff url("../images/background.gif") repeat-x top center;[/COLOR]
 padding: 0px 20px 20px 20px;
 margin-left: 25px;
 color: #000000;
 [COLOR="Green"]border: 1px double #007e7e;[/COLOR]
 text-align: center; 
 font-size: 80%;
 }

@skiaboxauthorAug 08.2007 — #You must use my files (above is the code) and use images/****tail.gif for the image.

@skiaboxauthorAug 08.2007 — #The root directory contains lounge.html and lounge.css with the code I give above.The other folders can be found in the zip file.

The question is why I can't use :

background-image : url(images/****tail.gif);

background-repeat: repeat-x;

instead of background: url(images/****tail.gif) repeat-x top;

@FangAug 08.2007 — #Both work as expected, the same result.

@skiaboxauthorAug 08.2007 — #sorry.it was my fault!now it works!

Also in #CSS _↴

WordPress Site: Help me obtain CSS selectors for items with "class=children"What font/size do they use in bloggs?Division Stretching

Success!

Help @skiabox spread the word by sharing this article on Twitter...

Tweet This

Background vs background-repeat property

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Background vs background-repeat property

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴