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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Mar 2007
    Posts
    357
    Thanks
    46
    Thanked 22 Times in 21 Posts

    Backgrounds that cling

    How do you get backgrounds to cling around something. Like on

    http://www.newgrounds.com with the sides
    and
    http://komodomedia.com/ with the leaves

    But mainly like on newgrounds. Is it literally just an image made perfect width to fit accross?

    Heres the best example of what I mean, like how the white clings to it.

    http://garrysmod.com/
    Last edited by flynch01; 02-21-2008 at 06:55 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yes thats all it is.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Mar 2007
    Posts
    357
    Thanks
    46
    Thanked 22 Times in 21 Posts
    It doesn't look like it here:

    http://garrysmod.com/news.php?a=post

    Looks like its fitting around it somehow. D: And it's the same with the leaves, it doesn't do the lowest leaves till the end of the page.
    Last edited by flynch01; 02-21-2008 at 06:59 PM.

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    i would imagine that you would need two images..

    one on the left side, then flip ir for the right, then create a 3 column based page like so

    Code:
    #leftSide {
    width:....;
    height:....;
    background-image:url(path/leftimage.gif)no-repeat;
    float:left;
    clear:left;
    }
    #rightSide {
    width:....;
    height:....;
    background-image:url(path/leftimage.gif)no-repeat;
    float:right
    clear:right
    }
    #middle {
    width:....;
    height:....;
    properties:values;
    }
    then you would place it in the html like so

    Code:
    <div id="leftSide"></div>
    <div id="rightSide></div>
    <div id="middle"></div>
    thats just a basic layout! If you want also, which it looks like they have, you can add a second bottom under the left and right side. This would contain a repeating image that would repeat with the amount of content on the page. Like so

    Code:
    .underLeft {
    float:left;
    background-image:url(path/leftimage.gif)repeat-y;
    height:100&#37;
    .....
    }
    .underright {
    float:right;
    background-image:url(path/leftimage.gif)repeat-y;
    height:100%
    ....
    }
    and with a few adjustments it would go right under the left and right side and repeat as the height changed..

    If you have any questions or if anyone has comments let me know...

  • Users who have thanked jcdevelopment for this post:

    flynch01 (02-21-2008)

  • #5
    Regular Coder
    Join Date
    Mar 2007
    Posts
    357
    Thanks
    46
    Thanked 22 Times in 21 Posts
    I see. Thanks mucho

  • #6
    Regular Coder
    Join Date
    Mar 2007
    Posts
    357
    Thanks
    46
    Thanked 22 Times in 21 Posts
    Godamnit, I feel really stupid because i'm asking so many questions today. I did what you said but it kindof aligned itself to the far left of the screen. I'd link but it's on localhost. But if you want heres a screenshot and the source.

    http://i28.tinypic.com/2z7eus3.png

    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>
    <link type="text/css" rel="stylesheet" href="./include/CSS/bridge.css" media="screen, projection"/>
    <title>NEETLIFE</title>
    </head>
    <body>
    <div align="center">
    	<div id="leftSide"></div>
    	<div class="PContainer">
    		<div class="PSection">
    			<font style="font-size: 28px;">Design Messing</font><br>Messing Design
    		</div>
    		<div class="PSection">
    			<div style="center">
    				<span class="PMLinkS">Mess</span><span class="PMLinkC">With</span><span class="PMLinkE">Design</span>
    			</div>
    		</div>
    		<div class="PSectionC" align="left">
    			<b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>
    			<div class="r5">
    				Messing with design.<br>
    				Designing with mess.<br>
    				Messy designing creates messy designs.
    				<div align="center">
    					<span style="color: #555;" align="center">
    						---<br>
    						Hahaha roflroflrofl grr grr grr
    					</span>
    				</div>
    			</div>
    			<b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>
    		</div>
    	</div>
    	<div id="rightSide"></div>
    </div>
    </body>
    </html>
    And the CSS for what i'm trying to do.

    Code:
    #leftSide {
    	width: 30px;
    	height:800px;
    	float: left;
    	clear: left;
    	background-image: url("http://localhost/proj/image/left.png");
    }
    #rightSide {
    	width: 30px;
    	height:800px;
    	float: right;
    	clear: right;
    	background-image: url("http://localhost/proj/image/right.png");
    }
    
    body {
    	font-size: 10px;
    	font-family: verdana;
    	color: #444;
    	background: #CCC;
    	}
    div.PContainer {
    	border: 1px solid black;
    	width: 800px;
    	padding: 0px;
    	
    }
    div.PSection, div .PSectionC {
    	width: auto;
    	margin-bottom: 1px;
    	background: #FFF;
    }
    div.PSectionC {
    	height: 800px;
    	padding: 4px;
    }

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    #leftSide {
    	width: 30px;
    	height:800px;
    	float: left;
    	clear: left;
    	background-image: url("http://localhost/proj/image/left.png");
                 background-position:top right;}
    try that

  • #8
    Regular Coder
    Join Date
    Mar 2007
    Posts
    357
    Thanks
    46
    Thanked 22 Times in 21 Posts
    No difference

    http://i25.tinypic.com/sc81eh.png

    I put a border around it too so you can see whats happening. If I make the width wider it will move to the right, but because people have different widths on the screens it pushes the box to the right if the screens too small. auto did nothing, neither did 100&#37;.

  • #9
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    no surprise here, im stumped!! Im not sure why that isnt working, i am probably missing something, or it might have to do with the floats. That doesnt makes sense though.. Let me keep looking at it, because i did that and it worked for me!

  • #10
    Regular Coder
    Join Date
    Mar 2007
    Posts
    357
    Thanks
    46
    Thanked 22 Times in 21 Posts
    Look at this!
    http://csszengarden.com/?cssfile=/203/203.css

    Thats pretty much exactly what I want to do. No matter what size the page is its always right next to it. yet it's just a div positioned. I tried to change it a bit for my page but I don't get how it works.

  • #11
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    oh well then do a position fixed of an image exactly where you want it, like so:

    Code:
    #imageOne {
    background-image: url("http://localhost/proj/image/left.png");
    width:..;
    height..;
    position:fixed;
    top:..;
    left..;
    }
    try that!

  • #12
    Regular Coder
    Join Date
    Mar 2007
    Posts
    357
    Thanks
    46
    Thanked 22 Times in 21 Posts
    thats what i mean though, i did try that, looks fine on this pc, then when i look at it on laptop its moved out of place D: i'm sure its because of screen sizes, so why did the one in that link work? =[

    also, on this pc when i resize the window it just moves away
    Last edited by flynch01; 02-21-2008 at 08:21 PM.

  • #13
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    found this on thier site, this is the dic the image is on

    Code:
    #extraDiv1{
    	position:fixed;
    	top:0;
    	width:37px;
    	height:433px;
    	left:50&#37;;
    	margin-left:-235px;
    	background:url(pics/the_beauty.gif) no-repeat top left;
    	}
    	
    * html #extraDiv1{
    	position:absolute;
    	}
    mess with that i guess

  • #14
    Regular Coder
    Join Date
    Mar 2007
    Posts
    357
    Thanks
    46
    Thanked 22 Times in 21 Posts
    Yah I know thats what I said i messed with but didn't understand. I messed with it to no end, no matter what happened to image moved from the borders when i resized the image or viewed it on laptop.

    Godamnit... I hate to say it with all the people who say they hate tables but.... working without them sucks.

  • #15
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    yeah, they do, i think the best thing is to try and publish the site online, and then i could sit there and work on it. I didnt think this would be a hard question though, hahha! I have never claimed to be a css guru though, so hopefully something will come to me or another member can add something!!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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