|
CSS - How To Get Background Images To Show Correctly?
I am working on this page:
http://concrete-creative.com/pp/products.html and the problem I am having is that I want the rest of the "flower" image to show behind the content area... I have it set as the background image of that table, but it's not showing up. Here's an image of how it is supposed to appear: http://concrete-creative.com/pp/pp_sample.jpg Can anyone direct me on how to work this out? Thank you! (I posted this is the HTML forum too but can't figure out how to move it, so I just posted it here too) Similar TutorialsHey everyone, I was trying to create a design for a friend, so I started it in Firefox, I got halfway done, went and checked it in IE7, and the background image isn't showing. Here is my code along with a screen shot of it in Firefox and IE7. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">/* <![CDATA[ */
/* globals */
* {
margin: 0;
padding: 0;
}
body {
background-color: #0E1211;
color: #FFFFFF;
font-family: tahoma, verdana, arial;
font-size: 1em;
background-image: url( background1.gif );
background-repeat: no-repeat;
}
a img {
border: 0;
}
a, a:link, a:visited, a:hover, a:visited {
color: #EC5568;
text-decoration: none;
}
a:focus {
outline: none;
}
a:hover {
text-decoration: none;
}
#container {
padding: 10px;
}
#menu {
float: left;
width: 20%;
opacity: .6; /* All others */
-moz-opacity: .6; /* Gecko browsers */
filter: alpha( Opacity: 50 );
background-color: #666666;
text-align: center;
}
#menu li {
display: block;
line-height: 200%;
list-style-type: none;
}
#menu a {
padding: 5px;
padding-right: 80px;
padding-left: 80px;
background-color: #333333;
}
#menu a:hover {
background-color: #000000;
}
#menu h2 {
text-align: left;
padding-left: 15px;
font-size: 16px;
}
#main {
margin-left: 1%;
padding: 1%;
float: right;
width: 77%;
opacity: .6; /* All others */
-moz-opacity: .6; /* Gecko browsers */
filter: alpha( Opacity: 50 );
background-color: #666666;
text-align: justify;
}
/* ]]> */</style>
</head>
<body>
<div id="container">
<div id="menu">
<h2>asdf</h2>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
<div id="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam justo elit, ullamcorper ut, dapibus quis, faucibus eu, magna. Nam pede. Fusce tincidunt volutpat tellus. Vestibulum ultrices. Donec augue felis, commodo quis, vestibulum in, tincidunt nec, turpis. Etiam orci ipsum, consectetuer sed, volutpat lacinia, tempor et, ante. Etiam bibendum, dui consectetuer varius facilisis, nisi ante ultrices dui, et tincidunt felis tortor in pede. Aenean sagittis, nisi sed consequat dictum, arcu justo dignissim urna, mollis sodales est mi id urna. Aliquam erat volutpat. Sed sit amet nisi. Quisque sodales mi sed dolor.
Sed tortor. Vestibulum aliquam semper magna. Suspendisse ac urna vitae turpis sagittis semper. Sed arcu est, sollicitudin sed, vulputate ut, volutpat vitae, mi. Integer porta eros ac mi. Ut mattis est sed nulla. Donec nec eros. Vivamus vestibulum congue mi. Fusce vel quam at elit condimentum lobortis. Nunc adipiscing, risus rutrum volutpat lobortis, est massa vestibulum ipsum, et mollis est sem eget odio. Integer eu metus id mauris tempor pellentesque. Mauris lacinia tincidunt diam. Donec pulvinar. Phasellus lectus augue, feugiat eget, aliquam ut, egestas sed, purus. Donec dolor arcu, commodo vitae, scelerisque ut, lobortis sed, sapien. Mauris nonummy tellus id mauris.
</div>
</div>
</body>
</html>
Screen shot for FF. Screen shot for IE7. Any ideas on why this is happening? IE has been going weird when ever I use background images <body> <div id="wrapper" style=" vertical-align:middle;"> <div id="border-top"> <div id="border-left"> <div id="border-right"> <div id="border-bottom"> </div> </div> </div> </div> </div> </body> body { background-color:#5E362C; margin: 0 0 0 0; } #wrapper { width: 828px; height: 558px; position:relative; left: 50%; margin-left:-414px; } #border-top { background-image: url(../Webdesign/MIRAGE services1_r2_c2.jpg); background-position:top left; background-repeat:no-repeat; width: 828px; height: 558px; } #border-left { background-image: url(../Webdesign/MIRAGE services1_r3_c2.jpg); background-position:top left; background-repeat:no-repeat; width: 828px; height: 558px; margin-top:20px; } #border-right { background-image: url(../Webdesign/MIRAGE services1_r3_c18.jpg); background-position:top right; background-repeat:repeat-y; width: 828px; height: 557px; margin-top:-20px; margin-bottom:20px; } #border-bottom { background-image: url(../Webdesign/MIRAGE services1_r10_c3.jpg); background-position:bottom right; background-repeat:no-repeat; width: 828px; height: 558px; margin-top:-1px; } Thanks for the help ! I have a backround coded in the Div I have set up for my navigation...when I call an image in (button image) into the foreground of my Div, the background moves up so only part of it is viewable. This is my html: Code: <div style="position:static;"><img src="images/hdr_regular.jpg" height="29" width="320" border="0" align="left" alt=""/></div> <div style="position:static; background-image:url(images/nav_bg.jpg); background-repeat:repeat-x;"><img src="images/nav_logout_btn_grey.jpg" height="42" width="87" border="0" /></div> This is my css: Code: body, #wrapper
{ width: auto; min-width: 0px; min-height:100%; font-family:Arial,Helvetica,sans-serif; margin: 0; padding:0; overflow:hidden;
}
#wrapper_hdr {position:static; width:auto; min-width:0px; min-height:100%;
}
#wrapper_navigation { position:static; width:auto; min-width:0px; height:42px; background-image:url(../images/nav_bg.jpg); background-repeat:repeat-x;
}
#wrapper_content { position:static;width:auto; min-width:0px; background-image:url(../images/bg.jpg); background-repeat:repeat-x; padding:8px; padding-bottom:100px;
}
#wrapper_ftr { width:auto; min-width:0px; white-space:100%; height:80px; background-color: #F4F4F4; padding:2px; bottom:0; left:0;
}
any help would be greatly appreciated. Thanks! An important part of my design is the background image. I have tried many different things but cannot seem to solve this. I have two options: Option 1: One placing the image in a tag within the body. Results where pretty good except in IE 6 the content is displayed under the image. You can see the effect of option 1 on this portion of the site: http://woodysfireworks.nl/w/index.html example Code:
/*option1 background image*/
img.bg {
background-color:#000;
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
overflow:hidden;
/* Set up positioning */
position: fixed;
z-index:0;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
Option2: I placed the image in the style sheet and then included a class and id in the tag. Here the images get blown up in all version of IE. example Code:
/*option 2 background image*/
#start{ background:url(images2/426.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";}
I would really appreciate some insight. I am pulling my hair out. Thanks 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. I'm pretty new to website design. I have a lot of programming experience (C++, Java, Python) but very little HTML/CSS experience. I'm learning Django right now and am having trouble with my presentation. I'm hoping someone here can help me. I'm not sure how many here know Django so I'll try and skip over as much of that as I can. I have a somewhat cookie-cutter CSS stylesheet I'm using so I can learn the environment. Below are snippets of my .html files and .css file. base.html Code:
<body>
<div id="header">
<div id="title">
<div id="innertitle">
{% block header %}{% endblock %}
</div>
</div>
</div>
index.html Code:
{% block header %}
<h1>Signal Auctions</h1>
{% endblock %}
main.css Code:
#header {
margin:0 auto;
}
#title {
padding:20px 20px;
margin:0 auto;
background:#333 url('images/titlebg.png') repeat-x scroll 50% 50%;
}
#innertitle {
width:90%;
margin:0 auto;
}
h1 {
font-size:3em;
padding-left:10px;
}
The problem is that I can't seem to get the image images/titlebg.png to display. I don't think it's an issue with pathing - I have other images in the same location that do display and I use the same method to call them. Any thoughts? Good Day, I am trying to figure out why my CSS Rollover images are not showing up in FireFox, but do in IE. Below are links to my pages and CSS, and if anyone can give me some suggestions, ideas I would be very grateful!!! Brook http://www.karmaimports.net/centercss.htm http://www.karmaimports.net/cssrollover.css what is should look like: http://www.karmaimports.net/center.htm Just curious as to what i'm doing wrong here, its the #content block that isn't working. Any help that could be provided would be greatly appreciated. css Code: Original - css Code body { font-family: Verdana, Tahoma, Arial; color: #FFFFFF; font-size: 11px; } .bg { width: 100%; position: absolute; top: 0; left: 0; z-index: 5000; } #pagecontent { width: 800px; height: 600px; position: relative; z-index: 6000; margin: auto; } #content { width: 800px; background-color: #999999; } #latesttut { width: 381px; height: 150px; border: 3px solid #FFFFFF; float: left; padding-left: 5px; padding-right: 5px; } #latestblog { width: 381px; height: 150px; border: 3px solid #FFFFFF; float: right; padding-left: 5px; padding-right: 5px; } #seperator { width: 800px; height: 5px; float: left; } #latestnews { width: 784px; height: 213px; border: 3px solid #FFFFFF; padding-left: 5px; padding-right: 5px; float: left; } #footer { width: 800px; position: absolute; bottom: 0; } .nav { background-image: url('images/blank1pxl.jpg'); } a:link { text-decoration: none; color: #0066CC; font-size: 9px; } a:hover { text-decoration: underline; color: #0066CC; font-size: 9px; } a:visited { text-decoration: none; color: #0066CC; font-size: 9px; } a:active { text-decoration: none; color: #0066CC; font-size: 9px; }
I am a total CSS newbie...but I am trying to make my page display properly in both IE and firefox... Right now IE is perfect, and firefox displays nothing in the center! http://www.charlotteweddingphotos.com Two CSS files: http://www.charlotteweddingphotos.c...resentation.css http://www.charlotteweddingphotos.c...-box-layout.css I searched the net, and people were talking about clearing, and this and that...let me know if you know what my problem is! Thanks so much in advance! Sorry to ask but I cannnnnnot find this answer. I know it can be done too... Ok, I have a wordpress site and every time I add in custom CSS with a "background-image" TAG It works locally but not when I plug it to the live site. The graphics are a navigation bar thats it... here is the code Code: @charset "utf-8"; /* CSS Document */ a span { display: none; } #container #nav { background-image: url(../images/nav.png); height: 30px; width: 926px; margin-left: 100px; } #container #nav li { float: left; list-style-type: none; } a.main_nav { display: block; height: 30px; z-index: 1; } a.main_nav:hover { background-position: 0px -30px; } #nav_1 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 133px; float: left; padding-left: 5px; background-repeat:no-repeat; } #nav_2 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 182px; float: left; padding-left: 10px; background-repeat:no-repeat; } #nav_3 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 160px; float: left; padding-left: 5px; background-repeat:no-repeat; } #nav_4 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 148px; float: left; padding-left: 5px; background-repeat:no-repeat; } #nav_5 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 115px; float: left; padding-left: 5px; background-repeat:no-repeat; } #nav_6 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 122px; float: left; padding-left: 5px; background-repeat:no-repeat; } #nav_7 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 122px; float: left; padding-left: 5px; background-repeat:no-repeat; }
and my HTML Code: <div id="nav"> <a href="" class="main_nav" id="nav_1"><span>button</span></a> <a href="" class="main_nav" id="nav_2"><span>button</span> </a> <a href="" class="main_nav" id="nav_3"><span>button</span> </a> <a href="" class="main_nav" id="nav_4"><span>button</span> </a> <a href="" class="main_nav" id="nav_5"><span>button</span> </a> <a href="" class="main_nav" id="nav_6"><span>button</span> </a> <a href="" class="main_nav" id="nav_7"><span>button</span> </a> <div class="clear"></div> </div> if anyone can help me understand why this does not work in WP that would be most gracious of you -Jordan My css code Code: #menu {width:172px; padding: 0; font-family: Verdana, Arial, sans-serif; font-size: 13px; background-color: #FFFFFF; color: #333;}
#menu ul {border: 1px black solid; list-style: none; padding: 0; margin: 0 0 1 0; background-color: #d1d1d1;}
#menu li .menu_box {background-image: url('./images/menu_fill.gif'); margin-left: 200px;}
#menu li {border: none; margin: 0;}
#menu li a {display: block; padding: 5px 5px 5px 0.5em; background-color: #FFFFFF; text-decoration: none; width: 100%;}
My html code Code: <div id='menu'>
<ul>
<li class='menu_box'><img src='./images/menu_news.gif' alt='' /></li>
<li><a href='{$url}'>+ Home</a></li>
<li><a href='{$url}about.php'>+ About Nascar Interior</a></li>
</ul>
<ul>
<li class='menu_box'><img src='./images/menu_services.gif' alt='' /></li>
<li><a href='{$url}portfolio.php'>+ Portfolio</a></li>
<li><a href='{$url}enquiry.php'>+ Enquiry</a></li>
</ul>
</div>
For some reason I can't get menu_fill.gif to fill the <li> with the class menu_box. Is there something wrong with my code? I have a layout made up of divs, and held together by another div. That holder div is supposed to have a background image, but it wont show on every browser that I've tried, except IE7. Here's the id: #holder { background-image: url(/files/images/CSS/header.png); width: 750px; margin-left:auto; margin-right:auto; margin-bottom: 10px; margin-top: 10px; } Backgrounds show on other divs, so why not this one? Hi everyone...new here and I hope you can help! Thanks is advance! I want to repeat an image (bkgd.jpg) in my background and it doesn't seem to be working. Here is the site: romanceplaybook I can't post the entire URL because I'm a new registrant. But just put dot com at the end. Not that the page background is white. It should be repeating the image bkgd.jpg Here is the CSS: body { background: #ffffff url(images/bkgd.jpg) top repeat-y; color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; margin: 0px auto 0px; padding: 0px; } #wrap { background: #ffffff url(images/bg.jpg) top center repeat-y; color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; margin: 0px 300px 0px; padding: 0px; } /************************************************ * Hyperlinks * ************************************************/ a, a:visited{ color: #507AA5; text-decoration: none; } a:hover{ text-decoration: underline; } /************************************************ * Header * ************************************************/ #header { background: #FFFFFF; width: 1000px; margin: 0px auto 0px; padding: 0px 0px 0px 0px; text-align: center; text-transform: uppercase; } #header a { font-family: Times New Roman, Helvetica, Sans-Serif; font-size: 48px; color: #333333; text-decoration: none; padding: 0px 10px 0px 10px; margin: 0px; text-transform: uppercase; } #header a:hover{ color: #333333; } /************************************************ * Navbar * ************************************************/ /************************************************ * Left Sidebar * ************************************************/ #l_sidebar { float: left; width: 160px; margin: 0px 20px 0px 0px; padding: 20px 0px 20px 0px; } #l_sidebar ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #l_sidebar li { list-style: none; margin: 0px; padding: 0px; } #l_sidebar ul li { margin: 0px; padding: 5px 0px 0px 0px; } #l_sidebar ul li a { color: #507AA5; text-decoration: none; } #l_sidebar ul li a:hover { color: #507AA5; text-decoration: underline; } /************************************************ * Right Sidebar * ************************************************/ #r_sidebar { float: right; width: 160px; margin: 0px 0px 0px 0px; padding: 20px 0px 0px 0px; } #r_sidebar p{ padding: 2px 0px 16px 0px; margin: 0px; line-height: 20px; } #r_sidebar ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #r_sidebar ul li { margin: 0px; padding: 5px 0px 0px 0px; } #r_sidebar ul li a { color: #507AA5; text-decoration: none; } #r_sidebar ul li a:hover { color: #507AA5; text-decoration: underline; } /************************************************ * Content * ************************************************/ #content { width: 950px; margin: 0px auto 0px; padding: 0px; } #content p{ padding: 0px 0px 15px 0px; margin: 0px; line-height: 20px; } #content p img{ float: left; border: none; margin-right: 15px; margin-bottom: 10px; } #content h1 { color: #333333; font-size: 22px; font-family: Times New Roman, Verdana, Arial, Sans-Serif; font-weight: normal; padding: 0px 0px 0px 0px; margin: 0px; } #content h1 a { color: #333333; text-decoration: none; } #content h1 a:hover { color: #658DB5; text-decoration: none; } #content h2 { color: #333333; font-size: 14px; font-family: Times New Roman, Verdana, Arial, Sans-Serif; font-weight: bold; padding: 5px 0px 5px 0px; margin: 0px; border-top: 1px dotted #C0C0C0; border-bottom: 1px dotted #C0C0C0; } #content p ol{ margin: 0px; padding: 0px 0px 0px 20px; } #content p ul{ margin: 0px; padding: 0px 0px 0px 20px; } blockquote{ margin: 0px 0px 0px 25px; padding: 0px 25px 0px 10px; font-style: italic; color: #666666; border-left: 3px solid #B3C8DB; } #content blockquote p{ margin: 0px 0px 20px 0px; padding: 0px; } #contentmiddle { float: left; width: 550px; margin: 0px 0px 0px 0px; padding: 20px 5px 10px 20px; text-align: left; } #contentmiddle p img{ float: left; border: none; margin-right: 15px; margin-bottom: 10px; } .contentdate { background: #FFFFFF url(images/date.gif); float: left; width: 45px; height: 50px; margin: 0px; padding: 0px; } .contentdate h3 { color: #FFFFFF; font-size: 10px; font-weight: normal; padding: 1px 0px 0px 10px; margin: 0px; text-transform: uppercase; } .contentdate h4 { font-family: Times New Roman, Helvetica, Sans-Serif; color: #999999; font-size: 21px; font-weight: bold; padding: 5px 4px 0px 0px; margin: 0px; text-align: center; } .contenttitle { float: left; width: 480px; margin: 0px; padding: 0px 0px 0px 10px; } #contentmiddle ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #contentmiddle ul li { margin: 0px; padding: 5px 0px 0px 0px; } #contentmiddle ul li a { color: #507AA5; text-decoration: none; } #contentmiddle ul li a:hover { color: #507AA5; text-decoration: underline; } #content img.wp-smiley { float: none; border: none; padding: 0px; margin: 0px; } #content img.wp-wink { float: none; border: none; padding: 0px; margin: 0px; } .postspace { background: #EFEFEF url(images/spacer.gif); width: 440px; height: 32px; margin: 0px; padding: 0px; } /************************************************ * Footer * ************************************************/ #footer { background: #FFFFFF; width: 952px; margin: 0px auto 0px; padding: 10px 0px 10px 0px; text-align: center; border-top: 1px solid #C0C0C0; } /************************************************ * Search Form * ************************************************/ #searchdiv { margin: 0px; padding 0px; } #searchform { margin: 0px; padding: 0px; overflow: hidden; } #s { width: 190px; background: #EFEFEF url(images/search.gif); color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; padding: 3px; margin: 8px 0px 0px 0px; border: 1px solid #C0C0C0; } /************************************************ * Comments * ************************************************/ #commentblock { width: 395px; background: #EFEFEF; color: #333333; float: left; padding: 10px 20px 0px 20px; margin: 10px 0px 10px 0px; border: 1px solid #C0C0C0; } ol#commentlist { padding: 5px 0px 5px 0px; margin: 0px; list-style-type: none; } .commentdate { font-size: 12px; padding-left: 0px; } #commentlist li p{ margin-bottom: 8px; line-height: 20px; padding: 0px; } .commentname { color: #333333; margin: 0px; padding: 5px 5px 5px 0px; } .commentinfo{ clear: both; } .commenttext { clear: both; margin: 5px 0px 20px 0px; padding: 20px 10px 5px 10px; width: 365px; background: #FFFFFF url(images/comment.gif) no-repeat top; } .commenttext-admin { clear: both; margin: 5px 0px 20px 0px; padding: 20px 10px 5px 10px; width: 365px; background: #FFFFFF url(images/comment.gif) no-repeat top; } #commentsformheader{ padding-left: 0px; } #commentsform{ text-align: left; margin: 0px; padding: 0px; } #commentsform form{ text-align: left; margin: 0px; } #commentsform p{ margin: 0px; } #commentsform form textarea{ width: 99%; } p.comments_link img{ margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } I have created a 2-column liquid layout that works perfectly in Safari, FF(Win & Mac), Netscape(Win & Mac), IE5(Mac) and IE6(Win). In IE5 and 5.5 (Win) I don't get any images. the images are all position:absolute, with their containers set to position: relative. I tried them at first as simple image tags with a class assigned. I then tried to wrap them in Divs with ids. I also messed a little with the z-indexes. Nothing has worked so far. The 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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"><!-- @import url(css/base.css); --></style> <style type="text/css" media="print"><!-- @import url(css/print.css); --></style> </head> <body> <div id="container"> <div id="head"> <div id="headerTitle"><img src="images/headerTitle.gif" alt="Ken Dalton" height="100" width="325" border="0"/></div> <div id="headerGraphic"><img src="images/headerGraphic_Home.gif" alt="Header Graphic" height="100" width="400" border="0"/></div> </div> <div id="leftColumn"> <img src="images/typewriter_Home.gif" alt="typewriter" height="220" width="120" border="0"/> <p class="linkSelectedTop1">Welcome</p> <p class="link1"><a href="bio.php">Biography</a></p> <p class="link1"><a href="blog.php?category=">Musings</a></p> <p class="link1"><a href="guestBook.php">Guest Book</a></p> <p class="link1"><a href="links.php">Links</a></p> <p class="link1"><a href="mailto:ken@kendalton.com">Contact</a></p> </div> <div id="rightColumn"> <div id="rightPages48"><img src="images/rightPages48.gif" alt="graphic" height="600" width="48" border="0"/></div> <div id="krdPortrait"><img src="images/krdPortrait.gif" alt="Portrait of Ken Dalton" height="200" width="175" border="0"/></div> <h1>Welcome</h1> <p class="clear"> </p> </div> <div id="footer"><p> </p></div> </div> </body> </html> The CSS... html { height: 100%; margin: 0 auto; padding: 0; text-align: left; background-color: #000000; } body { height: 100%; margin: 0; padding: 0; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 80%; background-color: #000000; } a { text-decoration: none; color: #A50023; } #container { position: relative; margin: 0; padding: 0; min-height: 100%; } * html #container { height: 100%; } #head { position: relative; background-image: url("../images/headerBlend.gif"); background-repeat: repeat-x; background-position: 0 0; text-align: left; margin: 0; padding: 0; height: 100px; } #headerTitle { position: absolute; top: 0; left: 0; z-index: 10; } #headerGraphic { position: absolute; top: 0; right: 0; z-index: 9; } #rightPages48 { position: absolute; top: 0px; right: 0; z-index: 10; } #krdPortrait { position: absolute; top: 0px; right: 64px; z-index: 10; } #leftColumn { float: left; top: 100px; left: 0; z-index: 10; width: 120px; margin: 0; padding: 0; background-color: #000000; text-align: right; } #leftColumn p { font-weight: bold; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } #leftColumn a { color: #BFA673; } #leftColumn a:hover { color: #A50023; } .link1 { border-top: 1px solid #606880; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } .linkSelected1 { color: #A50023; border-top: 1px solid #606880; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } .linkSelectedTop1 { color: #A50023; margin-top: 0px; margin-bottom: 0px; padding-right: 9px; padding-top: 3px; padding-bottom: 3px; } #rightColumn { position: relative; min-height: 100%; margin: 0; margin-left: 120px; padding: 0; background-image: url("../images/rightColumnFill48.gif"); background-repeat: repeat-y; background-position: 100% 0%; background-color: #FFFFFF; text-align: left; } * html #rightColumn { height: 100%; } #rightColumn h1, h2, h3, h4, h5, h6, p { margin-left: 36px; margin-right: 320px; margin-top: 0px; margin-bottom: 0px; } #rightColumn h1 { font-size: 200%; color: #606880; padding-top: 36px; } #rightColumn p { color: #333333; margin-top: 9px; } #clear { width: auto; height: 500px; margin-right:48px; margin: 0; padding: 0; margin-right:48px; background-color: Transparent; } #footer { width: auto; height: 72px; margin: 0; padding: 0; background-color: #000000; } #footer p { margin-top: 36px; } Hello all! I'm having difficulties... in IE, showing background image works perfectly, however, on FireFox it does not show the background image... SAMPLE CODE: Code: #header385 {
width: 1009px;
margin: auto;
background-image:url(http://www.zadarsport.com/20pozadina_385.png);
background-repeat:repeat-y;
}
#kraj {
width: 1009px;
margin: auto;
background-image:url(http://www.zadarsport.com/20kraj.png);
background-repeat:repeat-y;
z-index:-1;
}
i do not use height option because it's depending on how many words and images article has, however, it works in IE example: http://www.zadarsport.com/x.php please check #kraj and #header385 and try to help me PLEASE... thanks! Hi, I have a page where I am including a background image via CSS. It looks fine when viewed in a browser, but when I print it the background does not show up. I have my stylesheet include set to both screen and print: <link rel="stylesheet" type="text/css" href="includes/css/form.css" media="screen, print"> The CSS code in question that sets the background image is: #title{ background: url(../../images/title_bg.gif); width: 398px; height: 52px; text-align: right; } <div id="title"> <div class="titleText"><cfoutput>#FormDETAIL.strTitle#</cfoutput></div> </div> Why can I not see this background image when I print the page?? It was showing up until I changed something in the CSS that I can't change back (because it would mess up the formatting), and now I don't know how to further change the CSS to get the footer to display properly. (Um... can't post link to the site, what should i do?) For reference, the footer background is the same as the navigation background (silver). It may currently be set to highlightred.png but that was so I could try to determine if it was offset behind anything. It doesn't appear to be, unless it's lining up perfectly behind highlight.png from the navigation. Any help would be greatly appreciated, and thank you in advance. Hey everyone. I have never posted here before, but I am really needing some help. I am not a newbie, and make layouts on a regular basis. Now I am not claming that I know everything about CSS cause I def don't...lol...but this one has really got me stumped. Please help. I created a layout for a friend of mine. He was complaining about the background not showing up. Well I immediately went and checked the code and IT WORKED JUST FINE. I tried the layout code on two other user's myspace profiles and used two different computers to check it and CRAZY ENOUGH, it was still working perfectly. However when you add the layout to his profile, the background will just NOT show up. It is not only this layout, but I tried different layouts, once that I created and ones I didn't. Whenever you put a layout code in his profile, every other element of the layout works EXCEPT for the background showing up. So I figured it must be some other code pasted in one of his sections, screwing the layout code up. WRONG AGAIN! I took at ALL other codes in every section and the background still won't work. I even tried changes Myspace account settings and all kinds of crazy off the wall things, and I can't get it to work. Has anyone ever heard of this? Please tell me you have, and that you know what might be causing this...and have a fix. It is driving me insane. Thanks! I have just started writing a page and the first thing I did was establish a body background color and image. It works in IE but not FF. Can someone please give me a clue what is wrong. I have searched all the CSS books and the internet but I cannot find an answer. Thanks in advance. The URL is http://www.childrens-stories.me.uk/ |
|||||||