What You Will Learn
Some blogs have a header that spans the width of their main body, but other blogs (like Small Review) have a header that stretches across the entire screen. In this post you'll learn how to make a header that stretches across the screen.
I'm sure there are many ways to do this, but I'll be showing you how I did it. My method is a three step process.
Let's Do This!
We're going to be editing your main blog code, so you may want to save a copy of your code before we begin!
Step 1: Set you background picture
Before you do anything you'll first need to decide on a picture. This is the background picture I made for my blog:
I had to do a little math to make sure the dark maroon bar at the bottom lined up with my linkbar (which is set to have a background of that same dark maroon color). Once you have your picture, find a place to host it (TinyPic, Photobucket, etc) and save the url.
Now go to your dashboard and select: Design--> Edit HTML
Next, search for the section of code that controls the background of your blog. It might be under the heading "Global" or "Main" or something similar. Your code will look something like this:
See where the pink arrow is pointing to a URL? This is where you will paste the url you have for your background picture.
Now look at this picture:
Step 2: Set your background color
Now that you have the picture set, you still have a whole bunch of background that's empty. Go back to your code and look at the part the pink arrow is pointing to:
See where it says background: #fff7f7? That is where you set the background color. If you don't have a color set in your code, then just copy the code I have above (you can choose the background color code you want to use from this chart). This is the color I have set for Small Review (it's kind of hard to see here):
Step 3: Adding your header image
Here is the header image I use:
The background is set to transparent, so the image floats above the stripes of the background image.
I hope that's clear! If you have any questions, please feel free to ask them in the comments or email me.
The form is anonymous, so please don't feel shy at all!
I'm certainly not an expert, but I'll try my hardest to explain what I do know and research what I don't know.
Click here to read previous How To Posts
Tweet
Click here to read previous How To Posts
Oh, wow. I had no idea your header was so complex. I didn't know it was made up of two parts, the transparent image and the background; I assumed it was all one thing. Very interesting how this works.
ReplyDeleteI've been itching a bit to update and improve my blog design but haven't found the time as of yet. Perhaps over winter holidays.
I really like the look of the full-screen header so I may give this a try. Thanks for the tutorial!
You are too clever Small! You make something complicated easy to follow. Thanks :)
ReplyDeleteI would love to be good at this stuff! I've been trying to make some changes to my blog template (resizing) and it's proving impossible! I give up! lol!
ReplyDeleteOh, the headers drive me nuts. :P Mostly because by the time I settle on an image and I'm so worn out I don't want to deal with the coding :P
ReplyDeleteThough this was quite helpful, I usually spend a couple of hours poking at the code so I can get it somewhere where I want it to, but this is more straight forward :D
Thanks, as usual, I love these posts.
I just learned how to make and put a header awhile ago, but I'll bookmark this post in case I decide I want one that spans the entire screen :)
ReplyDeleteThis right here is why I'm paying someone else to design and install my header. My eyes are still crossed from reading all of that. :)
ReplyDeleteAylee, I don’t know if there’s an easier way to do it, but this way works for me :) NOOOOOO I love your blog design. Please keep your header Potter puff people :) I love your color scheme too.
ReplyDeleteNic, Aw, thank you! :)
Leanna, Mostly all of this stuff is hours of beating my head against a wall and then a light bulb moment of happiness. And then more beating my head against a wall :P
Alex, haha, yeah, half of the work is choosing the picture! I’m glad this post is helpful to you :)
A Canadian Girl, Hope it helps!
Logan, aw, I'm sorry! Can I give you an ice pack for your crossed eyes?
These are always so helpful!
ReplyDeleteOh, don't worry. I spent way too long on the Potterpuffs to just do away with them. I just hope to design it a bit more someday. If I have the time.
ReplyDeleteoh its not working..........
ReplyDeleteI'm sorry to hear that, what's happening?
DeleteI can't seem to find where Design>Edit HTML is in the dashboard?? The rest makes sense, thanks!
ReplyDeleteOh! That's because these instructions are based on the old blogger template. Instead of Design, look for something that says "Template" (it should be on the left side of your screen). Then once you've clicked on that, you should see an option for "Edit HTML" Everything else will be the same. Hope that helps! :)
DeleteThank you so much! So here's what I've been trying to figure out... on my current blog ( colleenameliaphotography.com) I want the header to be transparent to the circle pattern that is the back, so no grey. Then I want the watercolor stripe and white dots to extend all the way to the edge of the blog, past the white page that runs down the length of the blog. If that's not possible, then if ANYTHING I'd like to remove the white box that appears around the header, so that it would blend seamlessly into the background. Is any of this possible? You seem to be a web genius, thank you so much for your help! colleenameliaphotography.com
DeleteI cant find in the html where to put the image,,, and how did you get the image transparent around the edges
ReplyDeleteThe image transparency was something done in photoshop.
DeleteI know it's been awhile since you posted this, but I'm already stumped. How did you get the picture for your background? All the ones I find are two sides with a middle that is blank (for the posts). How/where do I find one that is one picture like yours? or do I have to somehow make it myself??!!
ReplyDeleteI made it myself. Some templates come with a picture "background" but my header I specifically made as a header.
DeleteThanks! I love your header! Now I've got to fiddle with my own colour settings to figure out if I can match the background to my header photo. The idea of putting arrows onto the html code is excellent: I really understood this!
ReplyDeleteThank you! In photoshop there's a tool where you can copy the color in a picture (it's the eyedropper tool, I think). If you're using a program like that, that should help with your color matching. I'm so glad you found the tutorial helpful! Thank you for the feedback :)
DeleteThanks for the great tutorial! I am running into one snag though, my background image seems to slide down along with me as I scroll down, not sure how to stop that? Any tips? It flows across the top from left to right perfectly, just wont stop at that! Thanks so much! :)
ReplyDeleteThank you, and you're welcome! :)
Deletehm, only thing I can think of is do you see where it says background-repeat: repeat-x; (the last line of the code) make sure your code does not say repeat-y anywhere. That would make the pattern repeat up and down (along the y axis), whereas you only want the patter to repeat left to right (along the x axis).
You are great at explaining things! I have been trying for two hours to do this but it is not working. My html codes are not set up like this & I wish they were! It is color coded and I think it's the new html set up? Could you tell me how to do this with the new html codes on blogger?
ReplyDeleteWhat if I don't want a background image???
ReplyDelete