|
CSS - Image Repeat Beyond Browser Border
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. Similar Tutorialsheloo 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. 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 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 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 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, 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 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 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 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%; } Hello all, My website appears fine on Firefox 3.6.7 but not on IE 8 (it is missing the borders on the article text area and the login box is up too high). I notice you can't include URLs in the post for new members so any help is greatly appreciated. Thanks! I have tried firefox and IE, lastest versions and all works ok, but in Safari the top left and top right of the rounded purple border is not rounded like the other radius borders on the page which show correctly. The attached image is what the left and right rounded purple border looks like, but can not figure out why it shows ok in Firefox but not Safari. Can anyone see where I might be going wrong in trying to get this to work like other browsers show it ? Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body { border: 0em solid #000; background-color: #ddd; height: 100%; }
div { padding: 0em; margin: 0em; }
div.bodyContainer, div.header, div.footer { width: 60em; }
div.header { text-align: center; }
div.bodyContainer { text-align: center; margin: 0 auto; }
div.left, div.right { width: 10em; border-bottom: 0.0625em dashed #CF8DEB;}
div.middle { width: 40em; margin: 0 auto; padding-left: 0.41em; border-bottom: 0.0625em dashed #CF8DEB;}
div.footer { text-align: center; }
div.bodyContainer, div.outer, div.left, div.right { background-color: #56D1AC; /* green */ }
div.bodyContainer, div.header, div.middle { border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
div.outer { display: block; }
div.left, div.middle, div.right { display: table-cell; }
div.middle { border-top: 0.3em solid purple; border-right: 0.6em solid purple; border-left: 0.6em solid purple; }
div.bodyContainer { /*background-color: pink;*/ }
div.middle { background-color: lightblue; }
div.footer { background-color: #ddd; }
.clearfloat { clear: both; }
.menu { background: #6384DE; margin: 0em; text-align: center; font-size: 0.965em; font-family: Broadway; border: 0em solid #EDB6B6; padding: 0.5em 0em 0.313em 0em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; } /* 3F65CC */
--></style>
</head>
<body onload="disableUpdateSubmit();">
<div class="bodyContainer">
<div class="header">
<!-- menu start -->
<div class="menu"></div>
<div class="clearfloat"></div>
<!-- menu end -->
</div>
<div class="outer">
<div class="left"><br></div>
<div class="middle"><br>middle</div>
<!-- middle end -->
<div class="right">
<!-- start of specials -->
<div class="specials">SPECIAL OFFERS</div>
<!-- end of specials -->
<br class="clearfloat">
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
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 all, How do you put in a image border in the css. I use the following code and it does not seem to work:border-bottom-image:url(../images/borderLeft.bmp); If you can't do this then how do you put 2 borders in the css Stephen Hey, I have a small Problem with my Border Div. It doesn't get the height from the content-content div. Html: div Code: Original - div Code <div id="content"> <div class="content-border content-border-left"></div> <div id="content-content"> <div id="maincontent"> ###MAIN_CONTENT### </div> <div id="statecontent"> ###STATIC_CONTENT### </div> </div> <div class="content-border content-border-right"></div> </div> <div ID="content"> The both border div should get the height from the content-content. But every time he just uses the min-height. If I write height: 100% on the border div, he will use every time a height higher then the content-content. What should I do? CSS: css Code: Original - css Code #content { margin: 0px auto; width: 800px; text-align: left; font-family:Verdana; font-size: 11.5px; } .content-border { float:left; width: 2px; height: inherit; min-height: 300px; background-repeat: repeat-y; } .content-border-left { background-image: url("../images/border_left.png"); } .content-border-right { background-image: url("../images/border_right.png"); } #content-content { float:left; width: 796px; height: inherit; background-color: #D8DEE2; } #maincontent { float: left; height: inherit; width: 531px; } #statecontent { float: left; height: inherit; width: 264px; }
I use a border-image which has a width of 2px. Thank you in advance for your help. Loki1991 |
|||||||