CSS Help -- Background Images and Headers [FLEXIBLE SQUARES]
Requested by damaged_penguin
BACKGROUND IMAGE
For the background, here's the code you'll want to look at (if, as in damaged_penguin's case, are working with a layout that already has a background image, otherwise, see the link at the end of this section for help on installing a background image):
body {
background-color: #59759c;
background-image:url(http://i407.photobucket.com/albums/pp157/scholarslayouts/header%20contest/background.png);
background-repeat:repeat;
text-align: center;
color: #585858;
font-family: "Georgia", sans-serif;
font-size: 13px;
margin: 20px 0 20px 0;
}
It's near the top of the code, so it's easy enough to find. Now to replace the current background image with your own, you need to replace the URL (bolded part in the code above) with the URL of your background image.
Depending on what your background image looks like, you may want to edit the line I've italicized. For more information on backgrounds in general, see w3schools.com.
P.S. damaged_penguin, your layout has an additional background image, here's the other background image in your layout (I've bolded the part that you will need to replace and italicized the part that you may have to edit) that I found:
#maincontent {
margin-top: 15px;
font-family: "Georgia", sans-serif;
font-size: 13px;
background-color: #fbf4f4;
color: #f8f8f8;
border-style: solid;
border-color: #424243;
border-width: 3px;
margin-right: 180px;
text-align: left;
background-image:url(http://i407.photobucket.com/albums/pp157/scholarslayouts/header%20contest/backgroundcontent.png);
background-repeat:repeat;
}
HEADER
For the header, here's the code you'll want to look at (if your layout already has a header, like damaged_penguin's does--if yours doesn't, then you will have to add the code--see my tutorial on installing headers here*).
**FYI (for damaged_penguin), your header code can be found in the middle of the code, immediately under the heading "Header - you can add a header image with either #header or .headerimage"**
.headerimage {
position: relative;
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://i407.photobucket.com/albums/pp157/scholarslayouts/header%20contest/header2.png");
background-repeat: no-repeat;
}
Now the part you will want to replace is the URL (bolded). Replace it with the URL of your header, which you have of course uploaded to your own image host (I personally would recommend TinyPic or Photobucket, but there are other free image hosting sites out there, such as ImageShack, or you could even upload your header to your livejournal scrapbook, as I explain here*).
Now, I have italicized the part you will want to edit. Replace the width and height with the width and height of your header, and it will display correctly on your journal.
**And remember to always credit the original maker of your header and background, if you did not make them yourself, as well as the creator of your layout somewhere, whether in your user profile, in a blurb on your sidebar, or in a credits post!!**
*These links do not work, I am aware of this. I have not yet written up the tutorials they go to just yet.
BACKGROUND IMAGE
For the background, here's the code you'll want to look at (if, as in damaged_penguin's case, are working with a layout that already has a background image, otherwise, see the link at the end of this section for help on installing a background image):
body {
background-color: #59759c;
background-image:url(http://i407.photobucket.com/albums/pp157/scholarslayouts/header%20contest/background.png);
background-repeat:repeat;
text-align: center;
color: #585858;
font-family: "Georgia", sans-serif;
font-size: 13px;
margin: 20px 0 20px 0;
}
It's near the top of the code, so it's easy enough to find. Now to replace the current background image with your own, you need to replace the URL (bolded part in the code above) with the URL of your background image.
Depending on what your background image looks like, you may want to edit the line I've italicized. For more information on backgrounds in general, see w3schools.com.
P.S. damaged_penguin, your layout has an additional background image, here's the other background image in your layout (I've bolded the part that you will need to replace and italicized the part that you may have to edit) that I found:
#maincontent {
margin-top: 15px;
font-family: "Georgia", sans-serif;
font-size: 13px;
background-color: #fbf4f4;
color: #f8f8f8;
border-style: solid;
border-color: #424243;
border-width: 3px;
margin-right: 180px;
text-align: left;
background-image:url(http://i407.photobucket.com/albums/pp157/scholarslayouts/header%20contest/backgroundcontent.png);
background-repeat:repeat;
}
HEADER
For the header, here's the code you'll want to look at (if your layout already has a header, like damaged_penguin's does--if yours doesn't, then you will have to add the code--see my tutorial on installing headers here*).
**FYI (for damaged_penguin), your header code can be found in the middle of the code, immediately under the heading "Header - you can add a header image with either #header or .headerimage"**
.headerimage {
position: relative;
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://i407.photobucket.com/albums/pp157/scholarslayouts/header%20contest/header2.png");
background-repeat: no-repeat;
}
Now the part you will want to replace is the URL (bolded). Replace it with the URL of your header, which you have of course uploaded to your own image host (I personally would recommend TinyPic or Photobucket, but there are other free image hosting sites out there, such as ImageShack, or you could even upload your header to your livejournal scrapbook, as I explain here*).
Now, I have italicized the part you will want to edit. Replace the width and height with the width and height of your header, and it will display correctly on your journal.
**And remember to always credit the original maker of your header and background, if you did not make them yourself, as well as the creator of your layout somewhere, whether in your user profile, in a blurb on your sidebar, or in a credits post!!**
*These links do not work, I am aware of this. I have not yet written up the tutorials they go to just yet.