Can't get background to show

casho · #1 (**permalink**) Aug 14th, 2007, 09:07

Hi, I'm trying to get my background to show on my page and not repeat and be centered but I doesn't work. I've tried this but it doesn't work

Code: Select all

{ 
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position: center
}

.Sorry if this is the wrong section.

pa007 · #2 (**permalink**) Aug 14th, 2007, 09:34

Is the file in the specified place and is it correctly named?

Pete.

casho · #3 (**permalink**) Aug 14th, 2007, 09:36

Yes it is. Also can you put the the background in an external style sheet.

dab42pat · #4 (**permalink**) Aug 14th, 2007, 09:46

could be a typo

HTML: Select all

{ 
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position: center
}

you are missing ; after center

casho · #5 (**permalink**) Aug 14th, 2007, 09:49

I'm just wondering where do you put the code.

pa007 · #6 (**permalink**) Aug 14th, 2007, 09:51

Is this actually being applied to anything. Before the opening curly bracket you need to select the element.

like

Code: Select all

div#image_div {
...
}

Pete.

pa007 · #7 (**permalink**) Aug 14th, 2007, 09:52

It can go in an external style sheet that is called in the head of your html document.

Pete.

dab42pat · #8 (**permalink**) Aug 14th, 2007, 09:52

You can put it in an external style sheet or on any page you wish to have that background

1840dsgn · #9 (**permalink**) Aug 14th, 2007, 09:52

erm...you haven't declared it as a style for anything!
*
Try this in your external stylesheet.
*

Code: Select all

 
 body {
***** background-image: url(images/background.jpg) no-repeat center center;
 }

*
Also I know its stupid...but is it correctly linked to the html document?
*
@dab42pat - you can actually not close your last style declaration with a ; and it will still work...not good practice in my opinion though.
*
mike

casho · #10 (**permalink**) Aug 14th, 2007, 09:57

Yes it is linked to my style sheet

Code: Select all

<link rel="stylesheet" type="text/css"
href="mystyle.css"/>

is in the head of my html page.

pa007 · #11 (**permalink**) Aug 14th, 2007, 10:39

Could you post your full code please. css and html.

Pete.

casho · #12 (**permalink**) Aug 14th, 2007, 10:43

Yea sure Html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css"/>
</head>

    <center><h3>Welcome</h3></center>

<center><p>
Welcome to DetaBeta here you can
<br /> find out more about me also you can
<br /> view my photos and animation, I hope
<br /> enjoy your looking at my website.</p></center>

<center><p>  
I created this website so that
<br /> others could see my work and
<br /> web skills and I hope to improve
<br /> my website as a go along. Well I
<br /> hope you enjoy the layout of my
<br /> website.,</p></center>


 
</body>
</html>

and css

Code: Select all

<head>

</head>

<body>
{ 
background-image: url(images/background.png);
background-repeat: no-repeat;
background-position: center
}


<style type="text/css">
h1 {color: #888888;font-family: futura;font-size: 36;}
h2 {color: #888888;font-family: futura;font-size: 24;}
h3 {color: #888888;font-family: futura;font-size: 20;}
p {color: #ffffff;font-family: futura;font-size: 14;}

</style>

</body>

pa007 · #13 (**permalink**) Aug 14th, 2007, 10:46

Code: Select all

body { 
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position: center
}


h1 {
color: #888888;
font-family: futura;
font-size: 36;
}

h2 {
color: #888888;
font-family: futura;
font-size: 24;
}

h3 {
color: #888888;
font-family: futura;
font-size: 20;
}

p {
color: #ffffff;
font-family: futura;
font-size: 14;
}

Change your css to this.

Pete.

1840dsgn · #14 (**permalink**) Aug 14th, 2007, 10:47

ok...your CSS is wrong. CSS documents aren't layed out liike html documents, you don't need head and body tags.
*

Code: Select all

 
 selector {
 *** attribute1: styles;
 *** attribute2: styles;
 etc etc
 }

Is the genertal layout.
*
So yours will be:
*

Code: Select all

 
 body{ 
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position: center
}

h1 {color: #888888;font-family: futura;font-size: 36;}
h2 {color: #888888;font-family: futura;font-size: 24;}
h3 {color: #888888;font-family: futura;font-size: 20;}
p {color: #ffffff;font-family: futura;font-size: 14;}

*
Also...you can shorthand the background by puttiong it all in one attribute so:
*

Code: Select all

 
 body{ 
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position: center
}

*
becomes
*

Code: Select all

 
 body{ background: url(images/background.jpg) no-repeat center;}

*
mike

casho · #15 (**permalink**) Aug 14th, 2007, 10:53

Thanks Pete that worked great. I'm just wondering how do you set page width and height

pa007 · #16 (**permalink**) Aug 14th, 2007, 10:57

A quick note. The font you've used may not be on every users computer so you should have a few web-safe back-ups just in case. Things like time new roman, Helvetica, Verdana, Arial, Georgia, and finally a sans-serif one. It's just good practice and helps you to maintain some control over what users see but you can't cover every eventuality.

Pete.

pa007 · #17 (**permalink**) Aug 14th, 2007, 11:14

Quote:

Originally Posted by casho

Thanks Pete

And Mike!

Pete.

casho · #18 (**permalink**) Aug 14th, 2007, 11:17

Oh yea thanks Pete and mike.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Background image won't show up	casho	Web Page Design	7	Mar 5th, 2008 09:04
Can't Get Table Background to show when "E-Mailing" Page	chriss	Web Page Design	5	May 8th, 2007 14:10
Cant Get CSS background images to show up	mschroeder	Web Page Design	3	Jan 18th, 2007 13:33
favicon doesn't show	berjoe	Graphics and 3D	20	Nov 13th, 2006 14:32
Background and Resolution compatibility, My background gets cut off	Funion	Web Page Design	1	Dec 4th, 2005 04:42

		Webforumz.com > Main Forums > Design Your Website > Starting Out
Can't get background to show