Transparent Background for Blogs. ~ The Blog Doctor.
Loading...

Transparent Background for Blogs.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

You can put a picture as a background for your blog. After doing that you can make your blog transparent so that the picture shows through it.........


PICTURE BACKGROUND FOR BLOGS


The first step is to find or create the picture you wish to put up as the background. You can create a small picture in any graphics program. It should be small ( around 96x96 pixels would do) and 'tileable'. This means that it should repeat itself without any borders across your web page. To source such graphics from the Internet just do a Google search for 'graphic backgrounds'.



After finding the picture save it to your hard disk (make sure of any copyright conditions). Then upload the picture to Photobucket or Googlepages and copy down he link of the picture.



To put it as the background in your blog login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. The picture has to cover the whole body of the blog so scroll down to this code in the CSS part of the template :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

The CSS part of the template is the code which lies between <b:skin><![CDATA[ and ]]></b:skin> tags.



To the above code add these lines :

background-repeat: repeat;
background-image: url(LINK OF PICTURE);
background-attachment:fixed;

so it looks like this :

body {
background:$bgcolor;
background-image: url(LINK OF PICTURE);
background-attachment:fixed;
background-repeat: repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Replace 'URL OF PICTURE' with the link to your picture. The background-image line shows the location of the picture where you have uploaded it at Photobucket or Googlepages. The background-attachment line fixes the picture so that it does not scroll with the page. The background-repeat line tiles the picture vertically and horizontally if you give it a repeat parameter.


Click Preview and then Save Template. Clear cache and view Blog. Now that your background is ready it is time to make your blog transparent.






TRANSPARENT BACKGROUND FOR BLOGS


To create the transparent background I have used code from Mandarin Designs. To add this code login at Blogger.com and click on Layout link on Dashboard. Then click n Edit Html subtab of Template tab and scroll down to the part of the blog code which you wish to make transparent. To make the followng background transparent :




apply the code change to :

outer-wrapper

code. To apply it to the blog posts only, change the :

main-wrapper

code. This is what it looks like after applying it to posts section :



To apply it to the sidebar change the code in the :

sidebar-wrapper

section in the CSS part of the template. Similarly to apply it to the header or footer change the code in the :

header-wrapper

footer-wrapper

sections.
NOTE : The sections in your blog may have different names depending on the template. Add the code to a section and click on Preview button to see what parts of the blog become transparent.



This is the code to apply :

background-color: silver;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;

After applying it to the outer-wrapper it will look like this :

#outer-wrapper {
background-color: silver;
opacity:.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;

width: 1024px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

You can change 'silver' to any other colour like 'blue', 'red' to see the effect with that color. This what it looks like with a red filter applied to the outer-wrapper :




Also experiment by changing '0.85' (opacity and moz-opacity) and '85' in filter: alpha(opacity=85) to any number between 0 to 1 in the first and 1 to 100 in the second to vary the transparency or opacity.


This is what it looks like in the demo blog outer-wrapper :



You can see the above code effect in this demo blog. I have given a white color to the various sections and the rest of the blog looks like a transparent skin sliding over a fixed wall (background).


Have Fun!

55 comments:

Patrick Mackin said...

Although I am reasonably able to use the internet, I am an absolute dummy, novice, greenhorn, and neophyte about anything having to do with blogs. I have been at it for about a week trying to set up a Google blog with AdSense, but keeping running into brick walls, most likely due to my dummy status. Here are some questions which I have now:
1. Although I THINK I have a bog + AdSense set up in Google, I have great difficulty getting back to my blog to add more material. How do I do that?

2. Where and how do people get to my blog to read it?

3. The topic is: GENEALOGY

4. I’m trying to add an internet clipart to my blog but also can’t get that done.

I would greatly appreciate SPECIFIC WRITTEN instruction about how I need to proceed.

Patrick Mackin
Google BLOG ID: http://patmacksite.blogspot.com
patmack27@comcast.net
FAX: 352-259-2534
PHONE: 352-259-2409

Diana said...

First of all let me tell you that your blog is very helpful. I found you via the Help Center, where "panther2" mentioned this site in his answer.

(http://groups.google.com/group/blogger-help-howdoi/browse_thread/thread/ae9922463b92add1/dd60f7a6999bcba7?hl=en&lnk=gst&q=change+background+color+#dd60f7a6999bcba7)

I did exactly what panther2 suggested, but only about two-thirds of my background sidebar colors changed! Is this some kind of an error or am I doing something wrong? Please help!

Many thanks
Diana

Vin said...

Diana,

What is your blog address?

Diana said...

http://artemis84.blogspot.com

I reverted to the original color now. If you send me your email address, I could invite you because it's private.

Zat said...

Hi Vin,

I followed exactly what was mentioned. However I realize a little problem. If the method was used, all picture or images that are posted on my blog are also translucent.

Do you know of any methods or ways that I can make the photos opaque?

Many thanks for your help,
Dylan

Carol said...

I have the same question that zat.
I want to make my background transparent, without affecting letters and pictures.
Someone told me that it could only be possible if I created another "div" section, and use one for the background and another for the letters.
I'd be grateful if you could explain how to do that!
Thank you,
Carol

Vin said...

Carol,

That will not work since the other "div" will be located inside the outer wrapper and will inherit the same properties.

jiGoku_sHoujO said...

Dear Vin,
I followed exactly what was mentioned. However I realize a little problem..I tried to change my background ( use my pic ) but cannot work. Please help me..
this is my blog
http://lackofattentiondisorder.blogspot.com

Vin said...

jiGoku_sHoujO,

Your code is wrong :

body {
background:#000000;
background-image:http://jigokus.googlepages.com/27012008405.jpg
...
}

Go through above post again and correct the code.

The Best of Internet said...

hi all & thanx for this great code.
i just wanted to ask you if this is a cross browser script because i'm having problems with IE...
(it works like a charm in firefox!)

Vin said...

The Best of Internet,

What version of IE are you using - 5.5, 6, 7 or 8?

The Best of Internet said...

Vin thank you for your fast reply!
i'm using IE7 and as you can see my header & my footer refuses to cooperate with that script.
i do not want to place that script at the outer-wrapper (which is working fine on all page) because i want different transparencies in each segment of the page.

Vin said...

The best of Internet,

Cross browser Compatibility is always an issue. I see which browser is being used by majority of my users and try to use the hacks for that browser only.

jakenoo said...

Hi Vin, after following your instructions above, i realise that i also experienced the same problem that other bloggers face that is my words also changes with the background, is there anyway to make to words to be very clear and yet having a transparent background at the same time. Hope that you can help me please. Thanks very much. my blog address is
http://jakenoo.blogspot.com/

Vin said...

Jakenoo,

Try making the letters bold. It is difficult to have the cake and eat it too! :-)

Amy Lou Harold said...

Vin!!!! Thank you, thank you! You walked me through my first html trick. It only took me about 6 hours of fiddling, but it REALLY WORKS and I am so psyched. What a nice world this is, where people help each other, just for the sake of it. Gratefully yours, Amy

Annoyed1332 said...

Hey. I am a dummy, I went with the code you put in for the background image, problem is, even though the image is legal, I cannot view the image on preview.

It is as if nothing happened with the code, I did it exactly the way it says.

I use a minima template, what should I do? This is seriously frustrating.

Vin said...

Annoyed1332,

What is your blog address?

Annoyed1332 said...

evangelisttest.blogspot.com

I only started it, can you please email me, or respond quickly? This issue is frustrating..

Annoyed1332 said...

evangelisttest.blogspot.com

Vin said...

Annoyed1332,

I don't see it in your template code! Which code did you modify?

I can't help if you respond after 4 days! Also you have not told me your email address!

the Anonymous said...

Dear Vin,

Thank you so much for the help, I appreciate it a lot. But how can I make the pictures not transparent? So sorry, I am technologically retarded when it comes to these things. Hope you can help. :).

