|
CSS - Vertical Background Image That Will Fill Page
I'm trying to create an image that will adjust to fit the screen size and always be at least 100% of the screen.
Basically, I'm looking to have the "trunk" image in the LeftBody div, always stretch to reach the image in the banner and the footer. If I have enough content, the image will repeat just fine and fill my needs, but if there is no content, how can i make the image fit the page? My code is accessible via the /Samples/ directory. Thanks so much... midcitybrewery.com/Samples/sample.html Similar TutorialsHi there, I'm making a CakePHP application to display my friend's artwork. I'm having trouble with the style sheet though. The header and footer are made of two fading images. I've used the background image property to stretch these images to fill the divs and have made the divs stretch to fill the width of the page. At this point it's probably easiest to see what I mean by taking a look for yourself- http://www.seb.webege.com/paintings/gallery If you view this page in Chrome or Firefox then you'll see the desired effect with the image filling the width of the page. The problem comes with Safari and IE. In these browsers the image does not stretch to fill the screen. I am not an expert at HTML/CSS and can't for the life of me work out what has gone wrong or what I can do to fix it, after numerous google searches I'm still none the wiser and I'm just not seeing the problem. Can anyone advise me how to get the images to stretch to the browser width in Safari and Explorer? Any help would really be appreciated. Many thanks, Nick Argh. Tried a number of variations on this probably simple task. Nonetheless: In this example how do I get the 'sidebar' to fill the vertical space of the container, and ensure the 'footer' remains positioned at the bottom (which it currently does) http://www.mandgweb.net/css_test/css_test.html Thank you Hello all Anyone can pls help me with horizontal gradient fill using only the background-color property in css? Attached is the color I need to get, here it is an image, but I want to do this without using the url tag in css, whereby if possible I enter the color directly to the css code and get something like the image attached... Obviously I want the same css file to be loaded for each page but for each individual page I may want a different background image postitioned using CSS, is there an easy way to achieve this? thanks for your time. #bg-one { background: white url(some.png); } #bg-two { background: white url(someother.png); } =========== ... </head> <body id=bg-one"> ... ... </head> <body id=bg-two"> 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 trying to set a background image that spans from edge to edge in my browser window. Currently, I have everything set up and positioned as I'd like, but the image stops just short of reaching the very edges of the browser window on the left and right sides. The image itself is 2000px wide, so that various browser widths show the continuation of the image. You can see the problem I have at URL Notice the blue lines on either side aren't quite making it to the edge of the browser. The relevant CSS is located at URL The .main div at the bottom is the one with the background image code. Thank you for any help offered. 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 Pretty Common issue.... I think... I need my div's background to go all the way down the page.... even on small pages!! Here is an example... Sign Up Page Here's my CSS Code:
#header {
position: fixed;
left: 0;
width: 100%;
height: 125px;
top: 0;
background-color: #ccffcc;
background-image: url(images/topbackground2.jpg);
}
Here's my HTML Code: <div id="header" > <img src="images/spacefiller.jpg" align="left"> <a href="mainFrame.html" target="mainFrame"><img src="images/trial3.jpg" border="0" id="courseAssistant" align="left"/></a > <img src="images/blend.gif" width="100%" height="20px" style="position: absolute;left: 122px;top:125px; "> </div> The problem is that I want the <img src=blend> to stretch the width of the div. The image is only 1px wide so I need it to stretch to fill up the header. The code I have works perfect for Mozilla but it won't work with IE. In IE the img stretches 122px farther than the div and causes there to be horizontal scroll bar at the bottom. I can't seem to figure this one out. Thanks in advance for the help and suggestions. I've exhausted my own knowledge toolbox and cannot get this to work. I'm trying to get a div to expand to the end of the parent div. http://www.pictouunited.com/?s=null You'll see what I mean. I've done all the logical troubleshooting, or so I thought. I appreciate any help in advance! I just can't do it!!!! I need help on this.. My header.. I can't get rid of the spaces around the image.. hmm check this out.. I can't post a link direct but its on the world wide web at piedmontred (dot) com firebug is telling me its an element.style margin, but for the life of me I can't find that in any CSS sheet I have.. and for some reason firebug doesn't identify a sheet either.. I did buy this wordpress template and have done quite a bit of CSS hacks, but I just can't figure this one out.. Thanks for any help!! Todd I'm having a serious brain fart here...I must have come across this issue a million times before but I guess I haven't thought about it for so long, that I'm at a loss.... Very simply, I want to have a horizontal menu using text (ie not images) that will fill to fit the width of the page. Now I'd want to make there be a min-width and I can do that, but there's got to be a way to have the padding between the items adjust depending on how wide the browser is, right? And I should be able to do this with CSS and not have to use tables right? In other words, the width of the individual menu items will remain the same, but in a browser that's say 800px wide the space between the first item will be very near the left side of the page, and the last item will be very near the right side of the page and the items will be spaced evenly between them. But if the page is 1200px wide, the first and last items will still be very left and very right, but the spacing in between the rest of them will be bigger so that it fills the page width. ?????????/ I want to create 2 vertical page borders using an image. Is the best way creating a table? I need a pretty decent jumpstart. Thanks in advance. My site I am redesigning this site for a theater camp company. I want to create the effect of stage lights shining with a image rollover and am partly there. I am stuck now because I want to use an HR as the cross beam with images of stage lights directly below (take a look at the site to understand). I do not know how, or if it's possible, to line up the images directly below the HR (bar) so there is no space at all. Any help? I think this is a pretty basic css question... How do you get an image to vertically align to the top? I've tried "vertical-align: top;" but no dice. Here's where I want to apply this: http://www.ergopro.com See, I want the credit card image (up top) to vertically align to the top, flush with the TrustWave logo. How is this done? Much thanks in advance! Hi! Any helpful advise is appreciated.... I have an issue where I trying to arrange 3 images in a simple column with a small amount of space in between, all the way to the right. It funny if I disable the CSS code the 3 image array will return left in the perfect column, but I want it on the right, and only get an image pile-up on the right side. Please PM to get the URL to see the test page. Example HTML: <div class="thumbnail"> <h2><b>heading</b></h2> <img src="(URL address.....file1.png)" alt="" width="278" height="142"><br> <!-- Caption --> </div> <br class="clearboth"> <div class="thumbnail"> <img src="(URL address.....file2.png)" alt="" width="278" height="142"><br> <!-- Caption --> </div> <br class="clearboth"> <div class="thumbnail"> <img src="(URL address.....file3.png)" alt="" width="278" height="142"><br> <!-- Caption --> </div> Example CSS: .thumbnail { width: 278px; margin: 30 15px 15px 30; right:40px; position:absolute; } .clearboth { clear:both; } THank you in advance for your help! Best, Digigumball I got this WP style, and I edited it quite a bit. Code: #menu {
clear: right;
float: left;
position: relative;
padding:0 10px 0 10px;
margin:0 0 0 34px;
width: 160px;
/* border-left: 1px solid #bbaf95;
border-right: 1px solid #bbaf95; */
background: #fff rl(wp-images/bg.png) repeat-y 100% 0;
}
The problem being is that the image border does not reach the where the css borders were, and it does not stretch 100% to the bottom either. Even more, it takes three seconds to load from where it use to take less than one. Check it out: http://randomized.us Thanks in advance. I have an image and to the right of it I have text. I want the text to be aligned veritcally to the middle of the image. I can do the following and it works: Code:
.icon {vertical-align: middle;}
<a href="index.php"><img src="images/icon.png" class="icon" border="0" /></a>
Header Goes Here
However, if I wrap H1 tags around "Header Goes Here" the text drops below the image. Any ideas on how to use header tags and have it aligned? I know I could make the icon as a background with H1 but I want it to be clickable. Is there any way to make it so the H1 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. |
|||||||