Image Tutorial: adding background and header images in coding

[sireesanwar]

I've had a few people who needed just a little extra help with the header image and background image on their layouts so I'm going to attempt to explain how to change the coding in my layouts so you can add a header or background image yourself.


1. Pick the layout your want. I'm going to Choose #71 which is called All Hallows Eve. At this layout you will see that I supplied you with a header and a background but neither is a mandatory use. What I would suggest is to check our the layouts width at the very top of the post. You will wanted your Header image to be this width for the best view.

2. Do you have a Photobucket, Scrapbook, Image Shack or other images upload location? You'll need to save both the header and background image to your image account.




3. Once saved you should see a link below the image in Photobucket. Or in Scrapbook you will have to click into the image and I would recommend always using the Original Image link.




when you click the Original link in Scrapbook you will be shown the image. Copy the link that is in the address bar.

4. Head over to the coding you put into your Custom CSS Box.



5. Find the Body coding which should look something link this:
body{
 background-color: #000000;
 background-image: url(BACKGROUND IMAGE);
 background-repeat: repeat;
 background-attachment: fixed;
 background-position: left top;
 background-size: inherit;
 color: #888888;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 12px;
 margin: 0px 0 20px 0;
 }

Here you will highlight the words BACKGROUND IMAGE and delete them. You will be left with...
body{
 background-color: #000000;
 background-image: url();
 background-repeat: repeat;
 background-attachment: fixed;
 background-position: left top;
 background-size: inherit;
 color: #888888;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 12px;
 margin: 0px 0 20px 0;
 }

Now you should be able to copy the background image link between the parentheses (). Making your coding look something like this:
body{
 background-color: #000000;
 background-image: url(http://backgroundimage.png);
 background-repeat: repeat;
 background-attachment: fixed;
 background-position: left top;
 background-size: inherit;
 color: #888888;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 12px;
 margin: 0px 0 20px 0;
 }

But let's explain a few other editing options to the background.

background-repeat: essentially this is if you want your background to repeat. So say it is a big image that fits up the entire screen you might not want it to repeat. You'd go with no-repeat. Your only options here are repeat and no-repeat. Though there is the occasion you might want to have repeat-x or repeat-y which only means you want the repeat to go only horizontial or only vertical.

background-attachment: essentially this is for what you want the background to do. Will it scroll with the journal as you scroll down or will it stay stationary. Your options are really fixed and scroll. If you were using a really large image for the background not only would you not want it repeating but you would want it to be fixed. A fixed image would always apply if you want an image to stay in one place on your background maybe to the left or right of your layout.

background-position: this gives you many options. This really depends on your image. If you are using a small image that you'll have repeating sticking with the left top positioning is probably best. However, if you are using this large image I keep referencing you might want to go center center to make sure all the best parts of the image are being displayed. This positioning goes horizontal and then vertical in alignment. Your options will be left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom. Feel free to play with this and see how best your image looks.

background-size: remember our large image? So say you want this image to be filling the entire screen with no scrolling and no repeating but it doesn't quit fit. Change the size option to cover. This show stretch the image to fill the screen always. You might want to center this in positioning. Contain should fill the screen but part of your image might not show up which is okay for large textured images but not so great if you want a scene in the background. You can also put in lengths which is width and height such as 75px 100px or percentage 50% 100% which would be useful for a fixed image to the left or right of your journal. As you can see in the above coding we have inherit which is what you'd want to use for a small repeating pattern image.

Multiple Backgrounds?
6. Go ahead and hit the Save Changes button.

7. Then scroll all the way down to the bottom of all the coding in your Custom CSS box and find coding that looks like this (should be almost the last bit of coding):
.headerimage {
position: relative;
width: 1000px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 0px;
background-color: transparent !important;
background-image: url(HEADER IMAGE);
 background-repeat: no-repeat;
-moz-border-radius: 0 0px 20px 20px;
-webkit-border-radius: 0 0px 20px 20px;
border-radius: 0 0px 20px 20px;
-khtml-border-radius: 0 0px 20px 20px;
}

Not the width and the height. These are important things to know. If you are saving your image in photobucket you can click on the image and there will be Photo Date which will tell you the dimensions of your image.

Here we want to delete the words HEADER IMAGE:
.headerimage {
position: relative;
width: 1000px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 0px;
background-color: transparent !important;
background-image: url();
 background-repeat: no-repeat;
-moz-border-radius: 0 0px 20px 20px;
-webkit-border-radius: 0 0px 20px 20px;
border-radius: 0 0px 20px 20px;
-khtml-border-radius: 0 0px 20px 20px;
}

Now past your link between the parentheses (). Your coding should look something like this:
.headerimage {
position: relative;
width: 1000px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 0px;
background-color: transparent !important;
background-image: url(http://headerimage.png);
 background-repeat: no-repeat;
-moz-border-radius: 0 0px 20px 20px;
-webkit-border-radius: 0 0px 20px 20px;
border-radius: 0 0px 20px 20px;
-khtml-border-radius: 0 0px 20px 20px;
}

If your image is 1000px by 250px then the height of this image will have to change or you will be left with a repeating of the image or a gap below your image. If you have chosen to have an image that is smaller than the width of your layout you will need to adjust the width of your image. Your width and height should match your image dimensions unless a border surrounds the image and then you will be shaving off a few px on the width.

So if you were to see a line that said:
border: 1px solid #cccccc;

you would want to make the width 998 because there is 1px on all edges. This shouldn't effect the height.

Still having trouble? Please comment.