Thursday, August 4, 2011

How to Make a Full-Screen Blog Header

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:


See those two lines the arrow is pointing to? Those lines of code are what set the placement of your picture. The first line (background-position: top left;) is saying "Put the picture in the top left corner of the screen. The second line (background-repeat: repeat-x;) is saying "Repeat this picture along the x-axis" (the x-axis runs from left to right). Basically, what this does is it makes it so your picture starts in the top left corner and repeats in one line until it hits the other end of the screen.


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):

Notice how in my original picture the bottom sort of fades out into a lighter and lighter pink? The last section of that picture is the same color I've used to set my background, so the picture and the background blend together.

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 

24 comments:

  1. 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.

    I'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!

    ReplyDelete
  2. You are too clever Small! You make something complicated easy to follow. Thanks :)

    ReplyDelete
  3. I 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!

    ReplyDelete
  4. Oh, 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

    Though 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.

    ReplyDelete
  5. 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 :)

    ReplyDelete
  6. This 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. :)

    ReplyDelete
  7. Aylee, 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.

    Nic, 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?

    ReplyDelete
  8. Oh, 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.

    ReplyDelete
  9. I can't seem to find where Design>Edit HTML is in the dashboard?? The rest makes sense, thanks!

    ReplyDelete
    Replies
    1. Oh! 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! :)

      Delete
    2. Thank 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

      Delete
  10. I cant find in the html where to put the image,,, and how did you get the image transparent around the edges

    ReplyDelete
    Replies
    1. The image transparency was something done in photoshop.

      Delete
  11. I 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??!!

    ReplyDelete
    Replies
    1. I made it myself. Some templates come with a picture "background" but my header I specifically made as a header.

      Delete
  12. Thanks! 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!

    ReplyDelete
    Replies
    1. Thank 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 :)

      Delete
  13. Thanks 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! :)

    ReplyDelete
    Replies
    1. Thank you, and you're welcome! :)

      hm, 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).

      Delete
  14. 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?

    ReplyDelete
  15. What if I don't want a background image???

    ReplyDelete

It's all about friendly conversation here at Small Review :) I'd love to hear your thoughts!

Be sure to check back again because I do make every effort to reply to your comments here.

Because I am absolutely terrible about following through with blog awards, I can't in good conscience accept any more. Thank you very much for thinking of me though!

Spam WILL be deleted. Attacks on myself or other comments WILL be deleted.

Related Posts Plugin for WordPress, Blogger...