Forum Moderators: not2easy
Just wondering if someone would be kind enough to help me with a problem that has been doing my head in!
I have a gradient background image which i can get to show at the top of the page but it doesnt repeat down to cover the whole page.
body {
background: white url("<a href="http://example.com" target="_blank"><img src="http://i214.example.com/albums/cc158/ianac1/Background2.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a>");
background-repeat: repeat-x;
}
I have the above code in my head section of the html document but i'm fairly new to this.
I thought the repeat x would make it repeat down the page?
I have also tried repeat Y which didnt make a difference.
Thanks
Ian
[edited by: SuzyUK at 11:30 am (utc) on Dec. 5, 2007]
[edit reason] examplified URI's [/edit]
Welcome to Webmasterworld. 24/7 the best place on the web.
You can't have HTML in the CSS, if you want the image to link, you need to place the href {an <a>} in HTML markup, but you can have the image as a background via the CSS:
something like this:
body {
background: white url(http://i214.example.com/albums/cc158/ianac1/Background2.jpg )
background-repeat: repeat-x;
}
can't imagine that you would want to link the whole of the body element though.. so if it's a statutory requirement to give credit for the image, place a small link in the footer perhaps?
Suzy
Thank you for the very quick replies and the welcome
and thank you suzy i have put that into my css and its now working so i owe you one!
Cheers
Ian
Unfortunately i have hit another problem and was hoping someone could help.
my background works fine but i have changed the navigation bar.
When i open each page the background is fine but when i then click on a link in the navbar the page changes OK but the background is back to white again?
I'm stumped any help would be greatly appreciated
HTML code (Sample page- i have removed all insignificant text))
<html>
<head>
<Center>
<a href="http://photobucket.com" target="_blank" "align=center" ><img src="http://example.com/path/GlasgowImage.jpg" border="0" alt="...."></a>
</Center>
<LINK REL=StyleSheet HREF="style1.css" TYPE="text/css"
</head>
<body>
<div id="navbar2">
<ul>
<center>
<li><a href="History.html"><font color="#FCFCFC"> History </font> </a></li>
<li><a href="EatingOut.html "> <font color="#FCFCFC"> Eating Out </font> </a></li>
<li><a href="Nightlife.html"> <font color="#FCFCFC"> Nightlife </font> </a></li>
<li><a href="Attractions.html"> <font color="#FCFCFC"> Attractions </font> </a></li>
<li><a href="Football.html"> <font color="#FCFCFC"> Football </font> </a></li>
<li><a href="Links.html"> <font color="#FCFCFC"> Links </font> </a></li>
</center>
</ul>
</div><center>
<h1><em>The History of Glasgow</em></h1>
</center>
<div id="div1">
<br>
<br><h2>Birth of a City - St Mungo: Before and after</h2>
<div id="div2"></div>
</body>
</html>CSS code:
body {
background: white url(http://example.com/path/Background2.jpg )
background-repeat: repeat-x;
}h1 {font : 24pt Arial; color: black;}
h2, h3, h4, h5 {font : 16pt Arial; color: black;}#longlines {
clip : auto;
overflow : scroll;
}#div1 { float:left; width:75%;}
#div2 { margin-left:65%; width:25%;}div#navbar2 {
height: 10px;
width: 100%;
background-color: transparent;
}div#navbar2 ul {
margin: 10px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
line-height: 30px;
white-space: nowrap;
}div#navbar2 li {
list-style-type: none;
display: inline;
}div#navbar2 li a {
text-decoration: none;
padding: 7px 5px;
color: transparent;
}div#navbar2 lia:link {
color: transparent:
}div#navbar2 lia:visited {
color: #CCC;
}div#navbar2 lia:hover {
font-weight: bold;
color: #FFF;
background-color: #3366FF;
}
[edited by: SuzyUK at 9:15 pm (utc) on Dec. 6, 2007]
[edit reason] examplified.. [/edit]
Anyone any ideas?
Cheers
Ian
