Really need help...

Robi · 11-07-2012, 02:09 PM

This has been bugging me for a while..

Im making my own website and have a design in mind but every time I attempt it, I get really frustrated and end up giving up.

The basic design I want to endure is basically a background image with the content placed overtop with a white block through the center..

Something like this...

Can someone tell me what I need to make this (whether its css/html) and i even have dreamweaver but that piece of software annoys me...

any help will be appreciated!

Kieran · 11-07-2012, 02:11 PM

CSS and HTML will cover this.

In your CSS you need the following:

Put a link to your image between the "".

Code:

body{background:url("../images/background.png") repeat;}
#wrapper{width:900px;height:100%;margin:0 auto 0 auto;background:#FFF;}

Then in your HTML you need to add this:

Code:

<body>
<div id="wrapper">
Your content here
</div>
</body>

Robi · 11-07-2012, 02:28 PM

Originally Posted by Intricat

CSS and HTML will cover this.

In your CSS you need the following:

Put a link to your image between the "".

Code:

body{background:url("../images/background.png") repeat;}
#wrapper{width:900px;height:100%;margin:0 auto 0 auto;background:#FFF;}

Then in your HTML you need to add this:

Code:

<body>
<div id="wrapper">
Your content here
</div>
</body>

Hey, thanks for the reply.

I've never really got to grips with CSS before, how would I embed the CSS code into my HTML? I've tried to work around with it but nothing seems to be working as far.

Thanks

Kieran · 11-07-2012, 02:34 PM

Well there are two methods, what I consider to be the clean and dirty method.

If its just a small amount of CSS you can do it this way and embed it all in to the HTML page.

Code:

<html>
<head>
<style>
body{background:url("../images/background.png") repeat;}
#wrapper{width:900px;height:100%;margin:0 auto 0 auto;background:#FFF;}
</style>
</head>

<body>
<div id="wrapper">
Your content here
</div>
</body>

</html>

However, I find this a bit messy so what I tend to do is keep all CSS to a file called build.css and then add this to the top of every HTML page:

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="build.css" />
</head>

<body>
<div id="wrapper">
Your content here
</div>
</body>

</html>

They both effectively do the same thing just one looks a lot neater than the other when viewing the source code

Robi · 11-07-2012, 02:47 PM

I understand everything, I have tried to put both types of your CSS code into mine and nothing.. and I even copied your first example and then put the image in and still nothing... I have looked at everything, for some reason the background cant be found..

This is my code

Code:

<html>
<head>
<style>
body{background:url("Documents/MyWebsites/Website/images/background.png") repeat;}
#wrapper{width:900px;height:100%;margin:0 auto 0 auto;background:#FFF;}
</style>
</head>


<body>
<div id="wrapper">
Your content here
</div>
</body>


</html>

Any ideas? Feels like something so simple is always made complicated by myself.. sigh.

Kieran · 11-07-2012, 02:53 PM

You don't need the whole Documents/MyWebsites bit. That's where your issue is.

It'll be

Code:

body{background:url("../images/background.png") repeat;}

Make sure you put the ../ in otherwise it won't reference the correct folder.

Robi · 11-07-2012, 03:06 PM

Code:

<html><head>
<style>
body{background:url("../images/background.png") repeat;}
#wrapper{width:900px;height:100%;margin:0 auto 0 auto;background:#FFF;}
</style>
</head>


<body>
<div id="wrapper">
Your content here
</div>
</body>


</html>

The background image is inside an images folder, inside "my website" folder which holds all of the code.

The image is called "background.png" and yet it still doesn't want to work...

Any ideas?

Kieran · 11-07-2012, 03:07 PM

Give me a minute to write it up for you. Then you can reference it for what is different.

Robi · 11-07-2012, 03:09 PM

Ok, thanks for your help.. even though it hasn't worked.. you are a star!

Kieran · 11-07-2012, 03:13 PM

Here you go:

http://evaske.com/Habbox/Test%20Site.rar

Thread: Really need help...

Thread Tools

Really need help...

Posting Permissions