On my website, I'm using a background image. However, I'd also like to have a sideline that runs down the left side, on top of the background. Can this be done?Why not just put the sideline on the background and save yourself messy coding? I mean, you could add that to your background in paint even.
Or, if you're really insistant of keeping the images seperate then just make a div and in the divs style tag set the sideline as the background image. Coding for it should look something like this - just fill in the rest:
<div style="background-image: url(<!-- m --><a class="postlink" href="http://www.gamexplain.com/images-main/sideline.gif">http://www.gamexplain.com/images-main/sideline.gif</a><!-- m -->); background-repeat: repeat-x; position: absolute; left: 0px; right: 0px; ... ">Thanks, I'll try that.
The reason I want them seperate is that I'll be updating the background frequently, and I don't want to have to adjust the sideline so that it doesn't overlap incorrectly when the background loops.Why not use it as the background of the content with no repeat and indent the content the width of the image?Originally posted by Triumph
...and indent the content the width of the image?
What do you mean by that, exactly?Not entirely sure what you want, but you can use the CSS border stuff on any 1 side or any combination of the 4 sides of a box element, plus assign a background image.Originally posted by duderdude2
What do you mean by that, exactly? It's rather self-explanatory. Sorry.Originally posted by Triumph
It's rather self-explanatory. Sorry.
Sorry, but the way you phrased it was confusing. I think I understand it now.Originally posted by duderdude2
Sorry, but the way you phrased it was confusing. I think I understand it now.
Is it my accent? LOL!like this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<title>background image and sideline</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-88559-1">
<meta name="Content-Style-Type" content="text/css">
<style type="text/css">
html{
background-image: url(background-image.png);
background-repeat: repeat;
height: 100%;
width: 100%;
}
html body{
background-image: url(sideline-image.png);
background-repeat: repeat-y;
min-height: 100%;
width: inherited;
margin: 0;
}
* html body{
/* IE doesn't understand 'min-height'. */
height: 100%;
}
</style>
</head>
<body>
</body>
</html>^ That is so close to what I want. Only problem is the sideline image doesn't seem to repeat to the bottom of the page. Did I do something wrong?
Here's the page I tried it on:
<!-- m --><a class="postlink" href="http://www.gamexplain.com/test5.shtmlSorry">http://www.gamexplain.com/test5.shtmlSorry</a><!-- m -->, you didn't do anything wrong. I think the problem may be because of the absolute positioning, but i may be wrong. The body should strech so that the other elements are contained within it, but that doesn't seem to be happening.
Sorry i can't be of more help, but i don't know why this is.
Edit: i was right, it is because of the absolute positioning.
(The code below shows the image streching without absolute positioning)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<title>Game Xplain</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-88559-1">
<meta name="Content-Style-Type" content="text/css">
<style type="text/css">
html{
background-image: url(/images-main/halo2b.jpg);
background-repeat: repeat;
height: 100%;
width: 100%;
}
html body{
background-image: url(/images-main/sideline.gif);
background-repeat: repeat-y;
min-height: 100%;
width: inherited;
margin: 0;
}
html body div#cont{
height: 900px;
width: 100px;
margin: auto;
background-color: yellow;
}
</style>
</head>
<body>
<div id="cont">
</div>
</body>
</html>That doesn't seem to be working either.
Well, thanks anyway
Or, if you're really insistant of keeping the images seperate then just make a div and in the divs style tag set the sideline as the background image. Coding for it should look something like this - just fill in the rest:
<div style="background-image: url(<!-- m --><a class="postlink" href="http://www.gamexplain.com/images-main/sideline.gif">http://www.gamexplain.com/images-main/sideline.gif</a><!-- m -->); background-repeat: repeat-x; position: absolute; left: 0px; right: 0px; ... ">Thanks, I'll try that.
The reason I want them seperate is that I'll be updating the background frequently, and I don't want to have to adjust the sideline so that it doesn't overlap incorrectly when the background loops.Why not use it as the background of the content with no repeat and indent the content the width of the image?Originally posted by Triumph
...and indent the content the width of the image?
What do you mean by that, exactly?Not entirely sure what you want, but you can use the CSS border stuff on any 1 side or any combination of the 4 sides of a box element, plus assign a background image.Originally posted by duderdude2
What do you mean by that, exactly? It's rather self-explanatory. Sorry.Originally posted by Triumph
It's rather self-explanatory. Sorry.
Sorry, but the way you phrased it was confusing. I think I understand it now.Originally posted by duderdude2
Sorry, but the way you phrased it was confusing. I think I understand it now.
Is it my accent? LOL!like this?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<title>background image and sideline</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-88559-1">
<meta name="Content-Style-Type" content="text/css">
<style type="text/css">
html{
background-image: url(background-image.png);
background-repeat: repeat;
height: 100%;
width: 100%;
}
html body{
background-image: url(sideline-image.png);
background-repeat: repeat-y;
min-height: 100%;
width: inherited;
margin: 0;
}
* html body{
/* IE doesn't understand 'min-height'. */
height: 100%;
}
</style>
</head>
<body>
</body>
</html>^ That is so close to what I want. Only problem is the sideline image doesn't seem to repeat to the bottom of the page. Did I do something wrong?
Here's the page I tried it on:
<!-- m --><a class="postlink" href="http://www.gamexplain.com/test5.shtmlSorry">http://www.gamexplain.com/test5.shtmlSorry</a><!-- m -->, you didn't do anything wrong. I think the problem may be because of the absolute positioning, but i may be wrong. The body should strech so that the other elements are contained within it, but that doesn't seem to be happening.
Sorry i can't be of more help, but i don't know why this is.
Edit: i was right, it is because of the absolute positioning.
(The code below shows the image streching without absolute positioning)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<title>Game Xplain</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-88559-1">
<meta name="Content-Style-Type" content="text/css">
<style type="text/css">
html{
background-image: url(/images-main/halo2b.jpg);
background-repeat: repeat;
height: 100%;
width: 100%;
}
html body{
background-image: url(/images-main/sideline.gif);
background-repeat: repeat-y;
min-height: 100%;
width: inherited;
margin: 0;
}
html body div#cont{
height: 900px;
width: 100px;
margin: auto;
background-color: yellow;
}
</style>
</head>
<body>
<div id="cont">
</div>
</body>
</html>That doesn't seem to be working either.
Well, thanks anyway