CSS - Want Centere Site, Bg Image Repeat, Flush With Top
I want to center my site, which I have found I can do by giving an absolute position to the main content area - but I also want to repeat an image in the background behind the main content, and I cannot do the both and prevent some empty white space at the top of the page.
Can you help? (I am new at this.) What am I doing wrong? So, to recap: I want a centered site, an image behind the main content area, and no empty white space in the browser above my bg image. I am currently using IE (7). TIA. #body { margin: 0px; padding: 0px 10px 0px 10px; width: 100%; background: #ff9900 url('bg_repeat.jpg') repeat-x; } #container { top: 0px; left: 0px; padding: 0px 10px 10px 10px; margin: 0 auto; --> this will center my site, but I still cannot see the bg image stated in the body div border-right: #ffff99 solid 1px; border-left: #ffff00 solid 1px; background: #fff; width: 75%; } Similar TutorialsHi, This might be a case of an easy fix thats being over-looked but I've tried everything I haven't been able to find to 'fix' this. FF is cool, IE is giving me 'teh gap' I have attached an image, I highlighted the pic so it shows the black bar of space right under the top image. There are two DIVs that are 'stacked' The top one has the top half of the image, the bottom one has the gold bar as a background image, with the bottom half of the pic in it. I can't make the images the background of the div because i'm adding a rollover and link to the images. So, CSS: Code: #interior_top_image{ text-align:center; vertical-align:bottom; display:block; height:85px; margin:0px; padding:0px; } #interior_header{ background-image:url("images/interior_bottom.jpg"); background-position:bottom center; background-repeat:no-repeat; background-color:#263F7F; display:block; height:85px; text-align:center; margin:0px; padding:0px; } HTML: Code: <div id="interior_top_image"><img src="images/cross_top.jpg" name="cross_top" border="0"></div> <div id="interior_header"><img src="images/cross_bottom.jpg" name="cross_bottom" border="0"></div> Hello.This should be simple enough. I have an image on my page(image1.bmp),immediatly folowed by a table(class=table1). The thing is I want the image to be flush with the top of the table with no gap,but there is a small gap,How can I fix this? Thanks note(I left a //here mark on the html page where the problem is. css sheet: Code: #menu { clear: both; margin: 30px; padding: 0; background: url(menu.jpg) repeat-y center top; font: 12px/26px Courier New; height: 26px; background: #006633; text-align: center; } #menu ul { float: none; list-style: none; margin-top:0; padding: 0; margin-right:0; padding: 0; margin-bottom:0; padding: 0; margin-left:90; padding: 0; } #menu ul li { display: inline; } #menu ul li a { display: inline; float: 0 auto; padding-top: 8px; padding-right: 28px; padding-bottom: 8px; padding-left:8px; color: gold; text-decoration: none; } #menu ul li a:hover { background-color:003300; color: gold; } #menu ul li#current a { background-color: #eee; color: #333; } a { color: black;font-size: 10pt; text-decoration: none; border-bottom-style: solid; border-bottom-width: 0px } a:link { border-bottom-color: navyblue } a:visited { border-bottom-color: purple } a:hover { border-bottom-color: green } a:active { border-bottom-color: red } H1.texter { font-family: 'Lucida Console'; font-size: 15pt; color: #black; font-variant: normal; text-decoration: none; } H1.texter2 { font-size: 14px; color: #black; font-family: 'Lucida Console'; font-variant:normal; FONT-WEIGHT: normal; } H1.texter3 { font-family: 'Lucida Console'; font-size: 10pt; FONT-WEIGHT: normal; color: navyblue; text-decoration: none; } TABLE.Table1 { height: 150px; width: 380px; top-border-style:hidden; border-top:hidden; border-bottom:solid; border-left:solid; border-right:solid; border-color: #000000; background-color:white; border-width: 1px; margin: 0px; padding: 0px ; } TABLE.Table2 { margin: 0px; padding: 0px; height: 199px; width: 430px; background-color:limegreen; } html sheet: Code: <html> <head> <title>Keep track and review golf scores</title> <meta name="description" content="Keep track of and review golf scores"/> <meta name="keywords" content="Golf","records","review","tabulation"/> <meta name="robots" content="index" /> <link rel="stylesheet" type="text/css" href="style.css" title="BlueSky 3.0 CSS"></head><body> <style> body { background-color: limegreen; <font FACE="Lucida Console"> } H1.texter1 { font-family: 'H1.texter2 { font-family: 'Lucida Sans Unicode'; font-size: 75pt; color: black; FONT-WEIGHT: normal; font-variant:Not Set; } </style> </head> <body> <div id="menu"> <ul align="center"> <li><a href="golfgame/Users/register.php">Join</a></li> <li><a href="golfgame/Users/Log_in.php">Login</a></li> <li><a href="golfgame/Users/help/tour.html" >Tour</a></li> <li><a href="golfgame/Users/contact.php">Contact</a></li> </ul> </div> <br> <IMG SRC="green4.bmp" align="left"> <IMG SRC="green4.bmp" align="right"> <br> <center> <table width=300><tr><td align='left'><IMG SRC="golf.bmp"> </td ><td align='center'> <IMG SRC="golf.bmp"> </td><td align='right'> <IMG SRC="golf.bmp"> </td></tr></table> </center> <br><br><center> <IMG SRC="logo.bmp" align="center"> </center> <br><center> <IMG SRC="image1.bmp"> //here <table class=table1> <tr><td align='left'><br> <h1 class=texter2><li>content here scores!</li></h1></td></tr> <tr><td><h1 class=texter2> <li>content here</li></h1> </td></tr> <tr><td><h1 class=texter2> <li>content here</li></h1> </td></tr> <tr><td><h1 class=texter2> <li>content here</li></h1> </td></tr> </table> </center> </body></html> I would like to align left images so that they touch against each other. Here is a capture of my problem. dollhedz.com/test [CODE] <style type="text/css"> body{ background-color:#000033; color:#00cc33; } #wrapper{ background-color:#000000; margin:15px auto 0px; width:700px; height:800px; } #sitenav{ background-image:url(sitegrax/sitenavback.jpg); background-repeat: no-repeat; height:55px; padding-left:213px; border: 0px; margin:0px; text-align:left; } #one{ float:left; text-align:left; align:left; margin:0px; padding:0px; } </style> </head> <body> <div id="wrapper"> <div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" /> </div> <div id="sitenav" > <div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a> <a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a> <a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div> </div> </div> </body> </code> Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image. thank you for your time currently i just use Code: background-image: url(images/layout/mem.png); to show an image as the background of a div, but if the image is smaller than the div it repeats. How do i stio it from repeating I'm having a problem with my background image showing through under two floats (left and right), as you can see here . The CSS code I'm using to accomplish this is: Code: #webupdates { position: relative; float: left; width: 219px; min-height: 260px; background-color: #5A759F; } #webcontent { position: relative; float: right; width: 537px; min-height: 260px; background-color: #DFE2E8; } #flashlogo { position: relative; width: 778; height: 219; } #content_table { margin: 0 auto; width: 778px; background: #FFFFFF url(images/bg.jpg) repeat-y !important; All that shows up is the white BG. :( } And the portion of code I'm dealing with is: Code: <body style="background-color: #404044;"> <div id="content_table"> <div id="flashlogo"> ... </div> upper navigation images <div id="webupdates"> ... </div><div id="webcontent"> ... </div> <br /> <img src="images/bar_bottom.jpg" alt="" /> </div> </body> Thank you so much in advance for your help. I've been at this for hours. Hi everybody, i need some help figuring out some things with css and html: This is the CSS part of the code <style> .leftbanner{ background:url(leftbanner.jpg), right, repeat-y; } .topbanner{ height:100%; width:100%; background:url(topbanner.jpg), bottom, repeat-x; } body{ margin:0px; } this is the cell that i want the topbanner class to be used on. there are two more images in that cell but the strange thing for me is that i dont get any background image?!? any help ? <td colspan="2" align="center" valign="bottom" class="topbanner"> <img src="spacer40jpg" width="100%" height="1"> <br> <img src="kormrez.jpg" width="451" height="85"></td> Hey there, thanks for any help in advance. I'm struggling to understand why an image is repeating even though I have it set to no-repeat. Any idea what's going on and how I can fix? Here is the site: 168.144.130.40:8080 The image that is repeating is the girl blowing bubbles: images/bath.jpg Thanks!! Matt have it display one on bottom left AND one bottom right? They are the same image, I just need it on both sides if possible. Hi there, I am helping a friend with a site of his. Basically, the problem is that an title-header image keeps getting repeated down the page when a page is more than a certain length. The page I am referring to is..... http://www.darajewelry.com/Merchant...ge=DJ/CTGY/IG-N If you scroll down, you will notice the brown bar repeating itself. The CSS code currently is: Code: body { background-image: url(graphics/00000001/bkgrd.gif); margin-left: 0px; margin-top: 0px; margin-right: 20px; margin-bottom: 0px; } Now I thought adding : background-repeat: no-repeat; would solve it like below: Code: body { background-image: url(graphics/00000001/bkgrd.gif); background-repeat: no-repeat; margin-left: 0px; margin-top: 0px; margin-right: 20px; margin-bottom: 0px; } But that doesn't work. The image doesn't even appear. As I'm relatively new to working with CSS, could some point me in the right direction. Many thanks! Nathan Hi XP pro SP2 Macromedia dreamweaver CS3 Found this solution for setting the position of a background image in a cell. I am mostly busy with firefox amd ieexplorer 6 to,... what is the beat 8 ? Select the cell. Then in Properties specify the background image. It'll repeat, but if you now set up a CSS for the TD tag and select 'no repeat', it'll go back to one image. You can also set the position in the same window. I'm sure the experts will say it's a scrappy way of solving the problem, but it works. And that's what counts. The other advantage is that you can have different images in each cell. This seems like an easy way to do it, but how do I set up a CSS for the TD tag for this specific cell? Lynghonning :-) td.special { background-repeat:no-repeat; background-image: url(pakke.jpg); } .... <td class="special"> Note - no caps on 'special'. I cant get it to work. Also the code I found here conserning BG images for netscape didnt do it either. Any suggestions greatly appreciated. Cheerio Chris Hi, I have a div layer, and I have set the background colour of this layer to purple. Now the height of this image various according to it content. However I would like that the bottom part of the image is made from a faded image. So far I have accomplished this by using an external image. However I would like to use the background: url(...) in CSS instead. Is this possible? Can I repeat an image only at the bottom part of a div in CSS? Thanks and Regards, Sim085 Hello I have a small image. What I want to do is use the image as a background image, but only display a small section of that image and repeat that section over and over, depending on how much content is on top of the image. I hope I made that clear enough to understand. I have the following code: Code: <style> .vote { background-image: url('images/vote.gif'); background-repeat: repeat-y; background-position: 0 -45; height: 50px; width: 199px; } </style> <div class="vote"> d<br /><br /><Br /><br /><BR /><BR /><br /><br /><br /><br />j </div> That code displays only part of the image, as I want it to, however, I do not know if it is possible to now repeat just that section of the image again and again. I hope someone understands and can help. Thanks Hi there. I would like to show some panoramas. My panos vary in size but all are wider than one screen can show (lets say 1800x200px). Am still working with such small screens 1024px ;-) So horizontal scrolling is necessary (that's ok so far). On top and on bottom of the pano I want to show a border. The borders should be visible from far left to far right end of the pano. The upper border works already (even with fixed background image). See the attachment "css.zip": Code: <style type="text/css"> <!-- body { background-color: black; margin: 50px 0; background-image: url(stribes_01.gif); background-repeat: repeat-x; background-attachment: fixed; } img { margin: 10px; } --> </style></head> <body> <img src="eyecatcher03.jpg" width="1800" height="200" /> </body> </html> So I would like to have the bottom border work, too. It should go from far left to far right of the pano having the same distance from pano than top border does have. I know that it is possible to repeat a background image like this: Code: background-image: url(stribes_02.gif); background-repeat: repeat-x; But the image is only repeated up to the right browser border. There will be a remaining gap from browser border to far right end of pano. Is there a way to realise this? Any idea is highly appreciated. Thanks. tigercat. Hi, I want to repeat a background image (actually, its just a colour) from 50% of the page. i.e. I want one side of my site to be of blue background (the left 50%) and the other side to be of grey background (the right 50%). | Blue | Grey | | Blue | Grey | | Blue | Grey | | Blue | Grey | So let's say the background of my site is blue all over. Code: <body> <div id='greybg'> </div> </body> But the particular div is set to something like: Code: #greybg { background-image: url("../images/body/greylong.gif"); background-repeat: repeat-x; background-position: 50% 0%; } This code doesn't work though. The repeat-x property makes it repeat all throughout, whereas what I want is for the image to repeat STARTING FROM 50% of the middle of the page (i.e. the second 50% column of the page). Any way I can achieve this? TIA Hi all. This is my first time posting ever so please be gentle. On my website I have background image with stripes and grey. I want it to go all the way down the bottom of the page. Currently the background image stops where the content ends. I have tried height:100%; and that solves the problem, but creates another if the user has a smaller browser window. Can someone please help me out? Page URL: leannemarie.com/testing_index.php CSS: leannemarie.com/css/testing_main.css Thanks LeAnne heloo geniuses. please to someone helping me for preventing more of the hair pulling out. I am trying to figure out how to repeat a border image, basically to repeat the div holding the wood images on this page: http://greentypeoftube.com/kc/ essentially to have the bottom expand with the user's browser window size. thanks to you for the thinking and the helping of me with it. s oh. also I am hoping for a way to show the scroll buttons only if the text [will be in another div being cropped by the content window}. is there a way to do this with css? I am working much very hard to be more with css to design than just designing it. Hello everybody, I used the following line <td width="8" background="<?php print $image; ?>" height="15" style="background-repeat: no-Repeat"></td> and it worked well for IE, but in Mozilla the image wasn't displayed properly, so I used the following line for Mozilla: <td width="8"> <img src="<?php print $image; ?>" width="8" height="15" style="background-repeat: no-Repeat"> </img> but now the "style" property does not work, and there is a back ground repeat, how can I avoid the background repeat in Mozilla? HI guys I'm basically ultra confused as to why a particular div in my layout won't line up on the following page.. http://hcl.uk.com/test/instaffs/enews1/ I'm talking about the orange box on the right hand side. As you can see, in Firefox it sits right against the line above it, yet in IE 6 theres a 4 or 5 pixel gap forcing the box down. I have been through both my CSS and markup and still can't figure out why this happening.. the only thing I can think of is that it's an IE bug that I don't know about. If anyone can take a look and give me some pointers on what it might or could be that would be great. Thanks in advance for all your help. Stu |