CSS Tips & Tricks

A place to come and find out how to make your moblog look pretty.

Post pictures of CSS in progress and completed projects.

Send submissions to:
stylesheets@moblog.net

Search this moblog

Recent visitors

Adding background images...

(viewed 3108 times)

Ok so you've already changed your header image and chosen a back ground colour! Nice one, well done.

But you feel you'd like something extra. A background image!

below is the code you'll need to replace what you've already done! just remember to copy your URLS for your images and remember the height of your header!

body {

/* This will change text colour throughout your moblog */

color: #333;

/* change your background colour here */

background-color: #cccccc;

/* background image - replace with your own URL */

background-image: url(http://domain.com/mygraphic.jpg);
background-attachment: fixed;
background-repeat: repeat;
}

hr { color: #000000;}
h1 { color: #000000;}
h2 { color: #000000;}
h3 { color: #000000;}

/* header image and height */

#masthead {
height: 165px;
background: transparent url(http://domain.com/mygraphic.jpg);
}

/* this will change the colour of your content boxes on the right */

.contentbox {
background-color: #ffffff;
}

/* this will change the colour of your content box on the left */

.leftbox {
background-color: #ffffff;
}

.leftbox h2 { color: #000000;}
.leftbox h3{ color: #000000;}

Posted by goode

24th Jul 2008, 09:56 | tags:#design

,#css

,#style

,#moblog

Advert

goode says:

i find opening up notepad and editing the code in there helps as the little box in the profile section can be hard to keep track of!

just copy and paste it into the CSS box on the "my moblog" tab of your profile editor once you've got it right...

24th Jul 2008, 10:15

FilbertFox says:

right. I need a rainy weekend and i will have a play. So far it all seems too much for my little head.

24th Jul 2008, 10:26

goode says:

yeah best to have a clear head!

24th Jul 2008, 11:07

Alfie says:

How do you tell a background image to be centred and fixed at the bottom of the screen?

24th Jul 2008, 12:02

goode says:

Enter:

background-position: center bottom;

under

background-attachment: fixed;
background-repeat: repeat;

24th Jul 2008, 13:23

nige says:

this is such a great idea for a group.

here's a question: how do the instructions you have given translate to the new blog template ie the one with the broader widths (like this one, i guess). Do any changes have to be made?

25th Jul 2008, 14:26

goode says:

yeah this template is a little more complex... i will get to that eventually... but if there is anything you need let me know!

25th Jul 2008, 19:06

nige says:

sweet. i look forward to that.

26th Jul 2008, 15:33

goode says:

i have been producing back grounds at 1700x1200 to account for people having massive screens...

but generally if you make it to your own screen resolution size that'll work.

29th Jul 2008, 09:16

540air says:

Is it possible to take a theme from here and edit it in dreamweaver without losing all teh functionality? Or is it best to just diddle with small parts of the CSS individually?

Basically, if I saved for example, this page and opened it in dreamweaver, would I be able to make changes there. I tried it a while back with no real success, but all I did was save a page then open it in there.

17th Sep 2008, 17:41

mat says:

You could do that, it might be a bit fiddly. I'd suggest installing the Firefox extension called "Web Developer", 'cos that has a "live" css edit tool.

There may be other FF plugins that are more suitable (ie just for css), but Web Developer is the one I use.

18th Sep 2008, 00:02

540air says:

Thanks mat :)

18th Sep 2008, 15:16

Add a comment

Track updates to this post with

this rss feed