|
CSS - 100% Background Tile Problem
I'm trying to tile the background of my menu infinitely so the design stretches to the very edge at the bottom of the viewport. Unfortunately, for some strange reason, it just decides to stop in the middle of the page. I've tried height:100% in various places with no luck. Help would be immensely appreciated!
To see what I'm talking about, go here . My page code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <title>Z Studios ::</title> <style type="text/css" title="currentStyle" media="screen"> @import "zstudios.css"; </style> </head> <body> <div id="pageHeader"> <h1><span>Z-Studios</span></h1> </div> <div id="mainnav"> <ul> <li id="navLife"><a href="#life">Life</a></li> <li id="navMovies"><a href="#movies">Movies</a></li> <li id="navArt"><a href="#art">Art</a></li> <li id="navBusiness"><a href="#business">Business</a></li> </ul> </div> <div id="page"> <div id="mainleft"> <div id="mainleftTop"> </div> </div> <div id="maincenter"> <div id="content"> kjfdlsj (repeated over and over to test background stretching) </div> </div> <div id="mainright"> <div id="mainrightTop"></div> </div> </div> </body> </html> ... and my stylesheet: Code: /* Header/Logo - using an image to replace text in an h1. */
#pageHeader h1 {
background: transparent url('images/header.jpg') no-repeat top left;
width: 774px;
height: 148px;
float: none;
margin: 0;
}
#pageHeader h1 span {
display:none
}
/* Main menu bar */
#mainnav {
width: 774px;
height: 38px;
border: 0;
padding: 0;
margin: 0;
top: 78px;
left: 0px;
}
#mainnav ul {
width: 774px;
height: 38px;
background: url(images/menu.gif) no-repeat;
margin: 0;
padding: 0;
position: relative;
left: 0px;
}
#mainnav ul li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#mainnav ul li, #mainnav a {
height: 38px;
display: block;
}
#mainnav ul li a {
text-indent: -9999px;
text-decoration: none;
}
/* Mouseover buttons */
#navLife {
left: 100px;
width: 60px;
}
#navMovies {left: 250px; width: 85px;}
#navArt {left: 430px; width: 60px;}
#navBusiness {left: 565px; width: 100px;}
#navLife a:hover {background: transparent url(images/menu.gif) no-repeat -100px -38px;}
#navMovies a:hover {background: transparent url(images/menu.gif) -250px -38px no-repeat;}
#navArt a:hover {background: transparent url(images/menu.gif) -430px -38px no-repeat;}
#navBusiness a:hover {background: transparent url(images/menu.gif) -565px -38px no-repeat;}
html, body {
margin:0px 0px 0px 0px;
padding:0px;
background-image: url("images/bg.jpg");
height: 100%;
}
#page {
height: 100%;
}
#maincenter {
background-image:url("images/content_border_top.gif");
background-repeat: no-repeat;
width:529px;
float:left;
padding-top:36px;
height: 100%;
}
#content {
background-image:url("images/content_bg.jpg");
background-repeat: repeat-y;
text-align: left;
padding-left: 30px;
padding-right: 30px;
}
#mainleft {
width:190px;
float:left;
background-image:url("images/menu_left.gif");
background-position: 0px 67px;
padding-bottom: 36px;
height: 100%;
}
#mainright {
width:55px;
height: 100%;
float:left;
background-image:url("images/right_border.gif");
background-repeat: repeat-y;
background-position: 0px 67px;
padding-bottom: 36px;
}
#mainleftTop {
padding-left: 55px;
padding-top: 67px;
text-align: center;
background-image:url("images/top_left.gif");
background-repeat: no-repeat;
}
#mainrightTop {
width:55px;
float:left;
background-image:url("images/top_right.gif");
background-repeat: no-repeat;
padding-bottom:0;
}
Thanks again! ~Zach Similar TutorialsI've got two DIVs that flank my page content. Here's some CSS: #leftside { width: 35px; background-image: url("_images/left.gif"); background-repeat: repeat; float: left; clear: both; overflow: auto; } As you can see, I've used both clear and overflow and the background will not tile in ANY browser, PC or Mac. I've applied combinations or overflow and clear to every DIV on the page and nothing works. It just will not tile unless I put something in the DIV (like text or an image) or if I hardcode the height, which is unacceptable since every page will differ. I'm at my wits end. I've spent the last 4 hours searching for answers and none seem to work. Hiya, So what I'm trying to do is have a base image used as a background that sits on the left side, and then another image to be used to tile across the rest of the page from where the first one left off. I'm not really sure how/if you can easily do something like that, and I can't seem to find anything when I'm searching. And when its all said and done, text would still go over both images as if it was one image. Thanks, -Sky Hi there, I'm trying to get the background image to repeat down the page, but I think the float is messing it up since it's outside the element, or something like that. The background image call works fine, you can test it if you enlarge the #Middle height values. http://www.wpforrealestate.com/prod...es/Design2/www/ I've had this problem before, but figured it out through the help here and some links on floats, but this time I'm just not getting it for some reason. Any ideas? Thanks. I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out. I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image. HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title> </head> <body> <div id="content"> <div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div> <div class="left"> <div id="navigation"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="members/index.htm">Members</a></li> <li><a href="contact.htm">Contact Us</a></li> </ul> </div> <div id="leftinfo"> <p>We meet for breakfast every Tuesday,<br /> 7 - 8:30 AM. <br /> at the Neal House at<br /> 1311 East Hardy St.</p> </div> </div> <div class="right"> <p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings. </p> </div> <div id="footer"> <p>Site built by Robert Greenstreet</p> </div> </div> </body> </html> CSS: Code: html
{
width:100%;
}
#logo img
{
margin:10px 0px 0px 20px;
width:400px;
height:100px;
}
img
{
border:0px;
}
a:link
{
color:#29497f;
}
a:visited{
color:#5dd0c0;
}
body
{
width:650px;
margin-left:auto;
margin-right:auto;
background-color:#29497f;
}
#content
{
/*height:500px;*/
width:650px;
background-image:url('../images/bg1.png');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
margin-top:-10px;
}
.left
{
position:absolute;
left:auto;
top:120px;
width:15em;
margin-left:12px;
padding-left:0px;
}
.left ul
{
list-style-type:none;
margin-left:-33px;
font-family:sans-serif;
}
#leftinfo
{
margin-left:10px;
width:9em;
}
.right
{
position:absolute;
left:auto;
top:120px;
width:27em;
margin-left:12em;
font-family:sans-serif;
}
.right p
{
color:#000000;
}
#memberlist ul
{
margin-left:-40px;
}
#memberlist a:visited{
color:#6a92d4;
text-decoration:none;
}
#footer
{
position:absolute;
top:400px;
width:650px;
margin:0 auto;
}
Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though. Like I said, no rush. This isn't a paid gig So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges. I've set up the css as follows: body { background: #000 url(gradient.jpg) repeat-x; margin: 0; } Here's where I run into my problem... I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely. <div id="bg_image"></div> #bg_image { width: 100%; height: 1100px; background: url(images/bg_image.jpg) no-repeat top center; margin: 0; position:absolute; } This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars. This makes perfect sense of course I just can't come up with an alternative. If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content. I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve. Any suggestions would be greatly appreciated! Thanks, Josh Hi All, I need someone's eye to find mistake in my simple code which is not responding in FF. I have one main div and 2 sub divs under that main div. The main div contains Background-color: white which, FF is not showing. It is working in IE but FF is not showing it. I don't know if I am missing something here but I am not able to figure out what is the problem here? Can some one please point out any error from the below code. I will be greatful to you. Thank you. PHP Code: <html> <head> <title>Untitled 2</title> <style> #Navigation { width: 779px; height: 25px; background-color: #CCCC33; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #222; text-align: left; padding-top:2px;} #ContentMain { width: 779px; background-color: #fff;} #ContentBody { width: 579px; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000; background-color:yellow; text-align: left;} #ContentRight { width: 200px; float: right; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000; background-color:green;} </style> </head> <body bgcolor="red"> <center> <div id="Navigation"><span style="padding: 10px;">Home | SiteMap | Contac Us</span></div> <div id="ContentMain"> <div id="ContentBody">A<br>B<br>A<br>B<br>A<br>B<br></div> <div id="ContentRight">A<br>B</div> </div> </center> </body> </html> I'm redesigning my website comdots.com. I'm puzzled by my body background line. If I delete the repeat-x; statement I get no background, just a white background. What I was expecting was that the background would repeat itself down both sides and across the bottom, which is what want. If I include the repeat-x; statement I get what you would expect and as shown on my website. So what should I change in my style.css file in order to get my background on the top, bottom, left, and right. Hi mates. Can someone please give me some support on how to fix this. http://www.caprelations.com/cap.htm That is the site im working on. The white in the back is a div, and I have applied width and height properties to it, but it seems not to follow that. You see I dont want the white to exceed down that far, I want it to stop right underneath where it says click here for brochure. Any idea on how to fix this? Please see http://tinyurl.co.uk/33te In the div #maincontainer I have had to set a height of 480px just to get the background to show. You will see that in IE the background extends all the way down the page but in FF only by 480px If I remove the height then the background doesn't show up in either IE or FF at all. This is confusing me because normally the background repeats fine all the way down without any height setting. I don't want to set a fixed height because each page is different. Also there's a gap above the main image in FF which I'd like to remove. thanks for any help css - #maincontainer { background-image: url(images/mainbackground.gif); background-repeat: repeat-y; height: 480px; } Ok I have a two column layout, because of limitations set on the structure of the pages html (don't ask) the only way I could figure out of making the two columns both (visually) the same height (as their content will vary dynamically) is to do the following fudge - to put the background column images as the background to a container div which then I put the columns into: Code:
#container {
width: 620px;
background: scroll url(<cfoutput>#path#</cfoutput>two_cols_bg.gif) repeat-y 2px 0px;
}
#left-column {
padding-left: 2px;
width: 178px;
float: left;
}
#right-column {
width: 440px;
float: right;
}
<!-- two main column container box -->
<div id="container" name="container">
<!-- start left (search) column -->
<div id="left-column" name="left-column">
content
</div>
<div id="right-column" name="right-column">
content
</div>
</div>
This works fine in IE (5.5 at least anyway) but netscape the background doesn't show through (even if I set the left & right column backgrounds manually to their default of transparent). However the background does show up if I put some content directly into the container div, but only for the lines where content is there - it still doesn't show up behind either of the column divs. Any ideas? Also I'm using the name="" attribute as I'm sure I remember reading that some versions of NS don't like the id="" attribute and use name="" instead, but I can't find clarification on this. Thanks in advance. -D I'm using the following for a basic two column layout. I'd like the nav div to have a background, repeating horizontally once, but what I'm doing isn't working. The other thing I'd like to do is restrict the hight of the div to exactly the hight of the background image... Ideas? Code: <style type="text/css">
body,
html {
margin:0;
padding:0;
background:url("./images/bg_test.gif") repeat-y center top;
color:#000;
}
body {
min-width:962px;
}
#wrap {
margin:0 auto;
width:962px;
}
#header {
background:#9c9;
}
#header h1 {
padding:5px;
margin:0;
}
#nav {
background:url("./images/nav_bg.gif") repeat-x
padding:5px;
text-align: center;
}
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
display:inline;
margin:0;
padding:0;
}
#main {
float:left;
width:712px;
}
#main h2, #main h3, #main p {
padding:0 10px;
}
#sidebar {
float:right;
width:240px;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 10px 0 0;
}
#footer {
background:#cc9;
clear:both;
}
#footer p {
padding:5px;
margin:0;
}
</style>
Hey Guys, as you see I'm new here and it would be quite cool if someone here can help me. i need this problem to be solved.. finally^^ So here's the problem: I'm on starting a new website and the guy for the graphics sent me his design. Looks quite cool but there's one problem: There's a background which needs to be separated into three parts. To make my problem clear i made a short sketch, see he As you see, Part I is always in the top left corner, ok that shouldn't be the problem. But here is where it gets tricky: No matter which screen resolution there is, Part II should show up in the top right corner. And the next Problem is: Part III should always be on the bottom, and these two things are a problem^^ Anyone got an idea? Would be quite yool if someone knows what to do.. Lukas I don't know if this has been adressed or not but I am having a problem using the background:url(images/stuff.jpg); and the background-image: .... I been trying to set an elements background but I get nothing for the background it will not apper even if I do a simple code like this this is just an example : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> CSS Code:
div#top p {
background:url('image/logo.gif');
}
I would do something like this and it will not show the bg image I mean this is just a simple code I have done it in the past but I don't know why I am not able to see the bg image is there a rule I missed somewhere if so which one well hope you can help me Hello, I'm currently developing a new website for a clan but Internet Explorer isn't displaying the background image of the content area correctly. It pushes the content area ~4px to the right from where it should be. I've tried reducing the size of the navigation element but that didn't work and in fact had the opposite effect of what I was looking for. For some reason I can't link to an image, nor to the site itself to show you the error. This is the code applicable to the content area. Code: #content
{
width:770px;
background-image:url(images/backgrounds/conbg.png);
background-repeat:repeat-y;
font-size:11px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 70px;
margin-left: 130px;
margin-right: 0px;
vertical-align:top;
}
#contentlimit
{
width:690px;
}
#condiv
{
width:770px;
margin-left: 130px;
margin-right: 0px;
}
And this the Navigation element: Code: #nav
{
width:130px;
display:block;
float:left;
vertical-align:top;
margin: 0px 0px 0px 0px;
}
.mlink a
{
display: block;
color: #666666;
background-image:url(images/backgrounds/link.jpg);
width: 130px;
padding: .0px .0px;
height:15px;
text-decoration: none;
text-indent: 10px;
}
.mlink a:hover
{
color: #333333;
text-decoration: none;
background-image:url(images/backgrounds/linkhov.jpg);
}
At last check, with this current style sheet, the code was valid. Any help appreciated, Cold Hi, My code validates apart from some Mozilla specific stuff at the bottom. Basically, in the socialbes-hover' part towards the end i have the background-color set to #F9F7ED which works fine in Firefox however in IE it always reverts back to the earlier code of a:hover { color: #F9F7ED; background-color: #006E2E and i cant seem to get it right whatever it try! please help me its driving me mad arghh lol thanks Code: .style1 a:active {
color: #FFCC00;
font-size: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style1 a:link {
color: #FFCC00;
font-size: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style1 a:visited {
color: #FFCC00;
font-size: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style1 a:hover {
color: #FFCC00;
font-size: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
color: #D15600; text-decoration:none
}
a:visited {
color: #D15600; text-decoration:none
}
a:hover {
color: #F9F7ED; background-color: #006E2E
}
.style1 {color: #D15600}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: smaller; }
.style9 {color: #D15600; font-size: larger; }
/************Main Menu******************/
.menu a:link {
color: #36393D; text-decoration:none
}
.menu a:visited {
color: #36393D; text-decoration:none
}
.menu a:hover {
color: #D15600; background-color: #F9F7ED
}
/************Comments******************/
.comments :link {
color: #D15600; text-decoration:none
}
.comments :visited {
color: #D15600; text-decoration:none;
}
.comments :hover {
color: #36393D; background-color: #F9F7ED
/************Sociables******************/
}
.sociable-hovers {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
background-color: #F9F7ED;
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
color: #36393D;
background-color: #F9F7ED;
}
I am having a problem with back-ground repeat, it works fine in IE7 and most browsers except IE6 and lower, im not sure what to do? Website is: http://www.artandcraftsdirect.com/ This only causes a problem in IE6, not Firefox or Opera. The page in question is: http://www.kbs.com.au/index2.asp CSS is at: http://www.kbs.com.au/kbs2.css The problem is that the 'Business Services' rollover is appearing further down the problem where it shouldn't. If I take the links (<a> tags) from the two <p> tags further down the page, the images disappear, so it's somehow linked to the classes assigned to links, but I can't figure out how or why or how to fix it. I tried adding a class just for the offending <p> tags which sets background: none, but that didn't work either. Anyone got any ideas what's going wrong? I have a horizontal ul: Code: <ul> <li>blah</li> <li>loooooooooooooooooooooong blah blah blah</li> </ul> If I set the background color: Code:
li { background-color: yellow; }
It works fine, but If the long line gets wrapped, the height of the background of that li is higher, and it looks very funny. I want the background to be equally height, independent on the other li:s height. Is that possible? I don't want to have a fixed value for the height I have a problem with my CSS in IE6 (surprise, surprise). If you look at www.bluehatmedia.co.uk you will notice that the left hand menu is for some reason on the far right (needing to scroll). But if you look in FireFox, Netscape, Opera, Safari they all work fine. But if you mouse over a link then the menu goes back to the left had side where it should be. and when i remove the following from my CSS: background-image:url(images/picture.gif); background-repeat: repeat-y; background-position: right top; the background image doesnt display (obviously) and then menu goes back to the left. Any ideas much appreciated Tom my page is at http://pageshree.com/index.php . In the left hand column of the site, u see two titles of "navigation" and "support". the image is 80px and show fine for navigation, but for support it stops and doesnt finish off the image on the right hand side. CSS is: Code:
.subheads {
height:18px;
width:80px;
margin:0;
padding: 0 1em;
background:#FFF url(images/subhead.gif) no-repeat;
color:#FFF;
font-size:12px;
font-weight:bold;
text-align:center;
}
HTML: Code: <span class="subheads">Navigation</span> Any help? |
|||||||