SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Toronto, Ontario
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation 2 Background Images 1 page?

    Hey guys,

    I have a problem I've never ran into before.

    I have a website that is going to use 2 different background images that will both be tiled on the x axis.

    You can check it out here...

    http://mariodabrowski.com/portfolio/

    I was wondering how I can achieve this using CSS while keeping it proper on other browsers.

    Any help would be great.

    Thanks,
    Mario
    $ Available For Hire
    Need a website designed or coded? Then feel free to contact me!

    PSP Backgrounds - PSPBG.net || Photoshop Brushes - PSBrushes.net

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't see what you mean. I can't see any images that are being tiled. Can you post links to the images you mean and be a bit more specific with your description?

  3. #3
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Toronto, Ontario
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    The link is just an example of my template to show what I'm trying to work out.

    The first background image is the light blue gradient on the left hand side. It's a 1px wide bg that is tiled on the x axis.

    The second bg is the one on the right hand side, it's the dark blue bar in the middle, which is also a 1px image that will be tiled on the x axis.

    These 2 backgrounds will stretch to the furthest point on the browser window, the gradient to the left, and the solid blue to the right.

    I got the blue gradient on the page no problem, I just need a way to be able to tile a second image over top of the existing one.
    $ Available For Hire
    Need a website designed or coded? Then feel free to contact me!

    PSP Backgrounds - PSPBG.net || Photoshop Brushes - PSBrushes.net

  4. #4
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Toronto, Ontario
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a better example, I began coding it, hopefully it helps clear things up.

    I want the dark blue bar to stretch to the right hand side of the screen.

    http://mariodabrowski.com/portfolio/site/

    Thanks,
    Mario
    $ Available For Hire
    Need a website designed or coded? Then feel free to contact me!

    PSP Backgrounds - PSPBG.net || Photoshop Brushes - PSBrushes.net

  5. #5
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting page layout. Take a look at http://mmckinney.com/mario/ and see if it solves your problem.

    I needed a break from work...
    mikem

  6. #6
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Toronto, Ontario
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks for that Mike, It looks like you got it working. I will take a look at the code as soon as I get out of bed.

    You Rock,
    Mario
    $ Available For Hire
    Need a website designed or coded? Then feel free to contact me!

    PSP Backgrounds - PSPBG.net || Photoshop Brushes - PSBrushes.net

  7. #7
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you discovered a cut & paste error. This project doesn't use bgsleight.js and I've removed the script element from the header. I do use the JavaScript technique for other projects where I need IE-6 to display a PNG with a transparent gradient (see http://aldencabinetry.com).

    I ZIPed the page directory and added a link on the page to retrieve it. I tested this on Mac FireFox 2.x and IE-6 under Windows XP. Let me know if you have problems getting it to work.

    mikem

  8. #8
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had this same problem before. It looks like you have found the solution but I don't see the solution posted.

    What I did was create two divs and position them with the z-index. The one on top has the content. The one on the bottom has two divs each 50% of the screen width.

    like this

    Code:
    #layer1 {
    	height: 900px;
    	width: 100%;
    	padding: 0;
    	margin: 0;
    	}	
    #left {
    	width: 50%;
    	height: 900px;
               background: #FFFFFF url(left.png);
    	margin: 0;
    	padding: 0;
    	float: left;
    	}
    #right {
    	width: 50%;
    	height: 900px;
    	background: #000000 url(right.png);
    	margin: 0;
    	padding: 0;
    	float: left;
    	}
    #layer2 {
    	height: 900px;
               padding: 0;
    	margin: 0;
               margin-right: auto;
               margin-left: auto;
    	position: absolute;
    	top: 0;
    	z-index: +1;
    	}
    layer2 was the content layer
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  9. #9
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Toronto, Ontario
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks for the help guys, AVdes solution is simpler, but Mikes is great too.

    If you guys want Mikes solution it's on the link he posted.

    I have a question for you AVdes, I got everything working, but I cant seem to center my #layer2 it just sticks to the left hand side.

    Any Ideas?

    Thanks,
    Mario
    $ Available For Hire
    Need a website designed or coded? Then feel free to contact me!

    PSP Backgrounds - PSPBG.net || Photoshop Brushes - PSBrushes.net

  10. #10
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @AVdes: The solution is posted at http://mmckinney.com/mario/

    mikem

  11. #11
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Toronto, Ontario
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah I figured it out.

    I used...

    Code:
    left: 50%;
    margin-left: -405px;
    The only problme is, if you scale the indow to below 800px in width, the page begins to hide in the left margin, anybody know how to fix this?

    http://mariodabrowski.com/portfolio/site/

    Thanks,
    Mario
    $ Available For Hire
    Need a website designed or coded? Then feel free to contact me!

    PSP Backgrounds - PSPBG.net || Photoshop Brushes - PSBrushes.net

  12. #12
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Trouble with that, Mike, is the right edge of the green area is not a fixed pixel distance from the centre of the screen at different screen sizes, so it will not line up with the white news area below it.

  13. #13
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding this to layer2.

    margin: 0 auto;

    that should center align it.
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  14. #14
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was also looking at this, and used an idea similar to AVdes's but using the trick only on the header div - the green band is applied to the body background. I separated the header section from the rest, and relatively positioned the header at 50% from the left with a negative left margin and a 50% right margin. The dark blue graphic is then applied as a background to this.

    I also put the menu in the main content area and pulled it back up into the header with a negative top margin. I also went through and got rid of those horrible deprecated <center> and <font> tags to use a strict doctype, and marked theings up a bit more semantically.

    Without the comment area, javascript and footer, I came up with :
    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=utf-8">
    <title>Mariusz Dabrowski</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="header">
      <div id="headercontent">
      	<h1>Clean</h1>
    	<p>Top menu stuff</p>
      </div>
    </div>
    <div id="main_container">
      <ul id="contact_menu">
    	<li><a href="#" class="current">News</a></li>
    	<li><a href="#">Resume</a></li>
    	<li><a href="#">Contact</a></li>
    	<li><a href="#">X</a></li>
      </ul>
      <div id="body_left">
        <div id="news">
    	  <h2>Our New Website</h2>
    	  <p>Welcome, as you may have noticed Photoshop Brushes has come out with a new	look. We're going for a cleaner look to minimize the usless content and give you direct access to the Photoshop Brushes.</p>
    	  <p>All the photoshop brushes are now categorized into their proper categories. We got	rid of the Submit a photoshop brush button, but you can still submit your photoshop	brushes using the contact button. We're going to be adding new photoshop brushes weekly so be sure to check back often.</p>
    	</div>
      </div>
      <div id="body_right">
      	<h2>About Me</h2>
    	<h3>The Life of Mario Dabrowski</h3>
      </div>
    </div>
    
    </body>
    </html>
    css:
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	background-color: #061315;
    	color: #FFFFFF;
    	background-image: url(images/blue_bg.gif);
    	background-repeat: repeat-x;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    p {
    	margin: 1em 0;
    }
    #header {
    	height: 302px;
    	position: relative;
    	left: 50%;
    	margin-left: -405px;
    	margin-right: 50%;
    	background-image: url(images/dark_bg.gif);
    	background-repeat: repeat-x;
    }
    #headercontent {
    	width: 315px;
    	height: 292px;
    	background-image: url(images/mid_banner.gif);
    	background-repeat: no-repeat;
    	background-position: left bottom;
    	padding: 10px 0 0 495px;
    }
    #headercontent h1 {
    	width: 71px;
    	height: 33px;
    	font-size: 1px;
    	color: #061315;
    	background-image: url(images/clean.gif);
    	margin-left: -485px;
    	margin-bottom: 20px;
    }
    #main_container {
    	width: 810px;
    	margin: 0 auto;
    }
    #contact_menu {
    	height: 26px;
    	margin-top: -26px;
    	position: relative;
    }
    #contact_menu li {
    	list-style: none;
    	float: left;
    	margin-right: 4px;
    }
    #contact_menu a {
    	font-size: 92%;
    	background-color: #B0DADE;
    	color: #153C40;
    	text-decoration: none;
    	float: left;
    	padding: 4px 13px;
    	font-weight: bold;
    }
    #contact_menu a:hover, #contact_menu .current {
    	background-color: #f0f9f8;
    	padding-bottom: 8px;
    }
    #body_left {
    	width: 495px;
    	float: left;
    }
    #news {
    	background-color: #F0F9F8;
    	color: #666666;
    	background-image: url(images/delete_banner.gif);
    	background-repeat: no-repeat;
    	background-position: 10px 10px;
    	padding: 130px 16px 20px;
    }
    #news h2 {
    	color: #3DB2C3;
    	font-size: 100%;
    }
    #body_right {
    	width: 298px;
    	float: right;
    }
    #body_right h2 {
    	height: 49px;
    	border-bottom: 1px solid #103034;
    	font-size: 1px;
    	color: #061315;
    	background-image: url(images/about_me.gif);
    	background-repeat: no-repeat;
    	background-position: 18px 13px;
    	margin-left: -17px;
    }
    #body_right h3 {
    	font-size: 100%;
    	font-weight: normal;
    	color: #737373;
    	padding-top: 15px;
    }
    Cheers
    Graeme

  15. #15
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    by replacing:
    Code:
    margin-left: -405px;
    margin-right: 50&#37;;
    with this:
    Code:
    margin: 0 auto;
    it should center the header or layer2 div. I'm assuming that the left disapering is caused by the negitive value.
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  16. #16
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Toronto, Ontario
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help guys,

    For some reason when I replace...

    Code:
    left: 50%;
    margin-left: -405px;
    with...

    Code:
    margin: 0 auto;
    It throws the site to the left margin, not centering the page.

    I guess the dissapearing site is fine as I'm not really in the demographic of 800 by 600 but it would be nice to find a solution.

    Thanks,
    Mario
    $ Available For Hire
    Need a website designed or coded? Then feel free to contact me!

    PSP Backgrounds - PSPBG.net || Photoshop Brushes - PSBrushes.net

  17. #17
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you look at my suggestion?

  18. #18
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Toronto, Ontario
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Centauri thank you VERY much, with your help it's all fixed now, not to mention my code is looking alot better.

    Thanks you to everyone who helped out

    Mario
    $ Available For Hire
    Need a website designed or coded? Then feel free to contact me!

    PSP Backgrounds - PSPBG.net || Photoshop Brushes - PSBrushes.net


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
  •