Discover Habbo's history
Treat yourself with a Secret Santa gift.... of a random Wiki page for you to start exploring Habbo's history!
Happy holidays!
Celebrate with us at Habbox on the hotel, on our Forum and right here!
Join Habbox!
One of us! One of us! Click here to see the roles you could take as part of the Habbox community!


Page 1 of 2 12 LastLast
Results 1 to 10 of 18
  1. #1
    Join Date
    Apr 2009
    Location
    Brentwood, Essex.
    Posts
    586
    Tokens
    236

    Default Really need help...

    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!

  2. #2
    Join Date
    Mar 2005
    Location
    London
    Posts
    4,402
    Tokens
    3,894
    Habbo
    Intricat

    Latest Awards:

    Default

    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>
    Last edited by Kieran; 11-07-2012 at 02:25 PM.

  3. #3
    Join Date
    Apr 2009
    Location
    Brentwood, Essex.
    Posts
    586
    Tokens
    236

    Default

    Quote Originally Posted by Intricat View Post
    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

  4. #4
    Join Date
    Mar 2005
    Location
    London
    Posts
    4,402
    Tokens
    3,894
    Habbo
    Intricat

    Latest Awards:

    Default

    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

  5. #5
    Join Date
    Apr 2009
    Location
    Brentwood, Essex.
    Posts
    586
    Tokens
    236

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    London
    Posts
    4,402
    Tokens
    3,894
    Habbo
    Intricat

    Latest Awards:

    Default

    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.

  7. #7
    Join Date
    Apr 2009
    Location
    Brentwood, Essex.
    Posts
    586
    Tokens
    236

    Default



    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?

  8. #8
    Join Date
    Mar 2005
    Location
    London
    Posts
    4,402
    Tokens
    3,894
    Habbo
    Intricat

    Latest Awards:

    Default

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

  9. #9
    Join Date
    Apr 2009
    Location
    Brentwood, Essex.
    Posts
    586
    Tokens
    236

    Default

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

  10. #10
    Join Date
    Mar 2005
    Location
    London
    Posts
    4,402
    Tokens
    3,894
    Habbo
    Intricat

    Latest Awards:


Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •