BlogHarbor Home Page
FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  UsergroupsRSS   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Adding repeat image
 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Beginner's Lounge
View previous topic :: View next topic  
Author Message
Donna66



Joined: 11 Mar 2005
Posts: 11
Location: USA

PostPosted: Sun Mar 13, 2005 10:12 pm    Post subject: Adding repeat image Reply with quote

I would like to add a repeating image to the text area of my blog (not the margin). After four hours reading books, how-to css sites, and these forums, I havn't been successful. ( I came close once!)

The URL for my image is: ('http://img.villagephotos.com/p/2003-12/540500/back20a.jpg') which I entered as

body { background-image: url('http://img.villagephotos.com/p/2003-12/540500/back20a.jpg');
color: #FFf; background-color: #000000;
background-repeat: repeat; }

I deleted the original code because nothing would happen if I left it in, but when I took the original code out the template and replaced it with the code above, the page defaulted back to the old header colors (but my repeating image looked great.)

I started over and switched to a new template and got the color scheme how I want it, now all I have to do is add the repeat image to the text area. Please advise!

Also, how can I get the text to scroll and the image to remain stationary?

I appreciate your help so much!
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Mon Mar 14, 2005 12:04 am    Post subject: Re: Adding repeat image Reply with quote

Here's a tip for customizing your CSS styles: The top area of the Edit CSS page for modifying your style template is a box labeled Current CSS. That box contains the standard styles for the template you have chosen. So if you are using the "Open Blue" theme, the top area is what makes the Open Blue theme the Open Blue theme.

The bottom area is labeled Custom CSS and is where you enter your custom styles and modifications to existing classes. There is no need to copy the entire top box and pasted it into the bottom box.

In fact, it's not a good idea, as I am sure you found out, because if you try to change the theme to one of our other preconfigured styles, you notice that the blog still takes on the appearance of the previous theme since your customizations override all of the standard styles.

If you want to make a change to the BODY class, just enter your change to the bottom area, entering only the item you want to modify. That way, you can change themes and bring your modifications with you across themes... You just need to enter the attribute that you want to modify.

For example, the Open Blue has a BODY class that looks like this:

Code:
body {
    margin: 0;
    color: #484848;
    background-color: #D8D8D8;
    font: normal 11px Verdana,Helvetica,Arial,sans-serif;
}


If you want to change the default font to be 12 px Trebuchet MS, just add this to your custom CSS area:

Code:
body {
    font: normal 12px 'Trebuchet MS',Verdana,Helvetica,Arial,sans-serif;
}


Now you can be sure that if you want to change to another Theme at some point down the road, the color and background of the body of that Theme will not be overridden by your modifications, only the font will be changed...

Does that make sense? If not, let me know and I will try to clarify, since it is an important point and will be very useful as you make changes to your blog.

I would like to add a repeating image to the text area of my blog (not the margin). After four hours reading books, how-to css sites, and these forums, I havn't been successful. ( I came close once!)

You're pretty close, and I bet you learned a lot about CSS. Wink

Remove your changes to the BODY class, since that will affect the whole page and not just the area of the the page you are looking to modify. (Which as far as I can understand is the main column where your articles are displayed.) Try adding this CSS code to your Custom CSS area:

Code:
table.columns td.center {
    background-image: url('http://img.villagephotos.com/p/2003-12/540500/back20a.jpg');
    background-color: transparent;
    background-repeat: repeat;
}

.dayArticles {
    background-color: transparent;
}


This will let the image appear on the background of the main column, and show through the articles. Give it a try and let us know how it comes out, and we can help you tweak it as necessary.

Also, how can I get the text to scroll and the image to remain stationary?

That one, you got me on. I don't know how to do that.


Last edited by john on Mon Mar 14, 2005 12:10 am; edited 1 time in total
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Donna66



Joined: 11 Mar 2005
Posts: 11
Location: USA

PostPosted: Mon Mar 14, 2005 12:04 am    Post subject: Cancel the 911 Reply with quote

I did manage to work out the repeat image deal, now I'm on to the next....
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Donna66



Joined: 11 Mar 2005
Posts: 11
Location: USA

PostPosted: Mon Mar 14, 2005 12:08 am    Post subject: Reply with quote

John, we posted at the same time. Yes, I did discover that copy/pasting the whole style sheet is not a good idea, but I didn't know why - and did it again! Now let's see if I can go back and just leave in what I changed. I copied the code you gave me to store for future use, as I have done so much messing about today that I'll probably forget exactly all I did.

You're right - I did learn a lot. It pays in knowledge to try to work these things out for oneself, doesn't it?
Thanks for the guidance.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
abacquer



Joined: 22 Mar 2004
Posts: 193

PostPosted: Mon Mar 14, 2005 1:56 am    Post subject: Re: Adding repeat image Reply with quote

john wrote:
Also, how can I get the text to scroll and the image to remain stationary?

That one, you got me on. I don't know how to do that.


Try this style attribute:

Code:
background-attachment: fixed;


According to O'Reilly's "Dynamic HTML The Definitive Reference" that will do what you are looking for. I haven't tested it myself.
_________________
-- Abacquer, A.K.A. Chuck Seggelin
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Donna66



Joined: 11 Mar 2005
Posts: 11
Location: USA

PostPosted: Mon Mar 14, 2005 9:48 am    Post subject: Reply with quote

I'll give it a try, thanks, Chuck!
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Search all BlogHarbor support resources.
View previous topic :: View next topic  
Display posts from previous:   
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Beginner's Lounge All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum