Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing background

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello vinoman,
    This is your background image:

    Here is what loads it:
    Code:
    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:
    Code:
    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.
    Last edited by Excavator; 12-17-2007 at 10:47 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Attached Thumbnails Attached Thumbnails Changing background-beamcloud.jpg  

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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:
    Code:
    .top {
    	background: #607cbb url(http://www.codingforums.com/attachment.php?attachmentid=5912&d=1197932929) no-repeat right;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by vinoman; 12-18-2007 at 01:57 PM.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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/
    Last edited by effpeetee; 12-19-2007 at 11:07 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote Originally Posted by vinoman View Post
    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:
    Code:
    .top {
    	background: #607cbb url(img/beamcloud.jpg) no-repeat right;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try this,

    Code:
    /* standard elements */
    html {min-height: 100%;}
    
    * {
    	margin: 0;
    	padding: 0;
    	border:0;
    }
    Frank
    Last edited by effpeetee; 12-19-2007 at 05:16 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    Try this,

    Code:
    /* 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?

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    That's weird. It worked for me.
    I'll look into it again.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I this what you want then, Perhaps I am mis-understanding you.

    Frank
    Attached Thumbnails Attached Thumbnails Changing background-screenhunter_01-dec.-20-14.55.jpg  
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •