27 May 2012

Free Blogger Backgrounds and Headers

Here's a couple I named "Romantic :)  Such pretty papers!  These are free to use as long as it's your personal blog.  Instead of inserting the url into the background html template code, I've made it quite simple to use, just copy the code and place it as a blogger gadget.  It's best if you place the gadget at the very bottom of your page, as most pages load top to bottom.  Slowing down your page load time is not something I want.

 Also, If you like my designs please consider pinning it, +1, or sharing on FB..  Also I have a button at the bottom of this site {This Mom's Design}, if you choose to use a design I've made, consider placing it somewhere on your blog :)

{Click To Enlarge any photo}

Example:

View Live


Code:

<style type="text/css">body {background-image: url(
http://i1270.photobucket.com/albums/jj619/verosview/Veros%20Designs/romantic2.jpg); background-position: center; background-repeat: repeat; background-attachment: fixed; }</style>


Code:

<style type="text/css">body {background-image: url(
http://i1270.photobucket.com/albums/jj619/verosview/Veros%20Designs/blueromantic2.jpg); background-position: center; background-repeat: repeat; background-attachment: fixed; }</style>


Header:



To use these backgrounds in blogger:

1. Copy Code


2. In blogger "add gadget" in your layout mode and choose "html/javascript".

3. Paste

4. Save Arrangement and View blog.


**Be sure you have your backgrounds set to "transparent"**



The dimensions are 1600x900px.  The center is 1000px.  The header is 1000x250px .  The header is a png image which means it has no white background.  Perfect to customize.  

To use the header right click and save image.  Use any editing program you like.  I personally use paint.net, gimp, craft artist and Xara graphic designer.  All have pros and cons.  Before you spend money on fancy dancy programs check out gimp and paint.net.  They will get the job done for you most times.

When you are finished you can upload it directly to blogger using the layout section and selecting header.  Choose "instead of header and description" in placement.  If the header is  a bit wonky, you can add this peice of css in the advanced section of blogger template designer.

 .header img {margin: 0 auto;}

 Thats it!  If you have problems let me know :)

No comments:

Post a Comment

________/)______./¯”"”/’)
¯¯¯¯¯¯¯¯¯\)¯¯¯¯¯’\_„„„„\)
Thank You! ♥ ♥ ♥ ♥ ♥ ♥