?

Log in

No account? Create an account
 
 
15 October 2012 @ 12:46 pm
Image Tutorial: adding background and header images in coding  





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.


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.
 
 
 
Judith Bartholomewjoyfulljunebugg on February 25th, 2013 03:56 am (UTC)
What do I do to the code so that the background image is on one side of my layout? like this http://mizugazipan.livejournal.com/ ??? I just want an image on one side of my layout and nowhere else. Thanks if you can help (* ^ ▽ ^ *)
Jill aka Jo: SPN: Boys and Bobbysireesanwar on February 25th, 2013 10:24 pm (UTC)
You need to add the line...

background-position: left top;

Also make sure that on the repeat line you change repeat to no-repeat.

Edited at 2013-02-25 10:28 pm (UTC)
(no subject) - joyfulljunebugg on February 26th, 2013 03:25 am (UTC) (Expand)
(no subject) - sireesanwar on February 27th, 2013 10:59 pm (UTC) (Expand)
(no subject) - joyfulljunebugg on February 27th, 2013 11:16 pm (UTC) (Expand)
(no subject) - sireesanwar on February 28th, 2013 12:14 am (UTC) (Expand)
Judith Bartholomewjoyfulljunebugg on June 19th, 2013 07:25 pm (UTC)
You saved my layout once again my code doesn't have any background specs I had to add this line to fix it.

background-size: cover;

Now all I need to do is fix up my image and my layout will be perfect THANK YOU!!!
Jill aka Jo: Misc: Simons Cat in boxsireesanwar on June 20th, 2013 04:42 am (UTC)
You are welcome.

Also saw your suggestion in the "Suggestion Box" post. I'm gonna think that through. I think I can accomplish it but I have to think on it.
lonelydaydreamerparkjinmi22 on October 19th, 2013 04:18 am (UTC)
i cant set the header and the background properly... Help?

the header keeps on shrinking!!
and the background wont expand!!!

Help me!!!
Please!!
thank you
Jill aka Jo: ST: Red Shirtsireesanwar on October 21st, 2013 11:34 pm (UTC)
Please tell me what journal you are having this issue on? I would like to see it in action to be able to fix it.
Her name was Nyamé & the name of her name was Nod.voicesinherbody on January 1st, 2014 12:30 am (UTC)
I am having a gapping issue with my header, but only on my friends page. For some reason I'm getting a top gap between my header image and the account banner. Help!! Oh, and the gap only appears on my friends page when I'm logged in. What the what??

Edited at 2014-01-01 12:45 am (UTC)
Jill aka Josireesanwar on January 5th, 2014 05:00 am (UTC)
I see that. Holy cow, I can't seem to find why that is happening but I'll keep looking.
(no subject) - sireesanwar on January 5th, 2014 05:21 am (UTC) (Expand)
(no subject) - voicesinherbody on January 5th, 2014 05:10 pm (UTC) (Expand)
(no subject) - sireesanwar on January 7th, 2014 01:07 am (UTC) (Expand)
faerycharmjuliefaerycharmjulie on February 26th, 2014 11:05 pm (UTC)
header image
Thank you so much for this code. I LUV the rounded edges!
Jill aka Jo: Fringe: Alta Oliviasireesanwar on February 26th, 2014 11:20 pm (UTC)
Re: header image
You are welcome.
That Lettie Grrrl: [angel] - eliza/faith - spin spin sugarfrozeneyes on August 9th, 2015 05:11 pm (UTC)
Help with my header in "Pretty In Pink"
So you'll see the displacement when you look at my journal and I'm not done tweaking it, but what am I doing wrong or overlooking to get the header to look correct and at it's full size?

.headerimage {
position: relative;
width: 769px;
height: 201px;
margin: 3px auto 0px auto;
padding: 0px;
background-color: transparent !important;
background-image: url(http://ic.pics.livejournal.com/frozeneyes/667393/613381/613381_900.png);
background-repeat: no-repeat;
background-position: top center;
border-width: 20px 20px 0px 20px;
border-style: solid;
border-color: #F4A7B8;
z-index: 99;
}

http://frozeneyes.livejournal.com/

Thanks all!
Jill aka Jo: Stock: Cookiesireesanwar on August 10th, 2015 07:17 pm (UTC)
Re: Help with my header in "Pretty In Pink"
The displacement is because your journal is a width of 1000px and so the header should be similar. It should be a width of 960 to take into account the border of 20px on the right and left.

Then under the line background-position: top center; I would add:

background-size: cover;

This stretches your image to fight the area.... which I only do with the image is already pretty big and yours is 900 so you are only stretching it 60pxs. This is reasonable.
Re: Help with my header in "Pretty In Pink" - frozeneyes on August 11th, 2015 12:55 am (UTC) (Expand)
Re: Help with my header in "Pretty In Pink" - frozeneyes on August 11th, 2015 01:16 am (UTC) (Expand)
Re: Help with my header in "Pretty In Pink" - sireesanwar on August 11th, 2015 11:06 pm (UTC) (Expand)
Re: Help with my header in "Pretty In Pink" - frozeneyes on August 12th, 2015 01:36 am (UTC) (Expand)
Re: Help with my header in "Pretty In Pink" - sireesanwar on August 12th, 2015 08:27 pm (UTC) (Expand)
irrlichtertanzirrlichtertanz on August 9th, 2015 11:03 pm (UTC)
Hi there!
I really love your Bubbles Dark theme!
But unfortunately, I seem to be not able to copy the header image into my theme.
When I paste the url of the header image and save the updates, there's always just a black gap at the top of my page, like this:
http://i42.photobucket.com/albums/e335/Katie_Forsythe/LJ/lj%20cracks_zps3ceoizzw.png

Could you help me?
Jill aka Jo: SGA: John and Rodney aboard aurorasireesanwar on August 10th, 2015 07:29 pm (UTC)
Okay so when I go to your layout it had the headerimage. But this header image is on my photobucket account. You need to upload the image to your photobucket or your Scrapbook here at LJ.

If you are having trouble with doing that there is a PHOTOBUCKET TUTORIAL and a SCRAPBOOK HOW TO.
(no subject) - irrlichtertanz on August 10th, 2015 09:44 pm (UTC) (Expand)
(no subject) - sireesanwar on August 10th, 2015 10:31 pm (UTC) (Expand)
(no subject) - irrlichtertanz on August 11th, 2015 10:51 am (UTC) (Expand)
(no subject) - sireesanwar on August 11th, 2015 10:41 pm (UTC) (Expand)
(no subject) - irrlichtertanz on August 12th, 2015 10:13 am (UTC) (Expand)
(no subject) - sireesanwar on August 12th, 2015 07:51 pm (UTC) (Expand)
witheringheight on January 31st, 2016 07:56 am (UTC)
Hi! I'm only new to coding and I'm having trouble on finding the right codes that will make me add borders on my entries. I might sound like a dummy but I'm really, really desperate right now. Thank you!
Jill aka Josireesanwar on April 19th, 2016 11:31 pm (UTC)
Are you still having trouble?
Arabianarabian on June 6th, 2017 03:20 am (UTC)
Is there some CSS coding that can be placed in the header section so that the header image resizes on different computer resolutions?

For example, I just got a new computer and my screen resolution is much bigger than my work computer. So to make my header fit my layout, I increased the width, but now I have to scroll to see the whole header at my work.

Thank you. (If you're still replying to these!)
Jill aka Josireesanwar on June 9th, 2017 12:11 am (UTC)
There is... I believe. Let me tinker around a bit on my test journal to make sure.
(no subject) - arabian on June 15th, 2017 03:15 am (UTC) (Expand)
(no subject) - sireesanwar on June 29th, 2017 08:48 pm (UTC) (Expand)
(no subject) - arabian on July 2nd, 2017 01:48 pm (UTC) (Expand)