Nadirah.

Vin said...

Nadirah,

Use the code in the first part of this post above the sub-heading : TRANSPARENT BACKGROUND FOR BLOGS.

Deborah Katy said...

I really don´t know what I am doing wrong but my blogspot background doesn´t get fixed :-S take a look and tell me what´s wrong: http://deborahkaty.blogspot.com

Vin said...

Deborah Katy,

I see your background picture as fixed. Try clearing the cache.

Use Firefox browser.

Anonymous said...

Thank you so much for your article. I have a lot of fun playing around, using your technique. Works like charm in Firefox! but not in EI. I worked around it this way: instead of using the transparency code, I covered the background picture by drawing one layer of gradient shade on top of it to give it a look of transparency (using MicroSoft Picture It! 7 program)then upload it to the web.

Thanks again Vin for giving me an idea for my blog, you are great!

Thirty-Fiver said...

Could you tell me how I stack multiple pictures vertically? When I try to repeat your steps for the second picture it gets rid of the first picture. Help!!!

Thank you in advance :)

Vin said...

Thirty-Fiver,

You can only put one image up using this method.

Create that image in an image editor program on PC by stacking your other images into it vertically like a collage.

Then use that single image for background.

Abbie said...

I want to put a transparent layout on my blog...I am following the directions and I cant figure it out. Do I delete the other code between the css skins? And put what you have on how to appy the transparent one? Please help. My blog is farleyandme.blogspot.com

Vin said...

Abbie ,

Apply the changes as per the instructions in the above post. Then clear cache before viewing blog.

Then let me know if transparency does not appear so that the code changes can be checked out.

Nadine said...

hey, thanks i loved the article,,

check out my background thanks to your tips

at

http://fashionobia.blospot.com

and tell me wat u thought!

Vin said...

Nadine,

Cool! BTW it is 'blogspot' and not 'blospot'

Amanda said...

I followed the instructions for the first part of the blog but when It got to the part where it says to go to mandarin designs, I don't know which code to garb to make the outer wrapper transparent. help.

Vin said...

Amanda,

Scroll further down and look under :

"This is the code to apply :"

Amanda said...

thanks. but what i was really trying to do was have one picture for the background of my blog and one picture for the blog posts. How would i go about doing that??

Vin said...

Amanda,

Have a look at : Different backgrounds in each post.

Rickard said...

I have the same problem as another one had. You see I only want my outer wrapper to be transparent but when I apply this code the content wrapper and all the photos also become transparent. Is there any way to work this out?

Thank you very much for an answer and thanks for this article!

//Rickard

http://therickardnilsson.blogspot.com

coeda said...

thanks vin! i have more nice simple blog now.
see my blog at :
http://poemofpathofwisdom.blogspot.com/
or
http://thespiritualjourneyofmylife.blogspot.com/
GBU.
coeda

nh92 said...

I've followed your instructions for making a background image for my blog and it still didn't work...Any suggestions?

Vin said...

nh92,

What is the blog address?

nh92 said...

my blog's address is http://www.92blue.blogspot.com.

Vin said...

nh92,

Delete the following lines :

background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;

nh92 said...

OK, I deleted that code but I still don't have a background image....

Missy said...

I'd really like to know if there is a way to fix the images being transparent, if not that's cool, but I'd just like to know if there is.

Vin said...

nh92,

Change this :

body {
background-image:http://i566.photobucket.com/albums/ss102/number1ditz/blue20.jpg;
.....
}

TO THIS :

body {
background-image:url(http://i566.photobucket.com/albums/ss102/number1ditz/blue20.jpg);

Vin said...

Missy,

It is not clear what you mean by 'fix the images'. Please explain in detail with example links if possible.

nh92 said...

Thank you so much!!! Now my blog finally has a background that I actually like!!

salzten said...

Vin, thanks for the info...great site!

but there's a problem (and I'm beginner..)

when I change the code from this:

/** BEGIN wrapper **/
#wrapper {
width: 1150px;
margin: auto auto;
text-align: left;

}
/** END wrapper **/

to this:

/** BEGIN wrapper **/
#wrapper {
background-color: silver;
opacity:.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
width: 1150px;
margin: auto auto;
text-align: left;

}
/** END wrapper **/

all my post, my sidebar and everything became gone...!

please help...

my e-mail: raja_goyang65@yahoo.com
my blog: beauhomme.blogspot.com

Vin said...

salzten,

First create a test blog.
Publish one or two dummy posts.
Then load same template as your Main Blog.
Thirdly give temporary border to your 'wrapper' div so you can see what area it covers.
Then apply transparency hack code as shown in above post.
Once you are satisfied with the result you can use same code in Main Blog.

vibi said...

Thank you Vin for all the support you always bring me, up to now everything has always worked when when you came to my rescue! lol

Now I tried this opacity code, fiddled with it here and there but my problem stays the same.

As soon as I lower the value from 85 to 60 for example (to get more transparency and a true "vellum" effet, the transparency is not only applied on the background of my outer-wrapper but also on EVERYTHING it contains (texts, pictures, logos, icons, etc.) making the whole center wrap barely readable.

Is there a way to apply the code differently, add to it or change something else in the body of my HTML to make the transparency code work ONLY on the background of the outer-wrapper and NOT on its content???

Thanks in advance!

The Seance Room said...

Hey thanks. That was easy breasy to complete. :)

Anonymous said...

I have the same problem as Vibi. If there is a solution, I'd be very grateful to know what it is. You seem to have figured out how to make dark, black, legible text and clear photos in the post box in your demo blog, the one with the bricks.

Setsuna Mayonaka said...

Hi,

I seriously can't get the background image to show up at all by following both the instruction, then reading nh92's comment and the second process..but either way it didn't work.
my blog: http://setsuna-mayonaka.blogspot.com/

email: xsakura4ux@yahoo.com

Vin said...

Setsuna Mayonaka,

Try removing this line in the body part of the CSS :

background:#191919;

Daav said...

I just wanted to pass out a quick thanks. I had been fidgetting with code for 3 hours now to change the background of only my blog posts and that area surrounding it, but could only find how to change the entire background.
Your post put me over the top, I only had to put a color in the outer wrapper area and boom, magic!
And I even customised it with the opacity code, it looks wonderful now (not in IE, but minor setback).
http://cutouttheeyes.blogspot.com/
There it is. THANK YOU

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.