Repeating background issues.

[Cyanoxide]

Hello, I recently used this forum to get some help with my css coding and although I had to wait a day or two my problem was explained to me and fixed, I am now making a new website for a social event called Stranded, the error is probably some small mistake or missing bit of coding but me and my other web coding friends can’t seem to fix it.

Let me explain the scenario to you, I have a dark background, then above that I used div classes to add objects on top of that, many of them with background images, I have one image labelled background.png which will not repeat dispite using the correct styles in my external css, which are height: 100%; and background-repeat: repeat-y; this normally works but this time it has not. I believe it is because the div objects that are on top of them are floating or something like that (at this point in writing this message I realise that It is not necessary to have the objects floating however It looks more of a mess with the floats removed so I have left them there), I would appreciate it very much if someone can explain what I have neglected so I will not make this error again.

Note: If you are thinking to yourself why would he need to do this I have two reasons, the first being that certain pages require to be different heights and I don’t want to have to make div classes for the same thing on every page, the second and more important reason is that one page in particular (the one I will enclose) will show dates for different events coming up soon, if say its is a slow month and there is only one event I wouldn’t want a large amount of space below it and if it is a busy month I would need it to add more.

One final note: Previously I was using a fixed height of 540px and the event pages are the only ones that have been effected by it so far.

Along with the message I have just written to explain my problem I have also given you a copy of both the html and css coding, I have also given you a live feed to the website in question.

Live feed http://cyanoxide.co.uk/Stranded/sengland.html

Html Coding:

Code:

Home | Events | Gallery | Comments | About | Contact | Login

? News & Updates.

This week we have…Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla iaculis quam, vel pulvinar est fermentum vel. Mauris ultricies magna ut nisi ornare id convallis mauris pulvinar. In scelerisque suscipit dolor vitae sagittis. Fusce consectetur nisi non eros dictum dictum. Proin auctor eros vitae dui feugiat tincidunt. Suspendisse potenti. Suspendisse ullamcorper hendrerit tincidunt. Quisque quis fermentum purus. Fusce convallis porttitor est. Maecenas adipiscing malesuada dui, in facilisis diam ullamcorper in. Cras mollis tincidunt lacus vitae dignissim. Pellentesque sollicitudin dictum lectus in ornare. In mollis consequat felis quis lacinia. Mauris dui nibh, ornare non hendrerit quis, elementum nec velit. Aliquam eu nisl tempus est bibendum tincidunt in a dolor. Pellentesque consectetur dignissim lectus, porttitor cursus odio mattis at. Integer tempus turpis ac mi pulvinar tempor. Ut in metus mauris, vitae congue sem. Duis ipsum ligula, blandit in ornare a, eleifend sit amet diam.

? What is Stranded?

Stranded is an event..Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla iaculis quam, vel pulvinar est fermentum vel. Mauris ultricies magna ut nisi ornare id convallis mauris pulvinar. In scelerisque suscipit dolor vitae sagittis. Fusce consectetur nisi non eros dictum dictum. Proin auctor eros vitae dui feugiat tincidunt. Suspendisse potenti. Suspendisse ullamcorper hendrerit tincidunt. Quisque quis fermentum purus. Fusce convallis porttitor est. Maecenas adipiscing malesuada dui, in facilisis diam ullamcorper in. Cras mollis tincidunt lacus vitae dignissim. Pellentesque sollicitudin dictum lectus in ornare. In mollis consequat felis quis lacinia. Mauris dui nibh, ornare non hendrerit quis.

© 2009 STRANDED UK | Designed & Developed by Cyanoxide

Jobs Stewards Stranded International

Css Coding:

Code:

@charset “utf-8″;
/* CSS Document */

