SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Auburn, WA
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two background images?

    Is there any way to use two background images? I'm asking because right now I have a background image centered on the page thay repeats along the y-axis.
    Code:
    body {background:#600 url(images/bg.gif) repeat-y center;}
    It's about 600 pixels wide. This is where all the content goes and then there is red space off to the sides. I would like to fill this red space with another background so it doesn't look so blank. Is there any way to do this easily using CSS like using two backgrounds?

  2. #2
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am interested in the answer to this question also as I tried it once and it didn't work

    Instead I just placed the second image in a div over the area I wanted to fill and volia! two background images.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can only have one background image per element but you can have as many elements as you like.

    As earther said you can then place them absolutely where you want them quite easily.

    There are problems if you want continuous images as you can have with the body but there are ways around it in some cases.

    This example puts a background image in the body all the way down the centre. The outer element repeats an image all the way down the left side of the page continuosly as long as content pushes it down.

    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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html,body {height:100%} 
    body {
     margin:0;
     padding:0;
     background-image: url(img.gif);
     background-repeat: repeat-y;
     background-position: center center;
    }
    #outer {
     width:100%;
     min-height:100%;
     height:100%;
     background:url(img.gif) repeat-y left top;
    }
    body>#outer {height:auto}
    </style>
    </head>
    <body>
    <div id="outer">Content</div>
    </body>
    </html>
    Some older browsers won't like it though.

    IE doesn't understand background:fixed either (except on the body element) otherwise you could just fix the image to the side etc.

    Hope that helps.

    Paul

  4. #4
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Auburn, WA
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was afraid that would be the only solution, because I'm not sure there will always be enough content to push the background down to the bottom of the page. But if that's the only way to do it then that's what I'll do.

    On another note, if I put the doctype at the top of my page I get some weird spacing between my divs in Mozilla, but not in IE. If I take it out looks fine. Any reason why? I was using the same doctype that you posted in your code; that's why I'm bringing it up.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    On another note, if I put the doctype at the top of my page I get some weird spacing between my divs in Mozilla, but not in IE. If I take it out looks fine. Any reason why? I was using the same doctype that you posted in your code; that's why I'm bringing it up.
    If you don't use a doctype then some browsers will assume quirks mode and this will usually cause you more problems than not. (However in your case its the other way around.)

    I reccommend using a doctype (such as the one in my post which is correct) to make sure you are working in standards mode.

    The differences you are experiencing are the differences between quirks and standards mode (especially IE6 which also uses the broken box model in quirks mode).

    If you post the code you are using then I can offer a solution so that you code correctly for both browsers.

    The display in mozilla with a doctype is probably how it should look (but i'd need to see your code first).

    Paul

  6. #6
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Auburn, WA
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Here's my XHTML.
    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">
    <head>
    <title>Flathead Valley Perspectives Class</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="Kevin D. Clark" />
    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
    <link rel="stylesheet" type="text/css" href="red.css" media="screen" />
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="header"><img src="images/perspectives.jpg" alt="Frontier Perspectives" /></div>
    
    <div id="navigation">
    <ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="#">Resources</a></li>
    	<li id="last"><a href="#">Links</a></li>
    </ul>
    </div>
    
    <div id="content">
    <p>This is where all the content goes. On this page it should be where announcements are posted and sort of a quick reference for all the other pages on the site.</p>
    </div>
    
    <div id="footer">
    <p>All content &copy; 2004 Frontier Perspectives.<br />
    If you are having any problems viewing this site <a href="#">contact our webmaster</a>.</p>
    </div>
    
    </div>
    
    </body>
    
    </html>
    And here's my CSS.
    Code:
    body {
    	background:#600 url(images/leaves-bg.gif);
    	color:#000;
    	font:12pt arial;
    	margin:0px;
    	text-align:center;
    	padding:0px;
    }
    
    #container {
    	background:#600 url(images/bg.gif) repeat-y center;
    	width:558px;
    	margin-right:auto;
    	margin-left:auto;
    	padding:0px;
    	text-align:left;
    }
    
    #header {
    	text-align:center;
    	margin:0px;
    	padding:0px;
    }
    
    #navigation {
    	text-align:center;
    	margin:0px;
    	padding:0px 8px 0px 8px;
    }
    
    #navigation ul {
    	border:0px;
    	margin:0px;
    	padding:0px;
    	list-style-type:none;
    	text-align:center;
    	clear:left;
    }
    
    #navigation ul li {
    	display: block;
    	float: left;
    	text-align: center;
    	padding: 0;
    	margin: 0;
    }
    
    #navigation ul li a {
    	width: 134px;
    	border-top: 1px solid #000;
    	border-left: 1px solid #000;
    	border-bottom: 1px solid #000;
    	border-right: none;
    	padding: 0;
    	margin: 0 0 10px 0;
    	color: #c00;
    	text-decoration: none;
    	display: block;
    	text-align: center;
    	font-weight: bold;
    }
    
    #navigation ul li#last a {
    	width: 135px;
    }
    
    #content {
    	padding:0px 20px 0px 20px;
    	margin:0 0 10px 0;
    }
    
    #footer {
    	padding:0px 20px 0px 20px;
    	font-size:8pt;
    	text-align:center;
    }
    I just commented out the doctype at the top. Here's what's not working:
    1. If the doctype is not commented then I get a space after the HEADER div and the NAVIGATION div. This is only in Mozilla (Firebird); IE has it if I don't remove whitespace in the HEADER div (carriage returns are seen as spaces, remember?).
    2. I also get a similar space at the end of the document if I fill the content area so it flows to the bottom of the page (like discussed earlier). Again, IE does not have this, but Mozilla does.
    3. The navigation was ripped from A List Apart. It looks perfect in Mozilla, but IE hates it. However the ALA site looks fine in IE, so I'm not sure what the problem is. I did remove a hack, but I think it only applied to font size.

    I hope you can see that I'm trying to be standards compliant and all. Even though it's really not important for this page I think it's important for the web as a whole, so I'm doing my part I guess.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    1. If the doctype is not commented then I get a space after the HEADER div and the NAVIGATION div. This is only in Mozilla (Firebird); IE has it if I don't remove whitespace in the HEADER div (carriage returns are seen as spaces, remember?).
    remember? I never forgot !

    The small space under the header in mozilla when using a doctype is caused by mozilla allowing room for descenders on text. Images and text should be set on the same baseline therefore there is a small gap underneath. (Ie gets this wrong).

    What you usually need to do is to set the image to display block which cures the problem, but in your case as you have the image centred you will need to use another method.

    Set the height of the header to the height of the image. Also set the height of the image in the image tag (or in the css).

    You should always define your image sizes anyway, otherwise it will slow the browser down. A browser will allocate space for the image and continue loading the rest of the page. However if you don't define a size theen it has to wait for the whole image to load before it can render any more of the page. (Thats the theory at least.)

    In your body style you have defined padding:0 but you also need to define margin:0 as well. Some browers use padding and some use margins.

    Your other queries are probably down to that fact that mozilla has different defaults for its initial padding/margins.

    Mozilla will add space to the top & bottom margin of the <p> tag wheras IE will only add it to the bottom.

    See this thread:

    http://www.sitepointforums.com/showt...1&page=1&pp=25

    Where margins and padding are concerned its best to explicitly set them both if you have display problems between browers.

    In quirks mode the browser guesses what you want but in standards mode you have to make sure you take control (not always easy I know).

    3. The navigation was ripped from A List Apart. It looks perfect in Mozilla, but IE hates it. However the ALA site looks fine in IE, so I'm not sure what the problem is. I did remove a hack, but I think it only applied to font size
    What exactly is the problems you are having with the navigation? If you can elaborate a bit it would help in finding a solution.

    If you leave the doctype out in IE6 then the brwoser will assume quirks mode and use the broken box model as well. This means that the widthor height of any elements that contain borders or padding will be different between IE and other browsers. (You will still have to account for the difference in IE5 and 5.5. anyway but its best to have the code display the correct box model.)

    Hope some of this is of some use.

    Paul

  8. #8
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Auburn, WA
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks a lot. Problems 1 and 2 are now solved and I actually understand why! Great explanation.

    Quote Originally Posted by Paul O'B
    You should always define your image sizes anyway, otherwise it will slow the browser down. A browser will allocate space for the image and continue loading the rest of the page. However if you don't define a size theen it has to wait for the whole image to load before it can render any more of the page. (Thats the theory at least.)
    I actually put this theory to practice and use the height and width properties, but with this whole 'separate content from presentation' I wasn't sure if people still did that and whether to put it in the XHTML or the CSS. Any opion on that?

    Concerning problem 3: everything was being shifted over a few pixels and not lining up with the background. I say WAS because it isn't anymore! That's fixed too, and all it took was a couple properties in my style sheet.

    In short, you rule.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I wasn't sure if people still did that and whether to put it in the XHTML or the CSS. Any opinon on that?
    That was one thing I've always meant to look up myself. I still put the image sizes in the image tag myself but I know some people will put the width and height in the css. I'll have to do some tests and see what happens

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •