Print Page | Close Window

Adding background image to CSS

Printed From: Web Wiz Forums
Category: Web Wiz Web App Support Forums
Forum Name: Web Wiz Forums Skins
Forum Description: Skins to beable to change the look of Web Wiz Forums on your own site.
URL: https://forums.webwiz.net/forum_posts.asp?TID=25188
Printed Date: 25 February 2018 at 9:46am
Software Version: Web Wiz Forums 11.10 - http://www.webwizforums.com


Topic: Adding background image to CSS
Posted By: Warlords1973
Subject: Adding background image to CSS
Date Posted: 21 January 2008 at 1:13am
I am trying to add a background image into the CSS file for a skin but for some reason it wont take.
 
The background is in the forum_images folder
 
/* Page body */
body{
 background-color: #C000C0;
 background-image:url('../forum_images/BEARBACK.gif');
 margin-left: 0px;
 margin-top: 5px;
 margin-right: 0px;
 margin-bottom: 5px;
}
 
It will not load the image I get no errors
 
Anyone have any ideas?
Thanks



Replies:
Posted By: melodik
Date Posted: 21 January 2008 at 5:58am
My code:
 
background-image: url(../forum_images/sayfa_arka.gif);
 
 
Your code:
 
background-image:url('../forum_images/BEARBACK.gif');


Posted By: Warlords1973
Date Posted: 22 January 2008 at 5:19am

I tried

background-image:url(../forum_images/BEARBACK.gif);
 
and it still does not load the background is there something else that is needed in the body?
 
/* Page body */
body{
 background-image: url(../forum_images/bearback.gif);
 background-color: #B1D5EC;
 margin-left: 0px;
 margin-top: 5px;
 margin-right: 0px;
 margin-bottom: 5px;


Posted By: AlexKok
Date Posted: 04 February 2008 at 10:38am
Originally posted by Warlords1973 Warlords1973 wrote:

I am trying to add a background image into the CSS file for a skin but for some reason it wont take.
 
The background is in the forum_images folder
 
/* Page body */
body{
 background-color: #C000C0;
 background-image:url('../forum_images/BEARBACK.gif');
 margin-left: 0px;
 margin-top: 5px;
 margin-right: 0px;
 margin-bottom: 5px;
}
 

Hi) Check if U have image in ../forum_images. May by U have to define ../../forum_images folder?


Posted By: WebWiz-Bruce
Date Posted: 04 February 2008 at 10:46am
It does need to be:-

('../../forum_images/image_name.gif')

You may also find if you are an IE user that you need to do a hard refresh (CTRL -> F5) so that IE loads in the CSS file.


-------------
http://www.facebook.com/WebWiz" rel="nofollow - Find Web Wiz on Facebook
http://twitter.com/WebWizUK" rel="nofollow - Follow Web Wiz on Twitter


Posted By: arj1981
Date Posted: 05 December 2008 at 5:29am
Yea, how do u use that code because it's not working for me. 


Posted By: 123Simples
Date Posted: 05 December 2008 at 7:51pm
Since I'm a nice person and I don't mind helping here is a heads up



Please give generously LOL


-------------
http://www.123simples.com/" rel="nofollow - Visit 123 Simples Web Design


Posted By: mattysdad
Date Posted: 13 July 2009 at 12:24pm
Hi Guys.

I wonder if one of you learned and scholarly people could tell me how to add a background image to my forum and make the Cool Blue skin I am using ever so slightly transparent so that the image can be seen?

My foum is here www.room327.biz

and I would like to look something like my friend's site here

http://www.balearic-jobs.com/asp/mb/forums.html

Obviously, not with the skin he is using (though there is nothing wrong with it I hasten to add!!) nor the background image.

Bu I think you get my meaning?

My eternal thanks, in advance, as always!!!




Posted By: 123Simples
Date Posted: 13 July 2009 at 6:31pm
See the post above matty (above what you wrote) and it should help, but to imitate the forum you mention

/* Page body */
body{
    background-color: #FFFFFF;
    background-image: url('../../forum_images/whateveryourimageiscalled.jpg');
                opacity:0.80;
                filter:alpha(opacity=80);
    margin-left: 0px;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 5px;
}


Obviously picking an image and replacing whateveryourimageiscalled.jpg to a name of your image. Make sure the image goes in the correct folder, so in other words on your forum it would be in the forum_images folder

Hope that helps


-------------
http://www.123simples.com/" rel="nofollow - Visit 123 Simples Web Design


Posted By: 123Simples
Date Posted: 13 July 2009 at 6:33pm
The opacity figure can be adjusted if you want so have a play - at 0.80 it will give you just the right bit, but you can adjust it to 0.70, or whatever
As long as you backup the css file that you are changing, you won't go wrong


-------------
http://www.123simples.com/" rel="nofollow - Visit 123 Simples Web Design


Posted By: mattysdad
Date Posted: 13 July 2009 at 8:27pm
Aw MrTWS that was just what I was looking for!!!

THANKS!!!!Smile

Just one question....

If I wanted to insert a page wide banner saying "THE SAN MIGUEL FORUM" between Blue bar that has all the "Forum Home, member control panel, new messages etc" and the start of the General Chat forum, how would I do that?

OR infact underneath the Shoutbox?

My thanks! (again!)




Posted By: 123Simples
Date Posted: 14 July 2009 at 11:05am
At the moment I think you have used your image as you would do in the admin area by setting it as part of your header. If PM me your email address (which I might have Wacko but I can't think at the moment) I can perhaps give you a hand on this if you like. My initial thing answer though would be to create a smaller banner, then use a background repeating image to give the illusion the banner is all one image, when it is in reality not, as everyone has different screen resolutions anyway

-------------
http://www.123simples.com/" rel="nofollow - Visit 123 Simples Web Design


Posted By: vaynenick
Date Posted: 26 February 2015 at 8:01am
try this one...a detailed tutorial on CSS Background Image
 
http://www.corelangs.com/css/text/image.html
 
Vayne



Print Page | Close Window

Forum Software by Web Wiz Forums® version 11.10 - http://www.webwizforums.com
Copyright ©2001-2017 Web Wiz Ltd. - https://www.webwiz.net