Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Left and Right backround Images

    If you look at my layout

    Http://www.scorn-war.com/new/index.html

    I want to include images on the left and right of the backround.

    I am not sure how to do this.

    What I want it to do is:
    A. Show a custom image on the left and right
    B. Still have the main content centered the way it is
    C. Not stretch the screen, or show scrollers
    D. So its more of a page filler.

    Any suggestions or tutorials anyone knows of?

    Thanks a bunch,
    Josh

  • #2
    New Coder
    Join Date
    Dec 2007
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am also having a hard time getting the container div to stretch out.

    Is there some type of code that anyone knows of that would stretch the container to fit the persons resolution size vertically minus the size of my header. (browser vert size - 14px)

    I assume it would be a small bit of javascript in the css or something of that nature?

    Josh

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I can't help you codewise, but there are a lot of useful urls in my signature.

    Sources.

    http://exitfegs.co.uk/Sources.html

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I know what your talking about, but I am not 100% sure.. where do you want to the images to appear...

  • #5
    New Coder
    Join Date
    Dec 2007
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The best example I can give...

    My page is 1075px wide for the main container.

    I want an image to appear on the left and right sides of the container, where it is just black backround now.

    If you look at http://www.war-rvr.net/index.php they have images to the left and right of the main container. Well they use tables, but I don't want to use tables.

    And when you change your screen resolution you see more or less of these pictures but never a horizontal scroll bar.

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by JoshTrav View Post
    My page is 1075px wide for the main container.
    Why? If you're going to design fixed-width, at least allow 1024 x ? users to view without scrollbars.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I get scrollbars on my PC. 1024x768

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Goodmorning JoshTrav,
    to do your 2 seperate background images, you need 2 divs because you can only put one background per div. It's called nesting divs.
    In this example I used body for one background and #wrap for the second:
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	color: #fff;
    	background: url(http://www.war-rvr.net/v4/template/background_left.jpg) no-repeat left top;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	background: url(http://www.war-rvr.net/v4/template/background_right.jpg) no-repeat right top;
    }
    #container {
    	width: 1075px;
    	height: 760px;
    	margin: 0 auto;
    	background: #333333;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="container">
        	Your website here
        <!--end container--></div>
    <!--end wrap--></div>
    </body>
    </html>
    I am also having a hard time getting the container div to stretch out.

    Is there some type of code that anyone knows of that would stretch the container to fit the persons resolution size vertically minus the size of my header. (browser vert size - 14px)
    I'm not sure what way your stretching...
    The 100% height is a little harder. Here's a demo of that too: http://nopeople.com/CSS/full-height-layout/

    And stretching to fit the entire viewport works like this: http://nopeople.com/CSS/background_image_resize/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Dec 2007
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post

    And stretching to fit the entire viewport works like this: http://nopeople.com/CSS/background_image_resize/
    Hey Excavator,

    I am stretching by height.

    Some weird behaviors occur using this code on my site.

    If you go to http://www.scorn-war.com/new it looks great.

    But go to http://www.scorn-war.com/rules.html and it seems to only go the screen height. It won't extend past when the div is greater. Any ideas?

    On the topic of the left and right images.

    Lets say I want to put an image on the left hand side of my container. How would I get the right border to line up with the left side of my container and the top of the page?

    I was thinking maybe using margin or padding, but not sure how to. Also, on a side note, I am redo-ing the site at 1024 as suggested. I never even thought it out when I was adding things up.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Remove the lines in red:
    Code:
    div#container
    {
       width: 1075px;
       background: #000000 url(images/content/container-sides2.jpg) repeat-y;
       margin: 0 auto;
       height: 100%;
       min-height:100%;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Dec 2007
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by JoshTrav View Post
    Hey Excavator,
    On the topic of the left and right images.

    Lets say I want to put an image on the left hand side of my container. How would I get the right border to line up with the left side of my container and the top of the page?

    I was thinking maybe using margin or padding, but not sure how to. Also, on a side note, I am redo-ing the site at 1024 as suggested. I never even thought it out when I was adding things up.
    I tried both margin and padding today, with no avail. I put the site back the way it was for now as it looked a bit crazy. Any ideas?


  •  

    Posting Permissions

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