|
CSS - Tiling Background Not Showing
Hi, I have some simple CSS for a div tag, inwhich there should be a tiling background image. Here is the CSS code:
Code: #mainContent{
z-index:5;
padding:0;
margin: 2px;
background-image: url(images/common/bodybg.gif);
background-repeat:repeat-y;
height:100%;
}
Then I have my div tag: <div id="mainContent"> which holds 2 other divs, both without backgrounds. Yet my tiling background doesn't show. Is there anything wrong with my code? I have checked the image path etc, but can't figure it out. Here is the site: http://www.caillouette.com/SouthernLiving/ thanks Similar TutorialsHi there. I seem to be having an issue with my backgrounds that I've set to tile in my CSS not tiling (I've tried setting the width by percents, but that skews the entire design). I'm also not seeing the "container" background show up for some reason. Hopefully someone can assist me with this, I'd be forever grateful. You can see the page he http://sttwilightfrontier.co.uk/theme.php Theme.php Code: Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/theme.css">
<title>Theme Test</title>
</head>
<div id="container">
<div id="hleftcorner"></div>
<div id="headertop"></div>
<div id="hrightcorner"></div>
<div id="missionName"></div>
<div id="missionDesc"></div>
<div id="headercb"></div>
<div id="contenttlc"></div>
<div id="contenttop"></div>
<div id="contenttrc"></div>
<div id="sidebartop"></div>
<div id="contentleft"></div>
<div id="contentright"></div>
<div id="sidebar"></div>
<div id="content">
<div id="emblem"></div>
</div>
<div id="contentblc"></div>
<div id="contentbottom"></div>
<div id="contentbrc"></div>
<div id="sidebarbottom"> </div>
<div id="contentareabottom"></div>
</div>
</body>
</html>
theme.css Code Code:
@charset "UTF-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 100%;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
background: url(../images/theme/stars.png) repeat;
}
#hleftcorner {
background: url(../images/theme/h_leftcorner.png);
position:absolute;
left:0px;
top:0px;
width:245px;
height:180px;
z-index:1;
visibility:visible;
}
#headertop {
background: url(../images/theme/header_top.png) repeat-x;
position:absolute;
left:245px;
top:0px;
width:510px;
height:10px;
z-index:2;
visibility:visible;
}
#hrightcorner {
background: url(../images/theme/h_rightcorner.png);
position:absolute;
left:755px;
top:0px;
width:245px;
height:180px;
z-index:3;
visibility:visible;
}
#missionName {
background: url(../images/theme/missionName.png) repeat-x;
position:absolute;
left:245px;
top:10px;
width:510px;
height:58px;
z-index:4;
visibility:visible;
}
#missionDesc {
background: url(../images/theme/missionDesc.png) repeat-x;
position:absolute;
left:245px;
top:68px;
width:510px;
height:73px;
z-index:5;
visibility:visible;
}
#headercb {
background: url(../images/theme/header_cb.png) repeat-x;
position:absolute;
left:245px;
top:141px;
width:510px;
height:39px;
z-index:6;
visibility:visible;
}
#contenttlc {
background: url(../images/theme/content_tlc.png);
position:absolute;
left:0px;
top:180px;
width:45px;
height:45px;
z-index:7;
visibility:visible;
}
#contenttop {
background: url(../images/theme/content_top.png) repeat-x;
position:absolute;
left:45px;
top:180px;
width:702px;
height:45px;
z-index:8;
visibility:visible;
}
#contenttrc {
background: url(../images/theme/content_trc.png);
position:absolute;
left:747px;
top:180px;
width:45px;
height:45px;
z-index:9;
visibility:visible;
}
#sidebartop {
background: url(../images/theme/sidebar_top.png);
position:absolute;
left:792px;
top:180px;
width:208px;
height:45px;
z-index:10;
visibility:visible;
}
#contentleft {
background: url(../images/theme/content_left.png) repeat-y;
position:absolute;
left:0px;
top:225px;
width:45px;
height:521px;
z-index:11;
visibility:visible;
}
#content {
background: url(../images/theme/content.png) repeat;
position:absolute;
left:45px;
top:225px;
width:702px;
height:521px;
z-index:12;
visibility:visible;
}
#contentright {
background: url(../images/theme/content_right.png) repeat-y;
position:absolute;
left:747px;
top:225px;
width:45px;
height:521px;
z-index:13;
visibility:visible;
}
#sidebar {
background: url(../images/theme/sidebar.png) repeat-y;
position:absolute;
left:792px;
top:225px;
width:208px;
height:521px;
z-index:14;
visibility:visible;
}
#emblem {
background: url(../images/theme/SanctuaryEmblem.png);
position:absolute;
width:500px;
height:500px;
visibility:visible;
left: 110px;
top: 10px;
}
#contentblc {
background: url(../images/theme/content_blc.png);
position:absolute;
left:0px;
top:746px;
width:45px;
height:45px;
z-index:19;
visibility:visible;
}
#contentbottom {
background: url(../images/theme/content_bottom.png) repeat-x;
position:absolute;
left:45px;
top:746px;
width:702px;
height:45px;
z-index:20;
visibility:visible;
}
#contentbrc {
background: url(../images/theme/content_brc.png);
position:absolute;
left:747px;
top:746px;
width:45px;
height:45px;
z-index:21;
visibility:visible;
}
#sidebarbottom {
background: url(../images/theme/sidebar_bottom.png);
position:absolute;
left:792px;
top:746px;
width:208px;
height:54px;
z-index:22;
visibility:visible;
}
#contentareabottom {
background: url(../images/theme/ca_bottom.png);
position:absolute;
left:0px;
top:791px;
width:792px;
height:9px;
z-index:23;
visibility:visible;
}
I'm basically trying to get some of the areas to scale with the browser window, as it is resized. (Content area, sidebar, header, etc.) You can see which ones I tried to do so with the repeat tags in the CSS Code. Thanks a bunch in advance for any help that comes! I want the background image to be stationary as the page scrolls. I'm assuming the fixed parameter would do it but it's not. I have tried the following: Code: body {
font-family: Helvetica, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 11px;
background: url(images/background.jpg) fixed;
and this Code: body {
font-family: Helvetica, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 11px;
background: url(images/background.jpg);
background-attachment: fixed;
}
And neither worked. I thought well maybe scroll means the text will scroll so I changed them to scroll and still, it is tiling. What do I need to do to get it to stay fixed so the contents will scroll? Thanks in advance! Site: project-jericho.com An organization recently hired me to give their web site a "face lift". Everything was working fine until I tried to tile a background within the main content div. If you go to the page in internet explorer, you'll see how it's supposed to look. In firefox, however, the background does not show up. If I set the min-height value to a certain number of pixels in #main, the background stops tiling after that many pixels (in firefox.) min-height: 100%; does not work. The css (if necessary): (this is the css for everything under /* content */ which I'm fairly sure is where I've isolated the problem to. Code:
/* content */
#main {
color: #333;
margin: auto;
padding: 0px;
text-align: left;
width: 680px;
background-image: url('img/bgx2.jpg');
background-repeat: repeat-y;
}
#content{
width: 440px;
float: left;
padding: 10px 10px 20px 10px;
}
* html #content{
padding-top:20px;
}
#content .post
{
margin:0 0 3em 0;
}
#content .cat
{
margin:0;
padding:0;
color:#999;
}
#content .post-info
{
color:#777;
text-align:right;
}
#content .post-info em
{
font-style:normal;
float:left;
margin:0 5px 0 0;
}
em.user
{
padding-left:12px;
background:url(img/user.png) no-repeat left center;
}
em.date
{
padding-left:15px;
background:url(img/date.gif) no-repeat left center;
}
#main .post-comments
{
background:url(img/comments.gif) no-repeat left center;
padding-left:12px;
}
All I need for this code to do is to tile vertically in both Firefox and Internet Explorer. I've been wasting hours in this office on this and any help would greatly greatly appreciated. Thank you so much in advance. -Josh Hi I'm putting a page together with a vertical tiling background. It's ok in Safari, but the tiling image seems to stop before the bottom of the page. It should be held by the #container div, but the developer toolbar shows this ending way before the end of the page - even though I have contained content still appearing down to the page edge. The site is at bringmyshuttle.com As far as I can see my code makes sense... Any ideas? Thanks Hi, my css is probably a mess as I've been hacking things together for a few days. my site:jasondaydesign.com I have a div where my content divs are contained. In firefox & chrome, the background for the div shows fine. In IE, the background does not show. I'm not sure where the css issue is that's causing this. Could someone point me in the right direction for solving this? Thanks! Hi: I have the following in my CSS file: PHP Code: #body { background: url('images/columns.gif') repeat-y; text-align: left; } The problem is that the background image is not showing up un MS Internet Explorer. It works fine in Firefox. Is this a bug? Do I need a hack? My page works great in firefox, but in IE the top navigation div (top_navigation) SHOULD have a background color of red for testing perposes, but the color doesn't change! It looks like its inheriting the background color #e4dfd7 from the css body tag. I've tried using an inline style, or using !important, nothing works, and I have to make this available in at least IE6 and up. Thanks in advance for any help! html code -> cosmosristorante dot com / ox / index.asp The only way i can get my backgroud image to show is to explicitly state my body elements within each document. If I put them in css file and refer each page to that css file, my background image does not work, but all the other elements in that css file do. Why? JOhn Hi all, I haven't been working with CSS that long and I've searched for a fix but couldn't get anything to work. I can't get a background color to display in Firefox but it does in IE. Inside my "mainwrap" I have two columns and for some reason when I set my background to white for the "mainwrap" it just doesn't show up in Firefox. Here's xhtml code: xhtml Code: Original - xhtml Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="toparea"> <div id="header"></div> <!--end header--> <div id="menuarea"> <div id="menubox"> </div> <!--end menubox--> </div> <!-- end menuarea--> </div> <!--end toparea--> <div id="middlearea"> <div id="mainwrap"> <div id="topwrap"></div> <!--end topwrap--> <div id="leftcolumn"> <div id="content"></div> <!--end content--> <div id="recentwork"></div> <!--end webwork--> </div><!--end leftcolumn--> <div id="rightcolumn"></div> <!--end rightcolumn--> <div id="bottomwrap"></div> <!--end bottomwrap--> </div> <!--end mainwrap--> </div> <!--end middlearea--> <div id="bottomarea"></div> <!--end bottomarea--> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="toparea"> <div id="header"></div> <!--end header--> <div id="menuarea"> <div id="menubox"> </div> <!--end menubox--> </div> <!-- end menuarea--> </div> <!--end toparea--> <div id="middlearea"> <div id="mainwrap"> <div id="topwrap"></div> <!--end topwrap--> <div id="leftcolumn"> <div id="content"></div> <!--end content--> <div id="recentwork"></div> <!--end webwork--> </div><!--end leftcolumn--> <div id="rightcolumn"></div> <!--end rightcolumn--> <div id="bottomwrap"></div> <!--end bottomwrap--> </div> <!--end mainwrap--> </div> <!--end middlearea--> <div id="bottomarea"></div> <!--end bottomarea--> </body> </html> Heres the CSS: css Code: Original - css Code /* CSS Document */ body { background-image: url(../images/bottombg.jpg); background-repeat: repeat; font-family: Tahoma, sans-serif; margin: 0; } /* Begin top area */ div#toparea { width: 100%; height: 128px; background-image: url(../images/topareabg.jpg); background-position: top; background-repeat: repeat-x; float: left; } div#header { width: 800px; height: 100px; background-image: url(../images/headerbg.jpg); margin-left: auto; margin-right: auto; } div#logo { float: left; margin-top: 25px; margin-left: 5px; } div#tagline { margin-top: 37px; margin-left: 5px; float: left; } div#menuarea { width: 800px; height: 25px; margin-left: auto; margin-right: auto; } div#menubox { float: right; } .buttonbox { float: left; } .buttonbox img { border: none; } /* Begin middle area */ div#middlearea { width: 100%; background-image: url(../images/middleareabg.jpg); background-repeat: repeat; float: left; } div#mainwrap { width: 800px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; } div#topwrap { width: 800px; height: 20px; background-image: url(../images/topNavbg.jpg); float: left; } div#leftcolumn { width: 550px; background-color: #FFF; float: left; } div#content { width: 500px; margin-left: 10px; margin-top: 10px; } div#content p { font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 15px; } div#recentwork { width: 540px; height: 250px; background-color: #666666; margin-left: 10px; } div#rightcolumn { width: 250px; background-color: #FFF; float: left; } div#bottomwrap { width: 800px; height: 25px; background-image: url(../images/bottombgNav.jpg); float: left; } /* Begin bottom area */ div#bottomarea { width: 100%; height: 200px; background-image: url(../images/bottombg.jpg); background-repeat: repeat; float: left; } /* Text styles */ h1 { font: 100 normal 22px/normal Tahoma, Arial, sans-serif; text-transform: none; color: #999999; } .tagline { font-family: Tahoma, Arial, sans-serif; font-size: 12px; color: #999; } /* CSS Document */ Thanks for your time! For some reason no matter how I structure the code, I cannot get a background image to show up and I'm not sure why. Here is my current code:
Code: background: #cccccc url(/dir/bg.png) repeat-y; I've checked multiple sites just to verify that my code is correct, and it is. I've also tried the code another way: Code: background-color: #cccccc; background-image: url(/dir/bg.png); background-repeat: repeat-y; The image is uploaded to the correct directory as well. Any ideas? I have been trying to implement a shadowed effect on a layout I'm working on. Kind of like on this page . I tried it with 3 nested divs and will show you guys both sets of code. With both methods, the top level div is not showing (the one with top.jpg as a background) because it appears that the middle.jpg is covering it. Here is the code I have: Method 1: HTML Code:
<div id="wrapper">
<?php mosMainBody(); ?>
</div>
CSS Code:
#wrapper {
width: 805px;
height: 100%;
margin: auto;
background: url(../images/middle.jpg) right repeat-y;
}
#wrapper::before {
display: block;
line-height: 0;
background: url(../images/top.jpg) no-repeat top right;
}
#wrapper::after {
display: block;
line-height: 0;
background: url(../images/bottom.jpg) no-repeat bottom right;
}
Method 2 Nested Divs: HTML Code:
<div id="wrap1"><div id="wrap2"><div id="wrap3">
<?php mosMainBody(); ?>
</div></div></div>
CSS Code:
#wrap1 {
background: url(../images/top.jpg) no-repeat top ;
width: 805px;
margin: auto;
clear: both;
}
#wrap2 {
background: url(../images/middle.jpg) repeat-y;
width: 805px;
margin: auto;
}
#wrap3 {
background: url(../images/bottom.jpg) no-repeat bottom;
width: 805px;
margin: auto;
}
The page I'm working on is located at http://www.havenotband.com/index.php Hi everyone, I have a design I am working on a design, which has a image for a background, well the image does not show, I am not sure why, it just shows white text. Anyway here is my code. Code: #logo{
background-image: url('logo.png');
background-repeat: no-repeat;
}
#logo .text{
letter-spacing: -0.1em;
font-weight: bold;
font-size: 21px;
text-align: left;
color: #FFFFFF;
}
That does not work, however, this does. Code: <img src="logo.png" alt="Logo" /> Any suggestions? Hi all, I've got a jpg background image using CSS and it's not displaying in Opera, but it is in absolutely every other browser back to IE 5.0. If I change the image to a gif, it displays fine. Is there any reason why the jpg wouldn't display in Opera? This puzzles me for this is the first time EVER that it is not working. I have "background-image" coding and NONE of those images are even showing up, yet when i add them on the index file as a normal image all is well... Any ideas? Hello, I have been trying to figure this out, but have been unsuccessful. I am using a modalPopupExtender, but when the popup comes up, my background is still active. I suspect it has to be something in my css file, but would appreciate some help on this. I suspect it is the css that is causing this, but cannot figure out what. TIA! Here is the code for the MPE: <cc1:ModalPopupExtender ID="MPE1" runat="server" TargetControlID="btnShowModalPop" PopupControlID="divPop" BackgroundCssClass="modalBackground" PopupDragHandleControlID="panelDragHandle" DropShadow="true"/> Here is the code in my css file: .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPop { background-color:Gray; border-width:3px; border-style:solid; border-color:Black; padding:0; width:250px; color:White; } .drag { background-color:#ff0000; cursor: move; border: solid 2px white; } I found the issue by referencing a blank css file and slowly adding statements in. It was a combination of the following which prevented the backgroundcssclass to not be shown propertly: #body div div { background: url(images/body_tr.gif) top right no-repeat; } #body div div div { background: url(images/body_bl.gif) bottom left no-repeat; } #body div div div div{ background: url(images/body_br.gif) bottom right no-repeat; } #body div div div { background: url(images/body_bg.gif) bottom left no-repeat; } #body div div div div { background: url(images/body_bg.gif) bottom right no-repeat; } #body .inner div { background: none; } I ended up add these bg imgs in my master page div tags directly and is working fine.....for now :P Edit/Delete Message I'm trying to use stylesheets to make a fixed, no-repeat background. It is working in Mozilla 1.0, but it's not showing up right in IE 5.5. Any ideas why? The site is at http://www.people.virginia.edu/~bjl6d/journal.html. The part that I put in my style sheet is: .journaltext { font-family: "Book Antiqua", Garamond; font-size: 12px; font-weight: normal; color: #000000; background-image: url(../images/layout/Layout_r2_c2.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: left top} Everything is perfect in Mozilla, but when I view it in IE, the background is not fixed. It doesn't repeat, which is good, but it's still not fixed. Any ideas what's wrong here? Hey guys, I've recently started working on my css and for some reason my background image isn't showing up in my container. Any idea why? CSS Code: Original - CSS Code /* CSS Document */ * { margin: 0; padding: 0; } body { font-size: 62.5%; background: #344149; } p, li { font: 1.2em/1.8em Tahoma, sans-serif; margin-bottom: 10px; } h1 { font: 2.0em Tahoma, sans-serif; color: white; height: 0px; } h2 { font: 1.8em Tahoma, sans-serif; color: green; margin-bottom: 10px; } ul { margin-left: 25px; } img { border: none; } #page-wrap { background: black; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto"); } #page-wrap #inside { margin: 10px 10px 0px 10px 10px; padding-top: 10px; padding-bottom: 10px; } #main-content { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; padding-left: 180px; padding-right: 180px; padding-top: 20px; } #header { background: #000000; text-align: center; } #left-sidebar { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; width: 150px; float: left; padding-left: 15px; padding-top: 20px; } #right-sidebar { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; width: 150px; float: right; padding-right: 15px; padding-top: 20px; } #footer { background: #267f23; text-align: center; padding-top: 20px; padding-bottom: 20px; color: white; } /* CSS Document */ It's the Background_Content.jpg that isn't loading for some reason. It resides in the Image folder located in the same directory as the html file. Oh and the reason I had it included so much was to test to see if it was just the main-content that wouldn't load it. The main content should include the left-sidebar and right-sidebar right? Please help! Edited because now that I posted I finally discovered the problem, I was missing a semi-colon after my width statement... |
|||||||