Forum Moderators: not2easy
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?
[w3schools.com...]
<!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>
<h1>Welcome to the Lounge</h1>
<p>blah blah</p>
<p>During your stay at the lounge, ...</p>
<p id="guarantee">Our guarantee: ....</p>
<div id="elixirs">
<h2>Weekly Elixir Specials</h2>
<p><img src="yellow.gif" alt="Lemon Breeze Elixir" /></p>
<h3>Lemon Breeze</h3>
<p>The ultimate healthy drink, .....</p>
<p><img src="/chai.gif" alt="Chai Chiller Elixir" /></p>
<h3>Chai Chiller</h3>
<p>Not your traditional chai, ....</p>
<p><img src="black.gif" alt="Black Brain Brew Elixir" /></p>
</div>
<h2>What's playing at the Lounge</h2>
<p>We're frequently asked about the music we play at the lounge,....Enjoy.</p>
<ul>
<li>.....</li><li>.....</li><li>.....</li>
</ul>
<p>© 2005, The 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/cocktail.gif) repeat-x top;
}
[edited by: SuzyUK at 2:14 pm (utc) on Aug. 8, 2007]
[edit reason] shortened code sample per charter [/edit]
Have you tried validating your CSS file [jigsaw.w3.org] to make sure there aren't any parse errors (missing/incorrect puntuation) which would cause some rules to be ignored..
alternatively are you sure you're not over-ruling that repeat rule with the more general background shorthand property later in the Cascade?
Maybe try removing all other css first, if that displays the background as expected add back in the rest of the CSS bit by bit to see what causes it to stop working as expected.
didn't work as it should (only upper side filled with the graphic) so I used background: url(image) repeat-x top; instead and it worked(it showed the graphic only at the top of the div element).
I never used both rules at the same time.
My question is why the 1st rule cover all of the div element's surface.
Thnx for the answers!
according to the code you posted above, I tried both ways with an png and both worked fine in IE and FF - (it's the elixirs div, yes?)
which browsers did the longhand way not work in for you?
just a small test to try if you want, try swapping the order of the print stylesheet and the screen one in the source, or comment out the print one temporarily - it shouldn't make a difference but some of print media rules have been know to affect screen ones in IE I think..
info added: image is 84px x 70px gif
[edited by: SuzyUK at 2:17 pm (utc) on Aug. 8, 2007]
[edit reason] no URLs, per TOS, thanks [/edit]
also before I had to remove the link to your files (please see the guidelines [webmasterworld.com] pinned to the top of the forum for more info..) I took a look at your files
The linked files were actually incomplete - they did not have the "elixirs" div in the HTML code or the CSS file - I presume that is the div which has the repeating image .. but anyway when I input the HTML and CSS as it is shown in your code in above posts - again the image showed repeating across the top using either way of coding.
code tried..
#elixirs {
......
/* background: url(images/cocktail.gif) repeat-x top; */
background-image: url(images/cocktail.gif);
background-repeat: repeat-x;
}
