|
CSS - Css Background Image Top And Bottom, Possible?
Is it possible to use 2 backgrounds with CSS?
E.g. I want one background which is going to be used for the top of my website layout and one background for the bottom. This would allow me to extend the content of the website, without "distorting" the background. I used tables in the pas and this was very easy to do, however I don't know how to do this with CSS. I don't even know if this is possible. Also this brings me to the next CSS related problem; with HTML tables it was possible to extend the tables when e.g. a lot of content was added. Is this also possible with CSS? E.g. you would set the td height to 100% and the text (and the rest of the design) would expand without problems... I hope my post makes any sense. It's kinda hard to explain what I mean. Similar TutorialsIE is adding 8-10px of padding to the bottom of a div that I am placing a background-image in. It renders fine in ff, but because I am trying to match 3 parts of an image up to make one whole (I have reduced margin and padding to 0 on all 3 divs) there is this white gap between the divs?! Any ideas? 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'm in the midst of redeveloping my site's look and feel using CSS. I'm having a moderate amount of luck so far, but I've run into a problem. I'm testing using Firefox 1.0 PR, but I've seen this behaviors in other Mozilla-based browsers. Example 1: URL. As you will probably see, the white background only extends to the bottom of the one DIV. The only way I was able to get the white background to extend to the bottom of the two DIVs was to use an image in one of the container DIVs. Example 2: URL. Of course, then the problem is still that it doesn't extend all the way to the bottom of the browser unless it's filled entirely with content. The effect I'm looking for is something like this: URL. My CSS is here URL. First, if anyone can help me figure out how to get the background to extend evenly, without an image, that would be great. If there's a way to make the page always extend to the bottom of the browser, I'd love to hear about that, too. Thanks in advance for any help you can offer. Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text Does anybody know how to put one image on TOP of another? I'm using CSS, and was wondering why my image wasn't showing up....Turns out it was underneath another image, but it needs to be on top! Any clue how to fix it? Thanks! I have a logo which I would like always positioned at the bottom of a div. Does anyone know a way of achieving this? http://www.willisemail.co.uk/skill/ The logo is in the bottom right hand corner. Cheers Jemes /* Site Holder Start */ #box { width: 750px; margin: 0px auto; padding: 0px; text-align: left; border: 1px solid #979696; background-color: #FFFFFF; background-image:url(../Images/mid.jpg); } /* Site Holder End */ /* Site Holder Start */ #box2 { margin-left: 49px; margin-right: 50px; margin-top: 10px; margin-bottom: 10px; padding: 0px; text-align: left; background: #ccc url(../images/img_MainWhiteBg.jpg) repeat-y 50% 0; } /* Site Holder End */ /* Content Start */ #content { width: 461px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /* Content Start */ #content2 { margin-left: 14px; margin-right: 15px; margin-top: 0px; margin-bottom:0px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /*Right Menu Start*/ #right { width: 178px; padding:0px; float:right; background-color:#FFF; overflow: hidden; } #right2 { margin-top:0px; margin-left:14px; margin-right:14px; padding:0px; background-color:#FFF; overflow: hidden; } .RightMenu { margin-top:10px; padding: 0px; font-size: 13px; color: #6884AE; font-weight: bold; } .RightMenu ul { padding: 0px; margin: 0px; list-style-type:none; } .RightMenu li { background-image: url(../images/img_Li_Image.jpg); background-repeat: no-repeat; background-position: 0em; padding-top: 0px; padding-bottom: 0px; padding-right: 1px; padding-left: 14px; margin-top:5px; } .imgTitle { text-align:center; margin-top: 13px; margin-left:0px; margin-right:0px; } /* Right2 Menu End */ .imgRight { text-align:center; margin-top: 10px; margin-left:0px; margin-right:0px; border: 1px solid #979696; } .imgMain { text-align:center; margin-top:10px; border: 1px solid #979696; } .Menu { margin-top:10px; padding: 0px; } .Menu ul { padding: 0px; margin:0px; list-style-type:none; } .Menu li { display: inline; list-style-type:none; padding-top: 0px; padding-bottom: 0px; padding-right: 1px; padding-left: 0px; margin:0px; } .Main { padding:5px; border: 1px solid #979696; margin-top:8px; margin-bottom:10px; } .Cove{ margin-top:15px; text-align:center; } Hello, I am new to the css world, however I have followed some tutorials and became familiar with how to use css. However now I am trying to remove the space on top and bottom of an image, so that I bring two images one on top of each other. Here I placed some sample html code: Code: <html> <head> </head> <body> <div> Some text BEFORE the line. </div> <div> <img src="line.gif" width="100%" height="4px" /> </div> <div> <img src="line.gif" width="100%" height="4px" /> </div> <div> Some text AFTER the line. </div> </body> </html> As you can see in the above code, I have a div tag with the text above, a div tag with an image line, another div tag with an image line, and some text below. However there is a space of around 5px from one line to another. I tried to do the css syntax for the image as follows: Code:
img {
border: 1px solid #000000;
margin-top: 0px;
}
However I can see the border on the image, but the space still remains there. I also tryied to use the padding-top, but it still did not work Is there anyone here that can help me out please? thanks & regards, sim085 I want to be able to position an image at the very top of a cell/div/container/whatever and one at the very bottom. It's too bad there is no float:top and float:bottom. Something like this [HTML] <div style="background-color: red"> <img src="images/top.jpg" style="?" /> <img src="iamges/bottom.jpg" style="?" /> </div> [/HTML] I have two images at the top of a paragraph, one floating left, the other, right. I would like the right floater to go to the *bottom* of the graph. Below is a truncated version of the graph and the CSS style sheet I created, trying, unsuccessfully, to bottom the image. (The image remains at the top.) I validated my current document (which doesn't have this floatrightbottom in place yet.) The document validated as CSS level 2.1 ! <p><img class="floatleft" src="FreddieWAud110x130.jpg" width="110" height="130"><img class="floatrightbottom" src="SherpWithAward113x109.jpg" width="113" height="109" style="vertical-align=-25px">In 1990, FG conceived Movies Junior introducing movie theatre ... (Toni Honors are given annually for theater accomplishments not eligible in established Toni Award categories.)</p> .floatrightbottom { float: right; margin-top: 6px; margin-right: 0px; margin-bottom: 6px; margin-left: 15px; padding: 2px; border: 4px solid #666; vertical-align: text-bottom; } Hi all, I've got a <div> tag around an image and in Firefox, it shows an extra 2 pixels of padding at the bottom of the image - Why is that and how can it be stopped? There's no blank spaces between the <div> and <img... tags. So I'm not sure how to search for what I'm trying to do so I figured I'd just ask. On my test website: http://www.temple-of-lore.com/siege911 I noticed on the front screen, the image that I have on the bottom doesn't go to the bottom of the page which breaks the effect I'm trying to do. You can see what I'm trying to do on other pages. Anyways, I know I'm going to be putting more content eventually on that front page, but I'm sure there will be someone out there with a huge Apple monitor with amazing resolution that's going to break my page. I'd prefer a way to just force the image to go to the bottom and fill any black above it if the screen is taller than the content on the screen. But on pages where it's not taller, I'd like it to be below the content and let it scroll down. Anybody know how to do this? Hi I'm trying to figure out how to postion an Image at the bottom left of a <DIV> container. Can someone supply an example style class defintion which will place an Image at the bottom left of the div container.. I presently have: <div> <h2>Heading 2</h2> <p>My paragraph text goes here and goes on for a line or so</p> <img class="bottomleft" src="button.gif" alt="button" /> </div> .bottomleft { position: relative; bottom: 0px left: 0px } But this places the Image relative to the end of the <p> tag not relative to the <div> How can I position the Image relative to the botom left of <div> tag? Thanks David Hello Trying to position an image at the bottom of my webpage which: a) will always stay at the bottom of the page regardless of length (page length not window height so the position: fixed is not quite what I'm looking for) b) will not slide on top or under divs on my page (what position: absolute does) but instead stop moving up once it reaches content above it and the scrollbar appears (as tables do) c) I can layer divs on top of so far this is as close as I've got: in the html <!-- container for site info --> <div id="container"> <!-- other content in divs here --> <!-- other content in divs here --> <!-- footer for bottom image --> <div id="footer"> <!-- footer details, who / when / copyright --> <div id="footerdetails"> details here </div> <!-- footer details, who / when / copyright --> </div> <!-- footer for bottom image --> </div> and in the css #container { position: absolute; top: 0px; width: 750px; height: 100%; } #footer { position: absolute; bottom: 0px; height: 230px; width: 750px; background-image: url(../images/footer.jpg); background-repeat: no-repeat; background-position: bottom left; } #footerdetails { position: relative; margin: 0px 0px 0px 0px; padding: 9px 0px 10px 70px; top: 195px; width: 680px; text-align: left; voice-family: "\"}\""; voice-family:inherit; } I know I'm sort of answering my question above (tables) but I've seen this done with divs, just can't get the right combination of css - anyone have any ideas on this? Thanks in advnace. a+ gar I've got a div (picright) within a div that has an image with a border. The border works, but for some reason there's a teeny tiny gap between the bottom of the image and the border. (At least on a Mac using FF.) .picright { float: right; border: solid 1px #9F7A47; margin: .3em .3em .5em .5em; padding: 0; } Then I thought maybe I needed a rule for the img, so I added .picright img { margin: 0; padding: 0; } but that didn't fix it. Any guesses? Hi, I have a table in my website and i want in one column to place an image at the bottom of it (and stay there when the height of the table changes). The column already has a repeated background image. Thanks 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 In the main page here, there look to be 2 columns. How can I align all the smaller images with the bottom of the big image? Sometimes there are 3 photos, sometimes there are 6. At the moment it looks like it is all in divs. Is there a way to do it in CSS with the current code. The HTML looks a bit messy: http://www.truly organic foods.com/cashew-cacao-cluster-275g.php The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. Can anyone suggest how I make sure the green 'Quick Contact' graphic/box always sit at the bottom of the right column (immediately above the Footer), no matter how much text there is in the lefthand column on this web page: www.ultimate-system.com/index.html , using css? The stylesheet I'm using is found at www.ultimate-system.com/style.css. Many thanks |
|||||||