|
HTML - Aligning A Background Image To Bottom Of A Page
Hi guys
I've spent the best part of two hours attempting this and have been failing. Miserably. What I'm trying to do is NOT to create a body background, but create an image, which will sit at the bottom of my browser window, regardless of it's size, and then go BEHIND other elements such as tables / images if my browser window size causes overlap. All help appreciated, thanks in advance. Antonz Similar TutorialsHi there, I'm looking for help aligning a tiling background gradient to the bottom of a page. I can't seem to figure out how to do it. You can see my code at michaelskinnider.com/tethco, and the effect I want in the PDF attachment. Thanks for your help! I wanted to get my background image in the center of my page. The Html code I'm using is as follows. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color: #FFFFFF; background-image: url(http://i14.photobucket.com/albums/a3...HomePage.jpg); background-position:center; background-repeat: no-repeat; } --> </style></head> <body> </body> </html> When i do it. Half the image dissappears at the top of the page. Can anyone help? Hey everyone, I'm trying to set my background image, but for some reason it has a large black bar at the bottom, where the pink gradient should actually start at the bottom so that you cant see the black bar? I'm trying to upload my Index.html file, but when I do the image loader says that its not a valid file? Any ideas? hey, simple question here i just cant get it to work though. i want to align some text to the bottom and to the right of a table <table width="100%" cellspacing="0" border="0" cellpadding="18" height="75%"> <tr> <td bgcolor="000000" width="10%"> <img src="graphics/spacer.gif" width="100" height="1"> </td> <td bgcolor="ffffff" width="90%" valign="top"> <h2>Welcome to the Darwin Soccer Clubs Official Website</h2> <hr color="black"> <p>Here we strive to bring you all the latest news from the club by keeping you updated on the results from all our games throught out the season, the roster so you will never forget when your teams, where your teams playing and who there playing. <br><br> Also check out the new <a href="p4potw.html">Player of the week</a> page to see if you have made it to number one!</p> <p align="right" valign="bottom"> THIS IS THE PART I CANT GET TO WORK</p> </td> </tr> i dont no why.. and try not to think about the other writing in the table this is for my studies i am doing. cheers </table> I am attempting to have a table cell that is outlined. No matter how much text ends up in that table cell, the top part should align to the top, and the bottom part should align to the bottom. The cell size/border needs to be consistent across the row (which is why I didn't just float some divs). I have spent hours looking online, and have found various "solutions" that do not in fact seem to work. Here is my 'sample' code. I know that the valign isn't working, I just put it in there so it makes sense "logically" what I am trying to do. Thank you in advance for any help you can provide. Code: <table width="600">
<tr>
<td style="border:1px grey solid; width:150px;">
<table valign="top">
<tr>
<td>Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!</td>
</tr>
</table>
<table valign="bottom">
<tr>
<td>Float at the bottom!</td>
</tr>
</table>
</td>
<td style="border:1px grey solid; width:150px;">
<table valign="top">
<tr>
<td>Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!</td>
</tr>
</table>
<table valign="bottom">
<tr>
<td>Float at the bottom!</td>
</tr>
</table>
</td>
<td style="border:1px grey solid; width:150px;">
<table valign="top">
<tr>
<td>Float at the top!</td>
</tr>
</table>
<table valign="bottom">
<tr>
<td>Float at the bottom!</td>
</tr>
</table>
</td>
<td style="border:1px grey solid; width:150px;">
<table valign="top">
<tr>
<td>Float at the top!Float at the top!Float at the top!</td>
</tr>
</table>
<table valign="bottom">
<tr>
<td>Float at the bottom!</td>
</tr>
</table>
</td>
</tr>
</table>
I get how to align two sections of text, one at the left of screen and one on the right, but how do I put this line at the bottom of the screen? I tried pretty much every combination now, bottom:0, vertical-align:bottom, vertical-align:text-bottom, with and without a parent div container, nothing works! The moment I try to put the line of text at the bottom of the screen the left/right alignment would be messed up or it wouldn't show at all. It seems html only allows you to align it left/right OR bottom/top, but not both? Any help is appreciated. This is what I have so far: Code: HTML:
<div style="clear:both;" id="bottom">
<p class="left">Text to go on left.</p>
<p class="right">Text to go on right.</p>
</div>
CSS:
#bottom {
bottom:0;
}
.left {
float: left;
}
.right {
float: right;
}
Hi I just creating a website skin I have upload he http://autismnetwork.jatos.co.uk/skin/skin.html I need to get rid of that irritating little gap between the bottom of the logo image and the bottom of the logo DIV. if anyone could show me some code thats does that, it'd be much appreciated. Thanks, Jamie Hi, I would like to know if I can make the background image (over which I will write the content of the page) to fit the space I'm using. For example, I don`t how to explain it , but I see sites with the navigation bar image or the content image to adapt its size according to the amount of text on them. And then it seems like they are infinite, again, it adapts to the isze of the page. But my background image stays the same size all the time and I can see the end of it. I know I didn`t explain it very well but I don`t know exactly what I need to do this so, if someone could help me, thanks a lot. I am stuck with this stupid code that i have been trying to fix for an hour! Please help. Heres my problem...: I want to embed a webpage within another and scroll it to the bottom of the page automaticly because i want the information at the bottom which is updated frequently. I also dont want a scroll bar, so all that is seen is the table. the website is www.totalfta.com. I want from below the ENTER|EXIT sign to the bottom of the table. I have attached what i have so far. ***I have the embed into another page, and the no scroll bar... i just want to make it auto scroll to the table..**** Thank you..! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-... <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tester</title> </head> <iframe height="410" width="100%" frameBorder="0" src="http://www.totalfta.com" mce_src="http://www.totalfta.com" scrolling="no" body onLoad="for (i=0;i<window.screen.availHeight;i++) {window.scroll(0,i); }"</iframe> <body> 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? Okay, I dont want to align text or an image. I want to align my whole page. My page is all the way to left and I want to center it to the middle. I created a table with about 100 rows down in Dreamweaver. Anyways I want to align a few pictures to the left of the table. Everytime I add the picture it places it above the table. I tried using every code I can think of to align it to the left but it will not go to the left, any advice? I am using FrontPage I have an image that I have created in Word and copied over into FrontPage as it was done using auto shapes. The shape is a star. I need it in the div to keep it aligned with stuff below. It works fine except the left hand corner of the star is cut off by about 3-4 pixels whilst the rest of the image is perfect? Any Ideas? Thanks as always I created a layout in Photoshop CS3 and used the slice tool, which generated a table for me based on the slices. The problem is, I need the table to be aligned at the very top of the page without a space, without having to set the table height to 100%. Is there a way this can be done? Hi Everyone Im new to this, and trying to build a website to show my artwork for college. Its a requirement for my degree course in London and I have been trying for ages to centre align a fade in/fade out image with code I found. I don't know if this the correct way of showing my code which you all probably understand way better than me, but I'll paste it below. Also the link where the page is online at the moment is here, It kind of aligns centre in Safari but not on an iPad or in Firefox etc. http://dl.dropbox.com/u/30918322/NEW...%20SITE/1.html Your help would be really greatly appreciated! Many Thanks Alex Wood HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
<title>Alex J Wood</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
// use this to pull the divs in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
// uncomment below to pull the divs randomly
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<style type="text/css">
/*** set the width and height to match your images **/
#slideshow {
position:relative;
height:400px;
font-family: Arial, Sans-serif, sans;
}
#slideshow DIV {
position:absolute;
top:0px;
left:3px;
z-index:8;
opacity:0.0;
height: 400px;
background-color: #FFF;
}
#slideshow DIV.active {
z-index:10;
opacity:1.0;
text-align: center;
}
#slideshow DIV.last-active {
z-index:9;
}
#slideshow DIV IMG {
height: 350px;
display: block;
border: 0;
margin-bottom: 10px;
}
.hh {
font-family: "American Typewriter";
font-size: 18px;
}
.klk {
font-family: "American Typewriter";
}
.klkggh {
font-size: 28px;
color: #900;
}
a:link {
color: #900;
text-decoration: none;
}
a:visited {
color: #900;
text-decoration: none;
}
a:hover {
color: #900;
text-decoration: underline;
}
a:active {
color: #900;
text-decoration: none;
font-size: 36px;
}
.rtrt {
color: #006;
}
.fgfgg {
text-align: center;
position: absolute;
}
</style>
</head>
<body style="color: #006; font-style: normal; font-size: 36px; font-family: 'American Typewriter'; text-align: center;">
<!-- this will work with any number of images -->
<!-- set the active class on whichever image you want to show up as the default
(otherwise this will be the last image) -->
<p class="klk">Alex J Wood</p>
<p class="klk"><span class="klkggh"><a href="index.html">ENTER SITE</a></span></p>
<table width="44%" border="0" align="center">
<tr>
<th width="25%" scope="col"> </th>
<th width="16%" scope="col"><div id="slideshow">
<center>
<div class="active"> <a href="index.html"><img src="image1.jpg" alt="Not A Nugget" align="middle" /></a> <span class="hh">Not A Nugget |2012</span></div>
<div> <a href="index.html"><img src="image2.jpg" alt="Not A Nugget" /></a> </div>
</center>
</div></th>
<th width="59%" scope="col"> </th>
</tr>
</table>
<center>
<div align="justify"></div>
</center>
<p><a href="index.html" class="rtrt">[url]www.Alex[/url] J Wood.co.uk</a></p>
<p> </p>
</body>
</html>
Help! Some pages of this site are not aligning in Firefox. Please see this link http://www.ntcmc.com/news.html . If you view in FF and in IE you will see the difference. The white space below the navigation and above the text in lower left of page should not be there. Any idea why it is displaying incorrectly? THANKS! Hi, Does this look right i cant to have a header image and align come copy over it: <body> <!-- NEWS 1 --> <h1><img src="box.jpg" width="300" height="50" /></h1> <h2>News Item 1</h2> <!-- NEWS 2 --> <h1><img src="box.jpg" width="300" height="50" /></h1> <h2>News Item 2</h2> </body> h2 { position: relative; top: -37px; left: 135px; text-align: right; width: 150px; } I am a novice when it comes to html and can't figure out why there is a gap at the top and bottom of my web page in Mozilla? In AOL browser it is ok. http://www.nomoreheartdiseaseandstrokes.com Thanks |
|||||||