|
HTML - Why Is My Background Stripe Tiling So Much?
I am trying to make a stripe down the left of my page. The tutorial I followed said that if I make my background image at least 1200 then it shouldn't do any extra tiling (on the right).
My image is 1200x20 pixels. The left stripe is just great, unfortunately, it is also tiling almost right in the middle of the page (not even on the far right? which I don't want either). What's going on I even tried to make it wider and, interestingly enough, the location of the stripes (the left and the stinkin' one on the right that I don't want) remained but the stripe shrunk! Help! kara Similar TutorialsI have done this before, but forgot exactly how I forced (and I mean FORCED) it to work in both IE and FireFox. I am creating borders. I clearly set the width and height of the divs that contain the border images. corners do not tile, vertical borders do not tile in the x dimension, and horizontal borders do not tile in the y dimension. Or they're not supposed to. To force IE to act right, I have to add overflow:hidden to the style. Everything works except for the horizontal borders, which tile one extra border. Like this: Anyway, would someone please examine this simple code and tell me why it isn't working? By the way... KE is our prefix, B is Border, V is Vertical, H is Horizontal, and C is corner, to help you figure out what the style names are. So, KEBC is a Border Corner which could be top-left, top-right, bottom-left, bottom-right. I MUST use background images for tiling purposes with the vertical and horizontal borders, so please, no lame answers to the effect: "just embed an <img> instead of using backgrounds..." THat doesn't solve the problem. ...In advance... HTML Code: <html>
<head>
<style>
.KEBC
{
position:absolute;
width:5px; height:5px;
background:no-repeat;
overflow:hidden;
}
.KEBVS
{
position:absolute;
width:5px;
background:no-repeatx;
overflow:hidden;
}
.KEBHS
{
position:absolute;
height:9px; width:5px;
background:no-repeaty;
overflow:hidden;
}
</style>
</head>
<body bgcolor="#000000">
<!-- Make a Framed Container DIV element -->
<!--~FC--><div style="width: 200px; height: 100px; background:#333333; position:absolute;">
<!-- -- First, do the corners -- -->
<!-- Top Left Corner (tlc.png) is 5x5 -->
<!--~TLC--><div class="KEBC" style="left:0px; top:0px; background:url(tlc.png)"></div><!--TLC~-->
<!-- Top Right Corner (trc.png) is 5x5 -->
<!--~TRC--><div class="KEBC" style="left:195px; top:0px; background:url(trc.png)"></div><!--BRC~-->
<!-- Bottom Left Corner (blc.png) is 5x5 -->
<!--~BLC--><div class="KEBC" style="left:0px; top:95px; background:url(blc.png)"></div><!--BLC~-->
<!-- Bottom Right Corner (brc.png) is 5x5 -->
<!--~BRC--><div class="KEBC" style="left:195px; top:95px; background:url(brc.png)"></div><!--BRC~-->
<!-- -- Next, do the top, sides, and bottom. You must specify width for horizontal borders and height for vertical borders -- -->
<!-- Top Side (t.png) is 1x5 repeatable, width of container - 10, left = 5, top = 0 -->
<!--~T--><div class="KEBHS" style="left:5px; top:0px; width:190; background:url(t.png);"></div><!--TLC~-->
<!-- Right Side (r.png) is 1x5 repeatable, height of container - 10, top = 5 -->
<!--~R--><div class="KEBVS" style="left:195px; top:5px; height:90; background:url(r.png);"></div><!--BRC~-->
<!-- Bottom Side (b.png) is 1x5 repeatable, width of container - 10, left = 5 -->
<!--~B--><div class="KEBHS" style="left:5px; top:95px; width:190; background:url(b.png);"></div><!--BLC~-->
<!-- Left Side (l.png) is 1x5 repeatable, height of container - 10, top += 5, left += 5 -->
<!--~L--><div class="KEBVS" style="left:0px; top:5px; height:90; background:url(l.png);"></div><!--BRC~-->
<!-- -- Next, do the horizontal split. You must specify width for the horizontal border -- -->
</div><!--FC~-->
</body>
</html>
Hello, all...this is my first time on the site. I am a newb when it comes to HTML etc...I won't lie. I know just about nothing when it comes to websites. I'm a graphic designer, and i created a background for my website I'm trying to: (A) Stop the tiling of my background image... (B) Center the image I bought some books on HTML and they're pretty good. I don't have any trouble following them. I started reading about STYLE SHEETS and it seems this is the way to go. I've read about EXTERNAL, INTERNAL, INLINE and I would like to use the EXTERNAL method...but I don't know how to: (A) Make a link to my style sheet for the background image to be centered (B) Writing the style sheet, so that it centers and doesn't tile my image... Pllease, any help that you could give me, would be GREATLY appreciated. Thank you. http://www.cahoonzcreationz.com Hello everyone.... I'm trying to figure out how to tile right to left with an image inside a <td>. Anyone know how? Right now I'm using the background property but it tiles an image left to right. I need it to tile right to left. Any ideas? Thank you...... I have a gradient image I'm trying to use as a background for a <div>, but I'm having a bit of a problem in that I can't get the image to stretch properly to fit the <div>. The thing is the </div> can change size, and the image needs to be able to change size with it. I've managed to get it working to the point where the image will TILE to fit the <div>, but that doesn't create the look I want. I need it to STRETCH, not tile. I have also managed to get the image to stretch to the browser window, but like I already said, it needs to stretch to fit the <div> while ignoring the size of the browser window. Just in case you have trouble visualizing exactly what I'm talking about, I have already uploaded two different versions of the partially finished website at the following URLs: http://www.finalfreak.greatnow.com/neo_index.html http://www.finalfreak.greatnow.com/neo_index2.html Notice how in the second link the gradient continues past the footer to the bottom of the window? That's what I'm trying to fix. What I want is for the image to conform to the size of the <div> like in the first link, but without tiling like the first link. Also, the page currently only works properly in Firefox. I'm planning on fixing it to work right with Internet Explorer as well, but I'd like to get the gradient problem resolved first. I've been trying to get this to work for days now and it's driving me crazy! Any help would be greatly appreciated. I placed an image in the backround of a table on my page. It looks fine on my computer with a square monitor set at 1024x768 pix. When I viewed it on another monitor, a wide screen it displayed about half of my image to the right of where I placed it in the table. Can this be corrected so the image looks correct in all screen resolutions? Here is a link to the page in question. It's the motor in the upper left. The image name is: log2.gif http://cb750sandcastonly.com/new/ Thank You. Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result? Heres the link Well, It looks fine, unless you view it in full screen, if you view it in full screen you'll notice that the white and grey backgrounds extend along with the main background, I want the white and grey background to stop where the footer is, and the main background (#cccccc) to continue on down. You can use View > Source for the source code (as it's rather big and I'd rather not have something that big in my post) CSS Code: Quote: .leftcolumn{ width:273px; padding-left:9px; padding-bottom:20px; background: #F1F1F1; float:left; text-align:left; } .rightcolumn{ width:503px; float:right; text-align:left; } left column = grey column right column = white column How to insert a background on this site ? http://videosearch.w-b0x.com/ Hi i have an issue with my background not displaying correctly. I know i have not sliced the template etc but i can only assume the same problem will occur when i do. I have set a background image to the page but its not inline with my image background, How would i go about making sure everything is lined up when publishing it? Ive messed around with margins etc but there seems to be a default margin at the top which i cant remove. http://www.banks-twins.biz/testhome.html Thanks. Alex. hey everyone, when im making my website i put something in it then move it up the website to a different position so its where i wnt it. when i move this up my website it leaves a blank space at the bottom. how do i get rid of thisblank space?? the code im using is... <div style="position: relative; top: -300px; left: 200px;"> ive also tryed postioning it in css and its just doing the same thing if someone could please help i would be very grateful thanks Okay, I have this background image...it's fine and dandy...but I want the stripes on the left side to continue to go down the page if more information is put on the page and it not stop at where it does on the page. I can't repeat it because THE EXOTIC ZOO will be repeated too down the page. Any suggestions of what to do? Here is the page I'm talking about: http://thexoticzoo.webs.com/rats.html Hi, I wanted to use an image for the background of my page, but also have a DIV layer with images that look like they are coming out of it. For some reason though when I set the image as the background, it becomes just a bit brighter. This completely throws off what I'm trying to do because there are elements of the background in the DIV layer image and now the DIV image looks darker than the background ruining the effect. So I've tried to solve the problem by putting this huge background image as a DIV layer and aligning it to top: 0 left: 0. The colors now match. The problem is though that the image is way bigger than the browser window so scrollbars appear on the sides. I don't want this. Can anyone offer a suggestion to either of my problems? Thanks! I've just put up a new page - mbccc.net - and I've used a picture, a .jpg image file, for the background. Sometimes it displays alright but sometimes it doesn't - sometimes it begins to 'tile' at the edge. When I view the page in my IIS on localhost it always does that. When I view it in my html editor - NVU - it always does it. My question is why does it do that and what can I do to prevent it? The picture is 196kB .jpg of 1024 x 768 pixels. I've been viewing in Firefox, what it does in other browsers I don't know. What should we do if we want to use pictures for background? regards, ab How can I set background in a page. please help me. im trying to use a image hosting site to make a image a background for a web site so they can see my idea what would the code look like to make that happen I'd like to have a scaling background like on this site: www.burton.com I'm using DreamWeaver, is this possible? P.S., I'd also like to build a scaling x-y navbar like they have on that site if it's possible. Thanks in advance! Hey all Ok i wasnt sure wether to put this in html or css but i decided to put it here and hpe for the best. Ok , I have set a background color and a background image which all works well. Except that when i insert the banner it isnt at the top of the screen it is about a cm down from the top. This is because of the background image but im not sure how to fix it. Thankyou in advance, Jake. I want to give a division a background image but I'm not sure how to do it. I wrote a code that says: Code: #links {
background-image: Graphic1.png
}
But nothing happened. What am I doing wrong nad how can I fix it? nevermind... Thank you for helping and this site is awesome! Take care... Ryan hi in this site www.muaythaistuff.com they have some tatoo kinda background and i have tried to put this one on my site and it makes a lot of them in one page so my question is how can i set this tatoo image only in the top like in this very site and the rest will be black color? |
|||||||