|
CSS - Expanded Background Image/static
Hi. I have an image that I want to be a background in a webpage. What I want to do is have that background fill up the rest of the page but remain static on the page while the content scrolls (if need by, y'know, varies depending on the resolution of the users monitor). How can I accomplish this?
Similar TutorialsSo I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges. I've set up the css as follows: body { background: #000 url(gradient.jpg) repeat-x; margin: 0; } Here's where I run into my problem... I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely. <div id="bg_image"></div> #bg_image { width: 100%; height: 1100px; background: url(images/bg_image.jpg) no-repeat top center; margin: 0; position:absolute; } This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars. This makes perfect sense of course I just can't come up with an alternative. If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content. I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve. Any suggestions would be greatly appreciated! Thanks, Josh Hi. I have two DIVs. One below another. When the top one expands, i want it to push down the bottom one. When the bottom one expands, i want it to be just below the top one (open or closed) and always expand to the bottom of the containing DIV. Problem is that when i expand the bottom one, it goes to the end of the body tag, not the bottom of the containing DIV. Help? Thanks. Code:
<div style="width: 14em; border: solid 1px green; height:515px;">
<div id="nav_round" style="width: inherit;">
<div id="nav_ctl" style="width: 13em; background-color: #C3D9FF; padding:5px;">
<span style="float: left;">
<img id="nav_arrows" src="http://www.trezoro.com/icons/btn_down.gif" onclick="expCollapse('nav_wrapper', 'nav_arrows');"
style="padding-left: 5px; cursor: pointer;" /></span><center>
<span><b>Quick Calendar</b></span></center>
</div>
<div id="nav_wrapper" style="width: 13em; background-color: #C3D9FF; padding:5px 5px 5px 11px;">
</div>
</div>
<div style="border: solid 1px red; width: auto;
margin-top: 10px; margin-right: 15px;" id="video_round">
<div id="video_ctl" style="width: inherit; background-color: #C3D9FF;">
<span style="float: left;">
<img id="video_arrows" src="http://www.trezoro.com/icons/btn_down.gif" onclick="expCollapse('video_wrapper', 'video_arrows');" style="padding-left: 5px; cursor: pointer;" />
</span>
<center>
<span><b>Videos</b></span></center>
</div>
<div id="video_wrapper" style="width: inherit; height:100%; padding: 0px 3px 3px 3px; background-color: #C3D9FF;">
<div style="background-color: White; width: 100%; overflow-y:scroll; overflow-x:hidden;">
<div style="width: 100%; padding: 5px;">
<div id="reel1">
<img src="../images/default.jpg" style="cursor: pointer; border: solid 1px brown;" /></div>
<div style="padding-left: 10px; vertical-align: top;">
<span style="float: left; width: 100%;">test</span> <span style="float: left; width: 100%;">
test</span> <span style="float: left; width: 100%;">test</span> <span style="float: left;
width: 100%;">test</span> <span style="float: left; width: 100%;">test</span>
<span style="float: left; width: 100%;">test</span>
</div>
<script type="text/javascript" language="javascript">
new Draggable('reel1',{clone:true, revert:true});
Droppables.add('day_grid', {
accept: 'products',
onDrop: function(element)
{ $('shopping_cart_text').innerHTML =
'Dropped the 'element.alt + ' on me.'; }});
</script>
</div>
<div id="hrule" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px brown;" /></span><span
style="padding-left: 10px; vertical-align: top;">test</span>
</div>
<div id="Div1" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px brown;" /></span><span
style="padding-left: 10px; vertical-align: top;">test</span>
</div>
<div id="Div2" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px brown;" /></span><span
style="padding-left: 10px; vertical-align: top;">test</span>
</div>
<div id="Div3" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px #eaeaea;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div4" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div5" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div6" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div7" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div8" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div9" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
</div>
</div>
</div>
</div>
Is it possible to have the <div>'s #content to expand 100% in height for Gecko browsers? It worked fine in IE.... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* ================================================== */
/* == Web Layout == */
/* ================================================== */
body {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
HEIGHT: 100%;
BACKGROUND-COLOR: #55649D;
TEXT-ALIGN: center; /* for IE stupidity */
BORDER-TOP: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
HEIGHT: 100%;
}
#content {
MARGIN-TOP: 0px; /* border-top is at one, so margin-top only need to be at one pixel */
MARGIN-BOTTOM: -1px; /* border-bottom is at one, so margin-bottom only need to be at one pixel */
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
PADDING: 0px;
WIDTH: 598px;
HEIGHT: 100%;
BACKGROUND-COLOR: #8FA1B3;
BORDER-TOP: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
}
#wrapper {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
MIN-HEIGHT: 100%;
BACKGROUND-COLOR: #77649D;
BORDER-TOP: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
* html #wrapper {HEIGHT: 100%;} /* IE Hack since IE does not support "min-height" in the #wrapper*/
/* ================================================== */
/* == HTML General == */
/* ================================================== */
div
{
MARGIN: 0px;
PADDING: 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">asdf</div>
</div>
</body>
</html>
THanks, FletchSOD 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. In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: 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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09 I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move. Here is one of the examples: Code:
#homepage-bar h2.construction {
position:fixed;
top:225px;
left:505px;
}
I tried changing to position: absolute; I also tried to use percentages on the left: I know this is easy, but I can't find the fix after googling for 30 minutes. Help! I'm trying to create a little background image for each image on this page. A kind of crappy looking polaroid type background image. It works fine in Firefox, but not in IE. Any ideas? http://www.rhizaowns.com/holly/index.php Code: div.top {
border: 10px solid #CCCCCC;
border-bottom-width: 0px;
padding: 0px;
background-image: url(menutile.jpg);
}
The code above yields this . It is uneven with the normal image, though both are the same size. I simply want to tile the bg image to the border even with the normal menu images. What am I doing wrong? I want to use php to get images from a database and display them as css background-image attributes I know that the css Code: #id { background-image: url ('path/file'); }
works (obviously) and the html Code: <img src='image-generator-script.php'> also works but the css Code: #id { background-image: url ('image-generator-script.php'); }
doesn't work for me. It seems as though it should work. Why place such a seemingly arbitrary limitation on CSS as only being able to display images from existing files? I've done lots of searching through documentation and on forums, but not found anything conclusive either way. A couple of people have said it works. But it doesn't for me. Is there some extra configuration step I'm missing? Does anyone know for a fact that it works? -- so I can know for sure that somewhere I'm making a blunder in my code. But the code is simple, and I don't see where it could go wrong. (As is always the case!!) I can see the image in the browser just by pasting in the script link to the address bar. I know that url() specifiers are relative to the location of the stylesheet, not the html document, but in this case the html, the css, and the php are all in the same directory. I can't see what I could be doing wrong, so it really looks like you can't do it. But why?? And why isn't it mentioned in the documentation? (At least in the placers I've looked.) If you store all your images in a database, how on earth can you display any of them in CSS except by using a script in the url() specifier? I've seen plenty of tips about generating css files from php (I already do it), but that won't help in this case. All I can think of is to have php write the image data from the database into a temporary file, and put that file name into the url() specifier. But what a horrible kludge!! I will be very grateful to anyone who can give me solid facts on this question. Andrew Blake How do I put a background image on a div composed of a dropdown and textfield? I've done this but it does not work: <link type="text/css" rel="stylesheet" href="search.css" /> </head> <body> <div id="searchbar"> <select> <option value ="value1">Value 1</option> <option value ="value2">Value 2</option> </select> <input type="text" name="searchbar" size="30" /> # searchbar { background-image: url(images/searchbar.jpg); } Also, I want to have another div on the same line for my submit button. How do I do this if a div puts a line break after its content? Thank you. I've got a <td> that contains a background image, a horizontal rule. I've defined this style this way: Code: td.columnHead {
background-image: url(grafix/content/content_guide_top.gif);
height: 19px;
width: 229px;
}
Now I've defined h2 this way: Code: h2 {
font-family: Impact, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #6A283E;
font-weight: normal;
background-color: #EBEBE0;
padding-right: 8px;
}
Now here's the HTML: Code: <td class="columnHead"><h2>REQUIRED READING</h2></td> My intention is to have the table cell show the text against a plain background (as specified in the h2 style). Then, starting 8 pixels to the right of where this text ends, I want to see the background image. What happens is that the background image is completetly obscured on the h2 line. Then a new line in the <td> is created, and there I see my background image. This is in spite of the height of this <td>, which I've set at 19px. You can see an example of this here . Any suggestions? I am trying to display a button image (70px * 70px) with text positioned above it. However, the size of the button scales with the size of the font of the text. How can I get the image displayed at full size? Image attached. PHP 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> <title>2 Column CSS Layout - parellel design</title> <style type='text/css'> .bizinfomask{ position: relative; overflow: hidden; margin: 0px auto; width: 100%; padding-top: 10px; } .bizinfocolleft{ position: relative; width: 100%; right: 50%; } .bizinfocol1{ position: relative; overflow: hidden; float: left; width: 48%; left: 95%; padding-top: 10px; position: relative; text-align:center; height:70px; } .bizinfocol2{ position: relative; overflow: hidden; float: left; width: 48%; left: 3%; } .button { font-family: Georgia, serif; position:relative; font-size: 42px; font-weight: bold; color:red; padding-top: 10px; position: relative; height:170px; background-image:url('csindex.png'); background-repeat:no-repeat; background-position:center right; } </style> </head> <body> <? $button_text = "100"; $business = "Acme"; $address = "123 fourth street"; $description = "description"; echo "<div class='bizinfomask'>"; echo "<div class='bizinfocolleft'>"; echo "<div class='bizinfocol1'>"; echo "<span class='button'>$button_text</span>"; echo "</div>"; echo "<div class='bizinfocol2'>"; print "<span class='bizname'>$business</span><br /><span class='bizinfo'>$address</span><br/><span class='description'>$description</span>"; echo "</div> "; echo "</div> "; echo "</div>"; ?> </body> </html> Thanks for taking the time to read my question. I have a small logo that I would like to stay in the top and bottom corners of my page. Can I do that? Here is what I have so far Code: background-image: url('HelpImages/LandmarkBorder.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
but this only gives me one image. I need something to show up in the top left, and both bottom corners. If this can't be done, can I have one image for the background and stretch it across the whole page? Thanks, Brad I'm trying to make a td change it's background when you rollover the link within it. This code seems ok to me, but I'm not having any luck with the rollover effect. Can any experts take a look? .nav{ background-image:url('images/topmenu/blacknav.jpg'); } .nav a{ font:12px Verdana, Arial, Helvetica, sans-serif; color:#fff; display: block; font-weight:bolder; text-decoration:none; text-align:center; } td.nav a:hover { background-image:url('images/topmenu/nav_highlight.jpg'); } I'm wondering is is it possible to have a background-image for the <p>?? I tried this and nothing happen. The filepath for the image is correct. I saw at http://www.w3.org/TR/REC-CSS2/colors.html that this is possible. Code:
p.pBullet1
{
COLOR: #FFFF00;
BACKGROUND-COLOR: #FF0000;
BACKGROUND-IMAGE: url("image/ul_li_bullet.gif");
}
So, what did I do wrong? THanks, FletchSOD |
|||||||