...

View Full Version : Changing background



vinoman
12-17-2007, 10:36 PM
I'm working with this template here at:
http://www.spirit-medium.net
http://www.spirit-medium.net/default.css

How do I change the background? It seems to be in three pieces. What if I wanted to use a solid shade of color for the whole background?

Or adding a cloud image that stretches across the page?

Thanks

Excavator
12-17-2007, 10:45 PM
Hello vinoman,
This is your background image: http://www.spirit-medium.net/img/bg.jpg

Here is what loads it:

body {
background: #CCD8E0 url(img/bg.jpg) repeat-x left bottom;
color: #444;
font: normal 62.5% Tahoma,sans-serif;
}

For just one color, make it look like this:

body {
background: #CCD8E0;
color: #444;
font: normal 62.5% Tahoma,sans-serif;
}

To add clouds you would need to add another div to contain another background image. If you have an image in mind I could show you how to do that.

vinoman
12-18-2007, 12:09 AM
Thanks, I have a cloud image...

could this work at the top so the rays show up and then a color and rest of the background?

Excavator
12-18-2007, 01:19 AM
Looks like you got it done with a better image even. Looks great!
Now it's time to check the validator - see the links in my sig below.

vinoman
12-18-2007, 01:32 AM
Looks like you got it done with a better image even. Looks great!
Now it's time to check the validator - see the links in my sig below.

Got it done? I didn't do anything. What are you looking at? I haven't added the image yet. You were going to show me how. I tried changing the background color, but the clouds still are there. I guess I have to take that image out. But I would like to use this cloud scene for the background.

Excavator
12-18-2007, 02:54 AM
Hmm, first time I looke at your site there were no clouds at all.

To use your new image might be a little more difficult since it does not look right when you repeat it. To try solving that I made the the background color match a part of the image then set the image over to the right.
Also had to reduce heigth on .top to make the image fit... don't know what that will affect on other pages.

See how this works:

.top {
background: #607cbb url(http://www.codingforums.com/attachment.php?attachmentid=5912&d=1197932929) no-repeat right;
}

vinoman
12-18-2007, 01:52 PM
That works partially but there's a break in the image because its set to right side of header. I'll have to play around with other parts of the cloud image to get the right effect. Can I make it a larger height? I also have to get a complimentary blue shade to go with it.

What would the style be without the codingforum url in it?

effpeetee
12-18-2007, 02:35 PM
http://www.exitfegs.co.uk/clouds-header.jpg

http://www.exitfegs.co.uk/beamcloud.jpg
http://www.exitfegs.co.uk/beamclouda.jpg - Colour enhanced.

http://www.exitfegs.co.uk/beamcloud2.jpg
http://www.exitfegs.co.uk/beamcloud2a.jpg - Colour enhanced.

There's a larger version of the clouds-header and beamcloud here.

You can right click and copy it.

Any size is possible. Let me know if I can help further.

Frank

Lots more here,

http://www.cloudappreciationsociety.org/mg1/

Excavator
12-18-2007, 07:52 PM
That works partially but there's a break in the image because its set to right side of header. I'll have to play around with other parts of the cloud image to get the right effect. Can I make it a larger height? I also have to get a complimentary blue shade to go with it.

What would the style be without the codingforum url in it?

You would specify the path to your image... if it's in the same directory as your bg.jpg the it would look like this:
.top {
background: #607cbb url(img/beamcloud.jpg) no-repeat right;}

vinoman
12-19-2007, 04:31 PM
I decided to go with a solid background and my client likes it.

http://www.spirit-medium.net
http://www.spirit-medium.net/default.css

I added a bottom-margin of 30px to the container, which shows up in Firefox but not in IE. Do you know the fix to get IE6+7 to read the site properly?

.container {
background: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 0 10px 10px;
width: 780px;
margin-bottom:30px;

Thanks

effpeetee
12-19-2007, 04:48 PM
Try this,


/* standard elements */
html {min-height: 100%;}

* {
margin: 0;
padding: 0;
border:0;
}


Frank

vinoman
12-20-2007, 02:15 PM
Try this,


/* standard elements */
html {min-height: 100%;}

* {
margin: 0;
padding: 0;
border:0;
}


Frank

Thanks, but that made no difference. Could it be some other fix?

effpeetee
12-20-2007, 03:13 PM
That's weird. It worked for me.
I'll look into it again.

Frank

effpeetee
12-20-2007, 03:58 PM
I this what you want then, Perhaps I am mis-understanding you.

Frank

vinoman
12-20-2007, 05:08 PM
Look at it in Firefox for correct view. The margin-bottom: 30px; made the blue background show up at the bottom of the page.

How can I make IE7 do the same?

effpeetee
12-20-2007, 06:47 PM
Look at it in Firefox for correct view. The margin-bottom: 30px; made the blue background show up at the bottom of the page.

How can I make IE7 do the same?
I'm still trying.

Frank

Excavator
12-20-2007, 10:23 PM
Look at it in Firefox for correct view. The margin-bottom: 30px; made the blue background show up at the bottom of the page.

How can I make IE7 do the same?


body {

background: #607CBB;
color: #444;
font: normal 62.5% Tahoma,sans-serif;
padding: 0 0 30px 0;
}
.container {
background: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 0 10px 10px;
width: 780px;
}

vinoman
12-21-2007, 02:23 PM
That's what was needed. The body needed padding instead of margin bottom style in the container. How do you know which one to use in future sites?

I get confused between container and body and how they are different.

Thanks:D

effpeetee
12-21-2007, 02:26 PM
I get confused between container and body and how they are different.

Come and join the club!

Glad Excavator helped you to solve it.
Helped me too.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum