...

View Full Version : Backgrounds that cling



flynch01
02-21-2008, 06:52 PM
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/

_Aerospace_Eng_
02-21-2008, 06:55 PM
Yes thats all it is.

flynch01
02-21-2008, 06:57 PM
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.

jcdevelopment
02-21-2008, 07:02 PM
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



#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



<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


.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...

flynch01
02-21-2008, 07:06 PM
I see. Thanks mucho

flynch01
02-21-2008, 07:25 PM
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


<!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.


#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;
}

jcdevelopment
02-21-2008, 07:28 PM
#leftSide {
width: 30px;
height:800px;
float: left;
clear: left;
background-image: url("http://localhost/proj/image/left.png");
background-position:top right;}

try that

flynch01
02-21-2008, 07:34 PM
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;.

jcdevelopment
02-21-2008, 08:01 PM
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!

flynch01
02-21-2008, 08:05 PM
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.

jcdevelopment
02-21-2008, 08:12 PM
oh well then do a position fixed of an image exactly where you want it, like so:



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

try that!

flynch01
02-21-2008, 08:15 PM
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

jcdevelopment
02-21-2008, 08:42 PM
found this on thier site, this is the dic the image is on



#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

flynch01
02-21-2008, 08:44 PM
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.

jcdevelopment
02-21-2008, 08:53 PM
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!!

_Aerospace_Eng_
02-21-2008, 08:57 PM
Attach your images and attach a larger image of how its supposed to look. I'm assuming you made the images using some graphics design program and then sliced them. Post the unsliced image as well as the sliced images. You don't need tables for this but the code varies depending on the image.

flynch01
02-21-2008, 08:58 PM
I think it's easier if I just rar it, here you go:

This is what i'm trying to do:
http://i26.tinypic.com/33w2ype.png
Here are the files:

neetlife.co.uk/proj.rar

I used modular css to see what it's like in that, but it's the same really just more files. I really appreciate the help mate!

:)

Edit: Ok, I used PAINT.NET to make the images, no slicing just saved them as jpg. I'll make a image of how I want it to look. These aren't the final images I want to use because they look strange but getting them to just attach is the challenge at the moment.

_Aerospace_Eng_
02-21-2008, 09:18 PM
You were making this harder than it had to be. All you needed to do was combine the images, set it as a background image on the body, and set a min-height on Pcontainer. Also the font tag is deprecated don't use it. There are better alternatives. Try this for your HTML

<!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 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="PMLinkS">Mess</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">
<div style="border: 1px solid #ccc;padding: 2px; margin-left: 2px; margin-right: 2px;"> Messing with design.<br>
Designing with mess.<br>
Messy designing creates messy designs. </div>
<div style="border: 1px solid #ccc; background: #ccc; margin-left: 2px; margin-right: 2px;"> Messing with design.<br>
</div>
</div>
<b class="r6"></b><b class="r6"></b><b class="r7"></b> </div>
</div>
</body>
</html>
Use this for bridge.css

@import "cornerCurve.css";
@import "links.css";
@import "menuItems.css";
html, body {
font-size: 10px;
font-family: verdana;
color: #444;
margin:0;
padding:0;
background: #CCC url(../../image/bg.png) top center repeat-y;
height:100%;
}
div.PContainer {
border:1px solid #000;
border-top:0;
border-bottom:0;
width: 800px;
background:#FFF;
min-height:100%;
margin:auto;
display:inline-block;
}
* html div.PContainer {
height:100%;
}
div.PSection, div .PSectionC {
width: auto;
margin-bottom: 1px;
background: #FFF;
}
div.PSectionC {
padding: 4px;
}

and place the attached .png image inside of the image folder. I've also attached the psd file. I don't know if you have photoshop or not.

flynch01
02-21-2008, 09:22 PM
Yeah... I was hoping that was not going to be the answer to the problem. Never mind. Thanks very much, I ended up emailing the guy who made the Tiny Blue skin to ask him how he made sure his image div didn't move away from the container box.

Thank you.

Will use this method from now on :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum