Blogger Design Help on Blog theme/template background design, please

[StarGaiz 0]

I started out just wanting to know what size to start my photoshop document for a full background image for blogs. But I eventually figured out what I really want to do, is be able to make my own header and footer design that looks illustrated on drawing paper grain, then have a small image of that same paper grain tile all of the in-between background in a way that moves (scrolls) with the blog posts all the way down.

 

In a way that's almost exactly like this beautiful blog: http://jenloveskev.com/

 

They have a canvas background that seems seamless from top to bottom. I want to do exactly that, but have my own design at the top & bottom, where their paint splotches are, and instead of canvas thread, I'd like a seamless paper texture behind it all. I'd probably be using a pre-existing simple blogger template. But want to adjust the image and typography.

 

So how does one get a portion of their background texture to seamlessly repeat all the way through, so that it will look like a solid contiguous piece of paper background?

 

I'm a graphic design student, some (small amount of) html background, am very good with Photoshop (where I intend to make all of this). And could use a little bit of Illustrator if need be. But my basic questions come down to what size to begin the images with, and how to put it all seamlessly together.

 

Thank you so much for your time & consideration in reading & helping me w/ this. I look forward to hearing back from you soon!

 

Happy Day!

StarGaiz@gmail.com

[8ennett 0]

Yours is one of a css problem, it's a simple matter of inserting your code in to either a .css file or writing in <style> tags in the head section of your html.

 

html, body {background-image: url('relative/path/to/image.jpg');background-attachment: fixed;background-position: center top;background-repeat: no-repeat;}

As for making your background image the correct size for your user, this a the scourge of the web development world as many people have many different screen resolutions so it is hard to cater for everyones needs. There are work around though.

 

1. Create the image extra big (over 2000px x 2000px) and make sure it will display properly even on a smaller resolution.

 

2. Set the page margin to 0px and create a div 100% wide and 100% high. Use css to set a background image of this div and set the width and height to 100% again. Put all your site content in the div.

 

3. Use javascript to detect the users screen resolution and load the appropriately sized background image. This would require you to create a background image for all screen resolutions.

 

Now personally I prefer to use clever tiling techniques for my background, sometimes the background will only be 2px in height and only scroll tile down etc. but from the description of what you want, option 3 is probably the best way to go.

 

Also, DO NOT DOUBLE POST. I can see you made this topic twice and that is against the forum rules. You only need to ask a question once, it won't be long before you get a reply in this forum.

[vhortex 1]

I think he wants to tile a certain part and make it look like a contiguous piece of paper, to do this the CSS will be

{background-image: url('relative/path/to/image.jpg');background-repeat:repeat-y;}

Which will tell the browser to repeat the design vertically and not horizontally.

@StarGaiz
The only thing you need to change from 8ennett's code was

background-repeat: no-repeat;

and replace it with

background-repeat:repeat-y;

In case there will be problem with the css given, you can also try to remove this line.

background-attachment: fixed;

[8ennett 0]

Sorry I completely misunderstood the desired effect.So you want a stationary background which is tiled and moves up with the page when you scroll down, however you want a header and footer which overlap the background but stay in a fixed position on the page and also don't scroll.Looking at jen loves kev, it's going to be difficult for you to recreate that style of blog without being well up on your divs and tables. Also with a problem that would require a large explanation such as yours I tend to recommend learning the basics for yourself before diving in and giving you code examples.It's nothing personal but all too often people end up wanting me to write the entire sequence of code for them without bothering to learn any of it themselves. I suggest you learn all about divs and how they can be styled and positioned, overlapped and indexed etc. then take a peek at the source code of the mentioned blog to see how they achieved it.You will see the entire site is constructed using divs and editing the style and behaviour of the divs using css classes. Also there is a little bit of jquery running in the background as well (free javascript library) but I write all my own js so not sure about what it's doing.Finally, to achieve a seamless tiling image, most popular graphics editors have a seamless tiling filter effect built in such as photoshop and paint shop pro.Hope that gets you on the right track to building your blog.

Edited September 15, 2010 by 8ennett (see edit history)

[StarGaiz 0]

Hi, thank you very much for both of your replies. I was interested in both methods, so it was good to hear some feedback either way. And I definitely don't intend to have someone do a lot of work planning my whole code for me or anything, so I respect your point to learn a little more on my own, first. I do know some basics, but I was actually trying to feel out exactly how indepth my endeavor was, didn't even know how advanced a thing I was inquiring about. So thanks, I'l look into those details a little more first.Also, I do apologize for already breaking a locul rule. I actually really want to respect and follow the rules and etiquette of the forum, but I'm new to this one and was slightly confused by the rule on double-posting, I couldn't tell if it meant only post a topic once in one place, or don't repeat your own reply in a single thread. I sent a message to one of the mods that posted a new rules change annacouncement, saying to contact them w/ questions, but I've not recieved a reply. So I thought after searching to make sure my question wasn't already addressed in other posts, and after reading the descriptions, I did post in two places that were accurately described as used to address stuff such as mine, so I put it in both places.I will go and take the other down, if that hasn't already been done. And I really appreciate your helps.Thank you & Happy Day!-Krystal

[8ennett 0]

No Problem Krystal, also the most active mod on these forums is yordan just for future reference.Also, if you want to create dynamic content for your blog (basically just fill out a form and it automatically generates the html code for each blog entry for you including dates etc) then you will need to learn a server-side language such as php. It's actually a very easy language to learn, so once you have learned all you need to concerning divs then maybe try php afterwards. The blog you linked to was written using php as well.