Question:
Add a background to CSS?
2010-05-07 09:58:47 UTC
So, I've pretty much failed at trying to figure it out, so how/where would you add a (repeating) background to this pre-made Livejournal CSS? Preferably, this one:
http://i562.photobucket.com/albums/ss62/XxdoodleloverxX/128-20.jpg

To this:

/* S2 Flexible Squares --- Washing Chrome ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */

/* -------------------------------------- PAGE -------------------------------------- */

body, html {font: 12px arial; color: #606060; padding: 0; margin: 0; background: #eeeeee; z-index: 0; position: relative; }

a {color: #888888; text-decoration: none; border-bottom: 1px dotted #bbbbbb;}
a:hover {color: #bbbbbb; border-color: #dddddd;}

#content {width: 758px; margin: 0 auto; margin-top: 85px; margin-bottom: 35px; background: #333333;}

/* -------------------------------------- MARK'M UP! -------------------------------------- */

blockquote {background: #eeeeee; padding: 10px; }
textarea {border: 1px solid #dddddd; font: 11px monospace; padding: 2px; color: #888888; }

input, select {border: 1px solid #dddddd; font: 9px arial; color: #606060 !important; background: #ffffff !important; }
input:hover, select:hover { color: #333333 !important; border-color: #888888;}

dd { border-top: 1px solid #dddddd; padding: 10px; }
dt { float: left; background: #eeeeee; font-size: 9px; padding: 5px 10px 5px 10px; }
dt a { border: 0; }
/* -------------------------------------- HEADER -------------------------------------- */

#header { background: #eeeeee; margin: 10px 0 0 0; padding: 0;}

#header ul {margin: 0; padding: 0; text-align: center; padding: 10px; text-transform: uppercase; font-size: 9px; background: #8f9ba5;
border-top: 10px solid #dddddd; }
#header li {display: inline; padding: 10px 0 10px 0; margin: 0; }
#header li a {padding: 0 10px 0 10px; border: 0; color: #dddddd;}
#header li a:hover {color: #ffffff;}
#header li:hover {background: #888888;}

#header li.view {color: #ffffff; background: #6A7A87; padding: 10px;}

.title, .subtitle {display: none;}

/* -------------------------------------- SIDEBAR -------------------------------------- */

#sidebar { margin: 0; padding: 0; border-top: 2px solid #606060; background: #333333; height: 148px; min-height: 148px; overflow: hidden; }

/* ############################## SDHOVER ################################## */
/* ############################## SDHOVER ################################## */
#sidebar:hover {height: auto;} /* Sidebar hover effect! Feel free to delete. */
/* ############################## SDHOVER ################################## */
/* ############################## SDHOVER ################################## */

#sidebar_summary {display: none;}

.defaultuserpic { width: 25%; text-align: center; }
.defaultuserpic img {border: 0; padding: 10px; background: #444444; margin: 13px 0 0px 0;}
.defaultuserpic img:hover {background: #404040;}
.defaultuserpic a {border: 0;}

.sbarlist {padding: 0; margin: 0; list-style: none;}
.sbartitle { padding: 10px 5px 10px 20px; color: #dddddd; margin: 0; position: absolute; font-size: 16px; }

div + .sbarbody .sbartitle {margin-left: 190px;}
div + div + .sbarbody .sbartitle {margin-left: 380;}

#sidebar_linklist .sbartitle, #sidebar_tags .sbartitle, #sidebar_calendar .sbartitle {margin-left: 0; z-index: 5; position: relative; }
.sbarbody2, #sidebar_summary {width: 44%; float: left; color: #aaaaaa; }
#sidebar_linklist, #sidebar_tags, #sidebar_calendar, .defaultuserpic {width: 25%; padding: 0; margin: 0; float: left; }

.sbarcontent, .sbarbody2 { border-top: 1px solid #606060; padding: 10px 0 10px 0; margin-left: 10px; }
.sbarbody2 {padding: 10px; margin-top: 39px; }

.sbaritem {display: block; font-size: 9px;}
.sbaritem a {border: 0; background: #444444; display: block; margin: 0 0 1px 0; padding: 1px 0px 1px 10px; color: #aaaaaa; }
.sbaritem a:hover {background: #404040; color: #ffffff;}

#sidebar .tagcloud a {border: 0; }
#sidebar .tagcloud {line-height: 16px;}

#sidebar_calendar .calendar {width: 100%; padding: 0; margin: 0;}
#sidebar_calendar .calendar td {padding: 0; text-align: center; font-size: 10px;}
#sidebar_calendar .calendar a {border: 0; display: block; background: #444444; color: #aaaaaa; }
#sidebar_calendar .calendar a:hover {color: #ffffff; background: #404040;}

/* -------------------------------------- ENTRY -------------------------------------- */

#maincontent {background: #8f9ba5; clear: both; z-index: 10; position: relative; width: 758px; border-top: 2px solid #606060; }

.LJ_Placeholder_Container a {margin-right: 100%; }

.userpic br, .userpicfriends br {display: none;}
.userpic, .userpicfriends { background: #6a7a87 !important; float: left; padding: 0; margin: 0 10px 0 0; text-align: center; width: auto; }

.userpic img {border: 10px solid #dddddd; width: 50px; height: 50px; }

.userpicfriends a { color: #ffffff; disp
Three answers:
Abdulrahman O
2010-05-07 10:15:58 UTC
See the part:



// body, html {font: 12px arial; color: #606060; padding: 0; margin: 0; background: #eeeeee; z-index: 0; position: relative; } //



Add this underneath.



// body{ background: url('http://i562.photobucket.com/albums/ss62/XxdoodleloverxX/128-20.jpg') repeat; } //



You can add it anywhere but best to add it there.



Let me know if it works.
2016-04-12 04:30:04 UTC
try ..\images or use full address.
JesusisLord
2010-05-07 10:11:18 UTC
Try this link, you should find what you need> http://www.w3schools.com/css/css_background.asp


This content was originally posted on Y! Answers, a Q&A website that shut down in 2021.
Loading...