Set repeated background in CSS and/or HTML file?

  • Thread starter Thread starter TV-Movie Lover
  • Start date Start date
T

TV-Movie Lover

Guest
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
<style type="text/css">
body
{
background-image:
url('moneyback.jpg');
background-repeat: repeat
}
</style>
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
 
Since you already have a css file, you could take the content of the <style ..> tag and put it in the other css file. Otherwise, put it (with the <style ..> and </style> tags) in the <head> section of your document. I don't know a thing about PageBreeze though - you can do this in any editor.

As it is, your framework would be:
<html>
<head>
...
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css">
body
{
background-image:
url('moneyback.jpg');
background-repeat: repeat;
}
</style>
</head>
<body>...

You can also use shorthand for your css (w3 schools has this too) so your background can be specified as:
body { background: url(moneyback.jpg) ; } /* no quotes needed, also repeat-x and repeat-y is the default and this is a comment */
 
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.
 
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 <head> tag and before the closing tag </head> :
<link href="sheet1.css" rel="stylesheet" type="text/css" />

("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.
 
Looks like you didn't put this

background-image:
url('moneyback.jpg');
background-repeat: repeat;

in your 'body' bracket. you would also need to put the correct image path for the url field. Also don't forget the semicolon to end every line
 
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;
}
 


Write your reply...
Back
Top