#cu3er-container {
margin-top: 1px;
margin-left: 2px;
width:825px;
outline:0;
}
body{
background-color:#0a0a0a;
margin:0;
padding:0;
}
h1{
font-family:”Viner Hand ITC”;
color: #4a4a4a;
font-weight: normal;
font-size: 16px;
align: left;
padding-left: 15px;
}
a{
font-family:”tahoma”;
color: #4a4a4a;
font-weight: normal;
outline: none;
}
a:hover{
font-family:”tahoma”;
color: #2a2a2a;
font-weight: normal;
}
.updatestext{
font-family:Tahoma;
font-size: 11px;
color:#4a4a4a;
padding: 10px;
}
.infotext{
font-family:Tahoma;
font-size: 11px;
color:#4a4a4a;
padding: 10px;
}

.footerlink{
float: left;
font-family:Tahoma;
font-size: 11px;
color:#4a4a4a;
padding: 14px;
margin-left: 305px;
}
.footertext{
float: left;
font-family:Tahoma;
font-size: 11px;
color:#4a4a4a;
padding: 14px;
margin-left: 60px;

}
.banner{
width:958px;
height:151px;
margin-left:auto;
margin-right:auto;
background-image:url(images/banner.png);
}

.titlebar{
width:958px;
height:80px;
margin-left:auto;
margin-right:auto;
background-image:url(images/titlebar.png);
}
.titlecontainer{
width:958px;
height:80px;
margin-left: auto;
margin-right: auto;
align:center;

}
.titlemenu{
width: 800px;
height:49px;
font-family:Tahoma;
font-size:14px;
color:#4a4a4a;
padding-top: 30px;
margin-left: 70px;
outline:none;
text-align: right;
}

.flashbox{
margin-left: 65px;
width:829px;
height:221px;
background-image:url(images/flashbox.png);
}
.updatesbox{
float:left;
margin-top: 40px;
margin-left: 0px;
width:474px;
height:263px;
background-image:url(images/updatesbox.png);
}
.infobox{
float:left;
margin-top: 40px;
margin-left: 12px;
width:343px;
height:263px;
background-image:url(images/infobox.png);
}
.eventsbox{
float:left;
display:block;
margin-left: 65px;
margin-bottom: 50px;
width:829px;
height:326px;
background-image:url(images/eventsbox.png);
}
.eventsbox2{
float:left;
display:block;
margin-left: 0px;
margin-top: 50px;
width:829px;
height:326px;
background-image:url(images/eventsbox2.png);
}
.eventsbox3{
float:left;
display:block;
margin-left: 0px;
margin-top: 50px;
width:829px;
height:326px;
background-image:url(images/eventsbox3.png);
}
.eventimage{
background-image:url(images/eventimage.png);
float:left;
display: block;
margin-right: 15px;
width: 172px;
height: 244px;
}
.eventimage2{
background-image:url(images/eventimage2.png);
float:left;
margin-right: 15px;
width: 172px;
height: 244px;
}
.eventimage3{
background-image:url(images/eventimage3.png);
float:left;
margin-right: 15px;
width: 172px;
height: 244px;
}
.eventtext{
font-family: “tahoma”;
font-size: 11px;
padding: 15px;
margin-left:15px;
color: #4a4a4a;
}
.gallerybox{
float:left;
display: block;
margin-left: 65px;
width:829px;
height:515px;
background-image:url(images/gallerybox.png);
}
.gallery{
padding: 15px;
margin-left: 30px;
margin-top: 30px;
overflow:auto;
}
.footer{
margin-right: auto;
margin-left: auto;
width:958px;
height:55px;
background-image:url(images/footer.png);
}
.floatbox{
position: absoloute;
width: 1100px;
}
.background{
width:958px;
height: 100%;
margin-left:auto;
margin-right:auto;
background-image:url(images/background.png);
background-repeat:repeat-y;
}
.map{
margin-left:20px;
margin-top:20px;
}
object{
outline: none;
}

Thank you for taking the time to read this.

[TheDoc]

Instead of putting that background in a div like that, just apply it to the body:

body{
background:url(images/background.png) top center repeat-y #0a0a0a;
margin:0;
padding:0;
}

[Cyanoxide]

Once again you’ve saved the day for me, thank you.

[Author]

Posts