...

View Full Version : Left and Right backround Images



JoshTrav
12-13-2007, 09:32 AM
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

JoshTrav
12-13-2007, 09:35 AM
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

effpeetee
12-13-2007, 02:18 PM
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

Papa
12-13-2007, 05:16 PM
I think I know what your talking about, but I am not 100% sure.. where do you want to the images to appear...

JoshTrav
12-13-2007, 06:09 PM
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.

Apostropartheid
12-13-2007, 06:43 PM
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.

effpeetee
12-13-2007, 06:51 PM
I get scrollbars on my PC. 1024x768

Frank

Excavator
12-13-2007, 07:05 PM
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:

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

JoshTrav
12-14-2007, 05:45 AM
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.

Excavator
12-14-2007, 07:02 AM
Remove the lines in red:

div#container
{
width: 1075px;
background: #000000 url(images/content/container-sides2.jpg) repeat-y;
margin: 0 auto;
height: 100%;
min-height:100%;
}

JoshTrav
12-14-2007, 06:41 PM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum