PDA

View Full Version : Repeating vertical Background in unique setting



Editor321
Apr 6th, 2010, 10:24 PM
Hey all,

First time poster and I am tearing my hair out over this website I am trying to build.

http://rogers.half-lifecreations.com/lol2/

You can see that there is an image map with a div tag overlapping that displays the content. I want the image at the bottom to tile vertically with the size of the content div tag and I have no idea how to do it. Currently it is setup as a static image for demonstration purposes of what I'd like it to look like. I'm self taught in terms of programming and I am unsure how to continue or tackle the program.

Any thoughts would be much appreciated!

Cheers,

Tom

Excavator
Apr 7th, 2010, 12:54 AM
Hello Editor321,
Instead of presenting your image in the markup, make it the background of a containing div and the text will naturally go on top of it.
Have a look at the CSS Background property (http://www.w3schools.com/css/css_background.asp).

Editor321
Apr 7th, 2010, 01:03 AM
Hey Excavator,

I am somewhat familiar with using css backgrounds, but I am unsure which div tag I should be adding this background code to achieve the proper effect. If I add it to the one with the content(text) then it overlaps the image map and causes problems there. I have tried to add it to other div tags but nothing seems to change.

I uploaded a new index at the same link with this background code in this div tag hoping it would work:

<div style="position:relative; background:url(bbr_tile.jpg); background-repeat:repeat-y;" >

<div align="left" class="style4" id="content" style="float:none; position:absolute; width:680px; max-width:680px; left:170px; top:-540px;">

So to clarify, what div tag should I add this to or where should I create a new one? Thanks for all the help so far.

Excavator
Apr 7th, 2010, 05:12 AM
This is just a very basic example. Different images might help - some photoshop work to create a background seperate from the repeated image.

Have a look -
<!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 {
font: 100% "Comic Sans MS";
background: #003300;
}
* {
margin: 0;
padding: 0;
}
#container {
height: 768px;
width: 1024px;
margin: 0 auto;
background: url(http://rogers.half-lifecreations.com/lol2/bg_bbr_main.jpg);
}
#bottom_container {
width: 1024px;
width: 624px;
margin: 0 auto;
padding: 0 200px;
background: url(http://rogers.half-lifecreations.com/lol2/bbr_tile.jpg) repeat-y;
}
p {width: 200px;}
</style>
</head>
<body>
<div id="container">
<!--end container--></div>
<div id="bottom_container">
<p>
one ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>
two ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>
three ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end bottom_container--></div>
</body>
</html>

Editor321
Apr 7th, 2010, 05:54 AM
Now is there a way to keep my image map with the hotspots or am I going to have to find another way of doing it if I want the website to work the way I currently have it laid out?

Excavator
Apr 7th, 2010, 06:13 AM
Now is there a way to keep my image map with the hotspots or am I going to have to find another way of doing it if I want the website to work the way I currently have it laid out?

I've never liked image maps. I would just position an anchor right over the background image instead.
You can see in this example I've put links over the About Us and Staff polaroids. Lots less code and confusion than using image mapping.
<!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 {
font: 100% "Comic Sans MS";
background: #003300;
}
* {
margin: 0;
padding: 0;
}
#container {
height: 768px;
width: 1024px;
margin: 0 auto;
background: url(http://rogers.half-lifecreations.com/lol2/bg_bbr_main.jpg);
position: relative; /*this is critical*/
}
#about {
height: 40px;
width: 160px;
position: absolute;
top: 85px;
left: 310px;
border: 1px solid #f00;
}
#staff {
height: 40px;
width: 160px;
position: absolute;
top: 160px;
left: 295px;
border: 1px solid #00f;
}
#bottom_container {
width: 1024px;
width: 624px;
margin: 0 auto;
padding: 0 200px;
background: url(http://rogers.half-lifecreations.com/lol2/bbr_tile.jpg) repeat-y;
}
p {width: 200px;}
</style>
</head>
<body>
<div id="container">
<a href="#" id="about"></a>
<a href="#" id="staff"></a>
<!--end container--></div>
<div id="bottom_container">
<p>
one ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>
two ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>
three ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end bottom_container--></div>
</body>
</html>

Editor321
Apr 7th, 2010, 06:16 AM
Cheers, I will give this a go tomorrow and post my results, I think I am finally on the right track now thanks to you!

Excavator
Apr 7th, 2010, 06:58 AM
Some quick photoshop ideas for your images and how to lay them out. I zipped them up at http://nopeople.com/webfiles/Editor321.zip

Editor321
Apr 8th, 2010, 05:30 AM
Cheers for all the help, I have been able to complete this project because of your assistance!

I will do my best to give back to the community here, you lot are very welcoming and helpful unlike some other places I've tried.

Excavator
Apr 8th, 2010, 05:46 AM
Wow, it looks great now. Huge improvement!! Glad you got it working :thumbsup:

A few simple things yet to fix - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Frogers.half-lifecreations.com%2Flol2%2F
and
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Frogers.half-lifecreations.com%2Flol2%2F


welcoming and helpful unlike some other places I've tried.

I know what you mean and I completely agree!

Editor321
Apr 8th, 2010, 06:01 AM
Got all the errors fixed except for a few that I caused myself to disable some PHP from crashing the page load and this one:


Line 133, Column 18: there is no attribute "language"
<script language="javascript" type="text/javascript">

Not 100% sure on how to address this one.

Excavator
Apr 8th, 2010, 06:08 AM
Try this bit highlighted in red -
.style6 {font-family: "Trebuchet MS"; font-size: 1.4em; }
</style>
<script type="text/javascript">
<!-- Idea by: Nic Wolfe -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript

Excavator
Apr 8th, 2010, 06:10 AM
I just noticed you have attached CSS on every page. If you make a single .css file, you can link to that from the head of each document. That makes edits to the one CSS file reflect on all your pages.
Have a look at this site explaining how to do that - http://www.w3schools.com/CSS/css_howto.asp

Editor321
Apr 8th, 2010, 06:13 AM
No surprise, that fixed the issue. I guess that the form of JavaScript provided is either no longer accepted or is not up to snuff to the strict standards. Either way that takes care of all the errors I didn't purposefully cause.

Truly, I thank you again for your assistance. I will have to make an effort to give back here some way not to be a freeloader. :p