The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Background help please

View previous topic View next topic Go down

In progress Background help please

Post by ExcalibursTemplar on November 12th 2011, 5:36 pm

Hi i was wondering if someone could help me im trying to do 2 things atm and i just can't figure it out. Firstly i'm trying to set my background picture but i'm having a problem as the picture keeps repeating. I just want the picture i've upload to stay in the background once full screen and then stay there when i scroll up and down.

I have tried these codes in the CSS style sheet that I found through the search feature but I don't seem to be having any luck.

Code:
body{
        background: url(http://i40.tinypic.com/14wgfwm.png) fixed;
        }

and

Code:
body{
        background-image: url(http://i40.tinypic.com/14wgfwm.png) !important;
        background-position: fixed !important;
        }

Edit: but with a url to my picture hosted on your site and imageshack but neither worked.

I'm also trying to make i think its called the body line background transparent but i dont seem to be having any luck with that either. I can change the colour but not the actual opacity.

Hmm anyway i think the site is in phpbb2 and heres a link to it incase you need to look.

http://wingkrak.forumotion.co.uk/

Any help would be much appreciated.

ExcalibursTemplar
New Member

Male Posts : 6
Reputation : 0
Language : English

http://wingkrak.forumotion.co.uk/

Back to top Go down

In progress Re: Background help please

Post by Base on November 12th 2011, 6:11 pm

Hi!

If you don't want your background image to repeat, please add this to your CSS code:

Code:
body {
    background-attachment: fixed;
    background-image: url("http://i41.servimg.com/u/f41/17/01/53/21/battle11.jpg") !important;
    background-repeat: no-repeat;
}

However, because the image is smaller than the forum's background, there will be some empty space left. Smile

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

In progress Re: Background help please

Post by ExcalibursTemplar on November 12th 2011, 6:15 pm

@Base wrote:Hi!

If you don't want your background image to repeat, please add this to your CSS code:

Code:
body {
    background-attachment: fixed;
    background-image: url("http://i41.servimg.com/u/f41/17/01/53/21/battle11.jpg") !important;
    background-repeat: no-repeat;
}

However, because the image is smaller than the forum's background, there will be some empty space left. Smile

Brilliant thats working great thank you i just need a bigger picture now.

Edit: How do i find out how big the picture needs to be ?


Last edited by ExcalibursTemplar on November 12th 2011, 6:18 pm; edited 1 time in total

ExcalibursTemplar
New Member

Male Posts : 6
Reputation : 0
Language : English

http://wingkrak.forumotion.co.uk/

Back to top Go down

In progress Re: Background help please

Post by Base on November 12th 2011, 6:16 pm

You're welcome! Is this problem solved then? Very Happy

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

In progress Re: Background help please

Post by ExcalibursTemplar on November 12th 2011, 6:21 pm

@Base wrote:You're welcome! Is this problem solved then? Very Happy

Not just yet i could do with finding out how big the picture needs to be and how to make the background body line thing (its in my original post) transparent if you don't mind.

ExcalibursTemplar
New Member

Male Posts : 6
Reputation : 0
Language : English

http://wingkrak.forumotion.co.uk/

Back to top Go down

In progress Re: Background help please

Post by Base on November 12th 2011, 6:29 pm

That's going to be very difficult, because the size needed is going to change constantly as you add new things to your forum; not to mention other computers may have different screen resolutions.

You could try using this:

Code:
body {
    background-attachment: fixed;
    background-image: url("http://i41.servimg.com/u/f41/17/01/53/21/battle11.jpg") !important;
    background-repeat: no-repeat;
    background-size: cover;
}

The background image will automatically resize to cover the whole background I think. Smile

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

In progress Re: Background help please

Post by ExcalibursTemplar on November 12th 2011, 6:44 pm

@Base wrote:That's going to be very difficult, because the size needed is going to change constantly as you add new things to your forum; not to mention other computers may have different screen resolutions.

You could try using this:

Code:
body {
    background-attachment: fixed;
    background-image: url("http://i41.servimg.com/u/f41/17/01/53/21/battle11.jpg") !important;
    background-repeat: no-repeat;
    background-size: cover;
}

The background image will automatically resize to cover the whole background I think. Smile

From what i can see that works brilliantly again thank you.

Hmm there's not much going to change now except for the banner at the top which a wing mate is making in the exact same size as the one that's already there and then a couple more forum sections are going to be added and that's it well start using it properly. I just need to make that background body line thing transparent so you can see the picture underneath partially and it should look great.

ExcalibursTemplar
New Member

Male Posts : 6
Reputation : 0
Language : English

http://wingkrak.forumotion.co.uk/

Back to top Go down

In progress Re: Background help please

Post by ExcalibursTemplar on November 12th 2011, 7:04 pm

Code:
.bodyline{
    background-color: #121212;
    border: 1px #242424 solid;
   }

I'm pretty sure that's the thing i'm on about that i want to make transparent as i turned it to red before in the none CSS part of the admin panel.

EDIT: I've sort of done what i wanted to but the whole page has gone transparent instead of the bit i wanted.

EDIT2: Ok this is what ive added.
Code:

.bodyline{
    background-color: #121212;
    border: 1px #242424 solid;
   opacity:0.4;
   filter:alpha(opacity=40);
   }
.bodyline:hover{
   opacity:1.0;
   filter:alpha(opacity=100);
}

Its nearly what i want but its the entire page instead of the background. Basically before i started to mess with the CSS style sheet i went to the colours section and changed the Body line background color and it changed what i want to be transparent from black to red.

Ahh this is hard to explain hopefully you get the idea..

ExcalibursTemplar
New Member

Male Posts : 6
Reputation : 0
Language : English

http://wingkrak.forumotion.co.uk/

Back to top Go down

In progress Re: Background help please

Post by Nera. on November 12th 2011, 9:44 pm

Hi,

I don't think you can avoid it when using CSS on .bodyline though maybe I'm mistaken. You can use for that a semi transparent photo done in PS and add it as bodyline background and that will fade only the bodyline part not the whole page.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: Background help please

Post by xpurex13 on November 13th 2011, 12:57 am



Last edited by xpurex13 on November 18th 2011, 9:45 am; edited 1 time in total

xpurex13
New Member

Posts : 1
Reputation : 1
Language : english

Back to top Go down

In progress Re: Background help please

Post by ExcalibursTemplar on November 13th 2011, 10:16 pm

@Nera. wrote:Hi,

I don't think you can avoid it when using CSS on .bodyline though maybe I'm mistaken. You can use for that a semi transparent photo done in PS and add it as bodyline background and that will fade only the bodyline part not the whole page.

So if i find a suitable picutre and insert this.

background-image: url("URL to picture") ;

In here in the CSS style sheet

Code:

.bodyline{
    background-image: url("URL to picture") ;
        background-color: #121212;
    border: 1px #242424 solid;
   opacity:0.4;
   filter:alpha(opacity=40);
   }
.bodyline:hover{
   opacity:1.0;
   filter:alpha(opacity=100);
}


Would that work ?

Sorry about the long time for the reply real life has been getting in the way but your help is much appreciated, Thank you Laughing .

ExcalibursTemplar
New Member

Male Posts : 6
Reputation : 0
Language : English

http://wingkrak.forumotion.co.uk/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum