blogger visitor
Le Blog de Sushi: How to add a background image & change borders in blogspot

Monday, May 04, 2009

{ How to add a background image & change borders in blogspot }

Difficulty: Easy
Assumed knowledge: This tutorial assumes you know your way around your Blogspot account and how to use an image hosting service (such as Photobucket).

When making changes to your blogspot layout it is always a good idea to keep a backup of your code in Word or another text editing program. Before copying and pasting your code, make sure you tick the 'Expand Widget Templates' box.


Tutorial A: How to change image borders
Depending on what sort of images you post in your blog, you may decide to change the image border from the default to suit the look of your posts more.


On your blogspot, click on the 'Layout' tab then the sub tab 'edit HTML'
and search for: .post img

If you cannot find the code in your HTML copy and paste the following:
.post img {
border:1px solid #000000;
}



'1px' defines the thickness of the border
'solid' defines the style of the border
'#000000' defines the colour of the border



To delete the border completely, change '1px' to '0px'. You may also want to use a different border style such as 'dotted' or 'dashed' in place of 'solid'.





Tutorial B: How to tile a background image


Start by searching for the following code: body {

Depending on which layout your blog is using, the code may vary slightly.
Mine looks like this:
body {
background:#fffff;
margin:0;
font:x-small Georgia Serif;
text-align: center;
}



Change the 'background' code to the following:
background-image: url(http://www.yourimagelink.jpg);



Save your HTML and refresh your blog. Your background should now be covered by the tiled image you picked.




I hope you'll find this useful and please leave me a comment if you have any geeky DIY's you's like to see done.

16 comments | How to add a background image & change borders in blogspot

Adela said...
on

thanks for the tips! =D

http://pinkchampagnefashion.blogspot.com/

Reply
ADICTA A LAS COMPRAS said...
on

no la verdad soy pesima no he cambiado nio el diseƱo de mi blog por queno se hacerlo muy bien

Reply
Parapluie said...
on

This was very useful, thanks!

Reply
Icy said...
on

How did you get the background to show between the two columns? And great post!

Reply
Ashita said...
on

Thanks for your help i will definitely use this soon. :)

Reply
E said...
on

Wow, I'm kind of impressed/excited to see a more technical post in the fashion sector of blogging. This is definitely helpful to a lot of us!

Reply
whensdinner said...
on

nice tutorial, thanks :)

Reply
cocorosa said...
on

Jayyyyyyy :) :) :) :) oh to do the label cloud took me the whole day, really the whole day! and I need to go back into the code to make it smaller... eeeeek.... this is so much fun though :) I cant wait to start changing my borders!

Sushi these posts are sooooooo important! I was thinking about doing posts about photoshop and color correction (levels) but then again im a graphic designer from hell haha :) but it might still help some girls out I hope:)

Reply
muchlove said...
on

oooh, thanks for the useful tip! I'm definitely going to try it out - once I find a good background image :)

Reply
Eeli said...
on

Suchi I am in blogger love with you right now haha. Seriously I've wanted to edit some of my layout for so so long and I actually attempt it but NOTHING goes the way I envisage it in my head lol. When I get some sleep (it is currently 6:30am here in NZ and yes I HAVN'T slept yet) THEN I will tackle it with your instructions!

Have a fantab day hun!

xx

Reply
Hanako66 said...
on

this is such a great post...thank you!

Reply
Sushi said...
on

Icy - the background automatically shows through because there is a space between the two columns x

cocorosa - Ahh that label cloud was a pain for me too. You really should do a tute on photoshop levels - would be really interesting to read and definately helpful to a lot of people! xo Sushi

Eeli - Haha thanks! Good luck with it and let me know if there's another particular geeky tutorial you want to see do ;)

Reply
Francie. said...
on

Yo. Just a quick question.. was your tile pattern grey or did it do that only bc your background colour was grey to starrtt with?

Francie. x

ps. You do design major too? That's exciting,. although i'm still n00b in my 3rd year. NSW though. You could be somewhere else in AU. ><"

Reply
Sushi said...
on

Francie - The tile pattern was already that colour and the background colour doesn't effect it. The tiled image covers the background, which is there as a backup in case the image doesn't load.

Yep I am and I'm in SA. Is this your last year too? What are you majoring in? x Sushi

Reply
Anonymous said...
on

Thank you so much for this post i kept looking for a new blog templates and who knew that putting zeros in couple of places could get me the layout that i wanted. This was really helpful

Reply
fickle red riding hood said...
on

your tutorials are so useful!!! thanks so much. I wanted to know how I can box everything up the way you have. as in having two different columns for posts and then pictures, info and all that. have you already done it? I can't seem to find it.

Reply

Post a Comment