Novahq.net Forum - Repeating Image and Static BG in same doc?

Novahq.net Forum (https://novahq.net/forum/index.php)

- Web design and Programming (https://novahq.net/forum/forumdisplay.php?f=32)

- - Repeating Image and Static BG in same doc? (https://novahq.net/forum/showthread.php?t=44500)

Repeating Image and Static BG in same doc?

I'm having trouble here...

I need to repeat this image horizontally. I've done that, nothing hard to do.

http://mutiny-clan.net/forum/styles/.../bg_repeat.png

Now, at the same time I need this image to be a static bg image.

http://mutiny-clan.net/forum/styles/.../images/bg.jpg

Any solutions? I'm stuck.

HTML or CSS solutions will work. Either one. I don't really care. Thanks for any help in advance.

Your repeating background should be defined in your body css and the static bg image should be in a div. You cannot define two body background images at once.

Code:

body { 

        background:url('repeat_bg') repeat x;

        height:100px;

}



#cntr_bgimg {

        width: 100%;

        height: 100%;

        background:url('static_bg') no-repeat center center;

        margin: 0;

}

After the body tag insert:

Code:

<div id="cntr_bgimg"></div>

Change "center center" to where you want the image on your background.

ref: http://www.w3schools.com/css/css_background.asp

Thanks scott. Ok, how about two repeating images? One horizontal and one vertical. Same thing just altered attributes?

yeah, repeat:x or repeat:y

Quote:

Originally Posted by atholon (Post 358035)

yeah, repeat:x or repeat:y

LIAR!

ok, maybe I'm just dumb.

Code:

body {

        color: #536482;

        background-color: #141310;

        background-image: url("{T_THEME_PATH}/images/bg_repeat2.png");

        background-repeat:repeat-y;

        background-position: center;

}

#cntr_bgimg {

        width: 100%;

        height: 100%;

        background-image: url("{T_THEME_PATH}/images/bg_repeat_horiz.png");

        background-repeat:repeat-y;

        background-position:absolute;

        margin: 0;

}

I have bg_repeat2.png repeating correctly, but bg_repeat_horiz.png won't repeat. Maybe I'm overlooking something.

Actually Scott, if you've got some free time within the next few days could you possibly take a look at this forum coding for me?

I'm setting up a phpbb forum for my clan and trying to design a custom skin for it. Well, my coding isn't exactly working correctly.

So, if you could could I email you the information and the coding that I need looked at and possibly fixed? If not it's cool, I'll eventually figure it out haha

You can send me an email but I can't promise that I will get it to very soon. I've got finals all this week and next.

Scott you're such a slacker :D

Code:

#div1

{

background-image:url('picA.png');

background-repeat:repeat-x;

height:200px;

}

#div2

{

background-image:url('picB.png');

background-repeat:repeat-y;

height:500px;

}

http://digitalhelpfiles.com/images/repeat.png

Quote:

Originally Posted by atholon (Post 358051)

Code:

#div1

{

background-image:url('picA.png');

background-repeat:repeat-x;

height:200px;

}

#div2

{

background-image:url('picB.png');

background-repeat:repeat-y;

height:500px;

}

http://digitalhelpfiles.com/images/repeat.png

:gj:

Quote:

Originally Posted by Steve (Post 358048)

Scott you're such a slacker :D

Cant wait to be done with this school crap!!!!!!!!!

Quote:

Originally Posted by Scott (Post 358084)

Cant wait to be done with this school crap!!!!!!!!!

I hear that man. My engineering physics class is kicking my butt. Stupid professors.

Do either of you know much about phpbb skinning? The trouble I'm having is implementing this correctly into the css and the php templates.

Code:

<style type="text/css">

#div1

{

        background-image:url('images/repeat_left_right.png');

        background-repeat:repeat-x;

        height:100%;

}

#div2

{

        background-image:url('images/forum_repeat_vert.png');

        background-repeat:repeat-y;

        background-position:center;

        height:1100px;

}

#div3

{

        background-image:url('images/bg_bottom.png');

        background-repeat:no-repeat;

        background-position:bottom;

        height:100%;

}

p.sansserif {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        color: #FFFFFF;

        font-size: 75%;

        font-weight: bold

}

</style>

I know to implement each section of css, I have to edit common.css and colours.css.

and then this into the templates

Code:

<body background="images/forum_bg.png" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">



<div align="center">

<div id="div1">

<div id="div2">

<div id="div3">

<table id="Table_01" width="1060" height="205" border="0" cellpadding="0" cellspacing="0">

        <tr>

                <td rowspan="3">

                        <img src="images/head_01.png" width="42" height="205" alt=""></td>

                <td>

                        <a href="http://mutiny-clan.net/"><img border="0" src="images/head_02.png" width="975" height="117" alt=""></a></td>

                <td rowspan="3">

                        <img src="images/head_03.png" width="43" height="205" alt=""></td>

        </tr>

        <tr>

                <td background="images/head_04.png" width="975" height="50" alt="" valign="center">

        <p class="sansserif">Home | Roster | Forum | Apply | Clan Wars | Contact</p></td>

        </tr>

        <tr>

                <td>

                        <img src="images/head_05.png" width="975" height="38" alt=""></td>

        </tr>

</table>

</div>

</div>

</div>

</div>

I've been putting this code into the overall_header.php template in the admin control panel.

The coding on each is right, but for some reason implementing it into the css coding and templates through the ACP is harder than I though.

You can see an example of what it's supposed to look like if you go HERE

Anyone help from anyone would definitely be appreciated.

Sorry, I have not messed around with their themes lately. I just changed the logo and kept their default skin :(