PDA

View Full Version : Set repeated background in CSS and/or HTML


TV-Movie Lover
12-26-2008, 06:00 PM
file? Hello there,

I have a problem in setting up repeated background, please see below CSS file. I am not sure where I should put this code in HTML or CSS - Help appreciated.

Following is the code I copied from http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeat

QUOTE

body
{
background-image:
url('moneyback.jpg');
background-repeat: repeat
}
UNQUOTE


Following is the code of my CSS file
QUOTE
html {
height:100%;
}

body {
font-family:verdana, arial, sans-serif;
font-size:.74em;
margin:0;
padding:0;
}

p {
line-height:20px;
margin:0;
padding:0 0 24px;
}

h1 {
font-family:verdana, tahoma, arial, sans-serif;
font-size:176%;
font-weight:400;
margin:0;
}

h2 {
font-size:100%;
text-decoration:underline;
font-weight:400;
margin:0;
padding:0 0 4px;
}

img {
border:0;
}

.left {
float:left;
padding:0 8px 0 0;
}

.right {
float:right;
padding:0 0 0 8px;
}

.center {
display:block;
text-align:center;
margin:0 auto;
}

blockquote {
border-top:1px solid;
border-bottom:1px solid;
margin:20px 0;
padding:10px 20px 0;
}

ul {
margin:8px 0 0 14px;
padding:0;
}

ul li {
list-style-type:square;
margin:0 0 11px;
padding:0;
}

#main {
width:761px;
margin-left:auto;
margin-right:auto;
}

#links {
width:742px;
text-align:right;
height:22px;
padding:9px 0 3px 19px;
}

#logo {
width:759px;
height:100px;
border-top:1px solid;
border-left:1px solid;
border-right:1px solid;
padding:0;
}

#logo h1 {
font-family:verdana, arial, sans-serif;
font-size:150%;
font-weight:400;
letter-spacing:.3em;
padding:38px 0 0 19px;
}

#content {
width:761px;
height:auto;
text-align:justify;
overflow:hidden;
padding:0;
}

#column1 {
width:243px;
float:left;
padding:15px 0 15px 14px;
}

#column1 h1 {
padding:0 0 18px;
}

#menu,#addlinks {
position:relative;
width:216px;
float:left;
height:184px;
margin:0 0 15px;
padding:8px 0 0;
}

#menu ul,#addlinks ul {
list-style:none;
text-align:left;
width:216px;
margin:0 auto;
padding:0;
}

#menu li,#addlinks li {
list-style:none;
float:left;
margin:0;
}

#menu li a,#addlinks li a {
float:left;
height:14px;
text-decoration:none;
width:194px;
border-bottom:1px solid;
padding:3px 10px 4px 12px;
}

#menu h1,#addlinks h1 {
padding:0 0 14px 12px;
}

.sidebaritem {
position:relative;
text-align:justify;
width:190px;
float:left;
height:244px;
min-height:244px;
margin:0 0 15px;
padding:8px 14px 11px 12px;
}

.sidebaritem[id] {
height:auto;
}

#column2 {
text-align:justify;
width:482px;
float:right;
padding:0 22px 15px 0;
}

#column2 h1 {
border-bottom:2px solid;
margin:24px 0 12px;
padding:0 0 6px;
}

.sidebaritem a,#column2 a,.sidebaritem a:hover,#column2 a:hover {
text-decoration:none;
padding:0;
}

#footer {
float:left;
width:761px;
text-align:center;
height:22px;
padding:9px 0 3px;
}

form {
margin-top:0;
}

div.row {
clear:both;
width:448px;
height:29px;
}

div.row span.formlabel {
float:left;
width:150px;
text-align:left;
}

div.row span.forminput {
float:right;
text-align:right;
}

div.spacer {
clear:both;
width:80px;
height:22px;
}

input,textarea {
width:259px;
font-family:verdana, arial, sans-serif;
font-size:100%;
border:1px solid;
}

.submit {
font-family:verdana, arial, sans-serif;
font-size:100%;
border:1px solid;
width:70px;
height:22px;
cursor:pointer;
}

#links a,#links a:hover,#footer a,#footer a:hover {
text-decoration:none;
}
UNQUOTE
I forgot to mention that I am using PageBreeze for editting

krypticenigma
12-26-2008, 10:00 PM
put the BODY css that is in your html currently inside of your actual CSS file. it might be overwritten depending on the placements of your includes/links. Otherwise as long as all the css is correct it should be working. But there is no reason to put stuff in both unless you are using a universal css file. If you are doing that make sure your css in the html is after you link the css page. Other problems might include declarations but I do not do much with objects.

wenrobsoccer
12-27-2008, 12:00 AM
The CSS for your body should look like this:

body {
font-family:verdana, arial, sans-serif;
font-size:.74em;
margin:0;
padding:0;
background-image: url('moneyback.jpg');
background-repeat: repeat;
}

thisseparatepeace
12-27-2008, 02:01 AM
If you take that CSS and save it as a separate file with the extension ".css", then link to it in each of your pages, it is much more efficient because you only have to edit the external style sheet once, instead of on every page.
To do that, place the following code after the tag and before the closing tag :

("sheet1.css" will be the name of your style sheet. If it's in a folder, for example a folder labeled "css", it would be like this: css/sheet1.css)
In your external style sheet, you do not need to include the opening and closing tags for the stylesheet.

There are different ways you can make a background repeat.
I see in the body {} secion that you've already set the background to repeat. If you want it to just repeat horizontally, try repeat-x. If you want it to repeat vertically only, try repeat-y.