It's a new year and I feel that it's time for a slightly new look for my site. So in visiting some of my favorites I've noticed that they have photos as background to their banner. Can anyone share how I can use my photos in the banner without destroying the text?
Thanks.
Subscribe to:
Post Comments (Atom)
6 comments:
Easy, just:
1. Make an image the size of your header. The "Minima" template style is 660 pixels wide and around 100 high. Make sure the image is big enough, otherwise it will repeat. If it's too big, it will be cropped inside the header borders.
2. Put the image somewhere on the web. Some people use Flickr. Note the URL of this image.
3. In your template, go to your header style (#header)
and add this:
background-image: url(http://theURLofYourImage.com/whateverItIs.jpg);
4. Save the template and republish. Depending on the color of your image you may want to change the text color of your #blog-title and #description. (That's another lesson.)
That's it.
Slightly more advanced stuff:
You can also add some positioning, if you can't crop your image for some reason. You can center it, so the header crops it evenly on both sides. You can also make sure it doesn't repeat if it's too small. The header style (for the Minima template) would look like this:
@media all {
#header {
width:660px;
background-image: url(http://theURLofYourImage.com/whateverItIs.jpg);
background-position: top center;
background-repeat: no-repeat;
margin:0 auto 10px;
border:1px solid #ccc;
}
}
Paul, thanks so much. I'll give it a try this weekend.
Well Paul, I tried using our MSN group photos as a URL but it doesn't end in .jpg - so that didn't work. I even tried putting the photo as an early post and tried to use my own site as URL - that didn't work either.
Does this mean I have to go to Flicker? Or is there something else you can suggest?
The: whateverItIs.jpg is just an example. Your image might end in .gif or even .png and will work but it does have to be the complete path to an image, not just a page or a site.
On your templatetester page, it works fine with the code you've inserted:
background-image: url("http://photos1.blogger.com/hello/64/5812/320/Thai%20basil%20fritatta2.jpg");
But the problem is a bit more complex with that template. The template was already using a background image to make the rounded corners. There's a complex solution to get round corners and an image, but the easiest is to create an image the size of the banner, with round corners. I realize not everyone spent 700 dollars on Photoshop and can do this, but it's easier than messing with the CSS required.
One piece of advice everyone should follow - don't use spaces in file names that will go on the web. It will not only be neater, without the %20's, but it will eliminate problems because sometimes Blogger, or even the server will convert them, and you'll wind up with a filename path that's different from the actual one.
Paul, thanks for the suggestion about not putting spaces in file names. Every time I did it, I wondered if it was ok. (BTW, I've decided you're definitely one of the "teachers" in this school while most of us are the "students". Thanks for sharing your amazing knowledge.)
Thanks Paul, Kalyn is right - you are a great teacher!!! Now if only I could be a great student.
How do I figure out what the exact size of my banner is?
Post a Comment