1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make a page with background image like paper?

Discussion in 'HTML & Website Design' started by mavmaverick, Mar 20, 2013.

0
  1. #1
    I want to make a webpage with background in a colour and a paper on top of it (like irctc.com, which has a blue background and a white paper on it). Please Help!!
     
    Solved! View solution.
    mavmaverick, Mar 20, 2013 IP
  2. GMF

    GMF Well-Known Member

    Messages:
    855
    Likes Received:
    113
    Best Answers:
    19
    Trophy Points:
    145
    #2 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Just for you</title>
        <style type="text/css">
            html {
                height: 100%;
            }
           
            body{
                background-color: aquamarine;
                height: 100%;
                margin: 0;
            }
            #content {
                height: 80%;
                width: 80%;
                background-color: white;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
       
    </head>
    <body>
        <div id="content">
            <h1>Just for you</h1>     
        </div>
    </body>
</html>
    Code (markup):

    I'd also suggest you go and learn the basics of HTML/CSS. Many good websites around, so you should have no problem finding one. But here is one of my favorites

    www.htmldog.com
    Code (markup):
     
    GMF, Mar 20, 2013 IP
  3. rohittripathi

    rohittripathi Greenhorn

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    yaa actually GMF is right told you there are lots of tutorial available on internet for front end development,
    and you can refer this one site also for learning html and css from beginning level
    Visit:- http://www.w3schools.com
     
    rohittripathi, Mar 20, 2013 IP
  4. mavmaverick

    mavmaverick Active Member

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #4
    No, mi amigo. You didn't understand the concept. I know about this code. Just open IRCTC.CO.IN in your browser and see the page.
     
    mavmaverick, Mar 22, 2013 IP
  5. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #5
    I write the code for you. Add css in style.css and html code in html file.

    ======= CSS Code ========
    body {
    background-color: #4B7B81;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 62.5%;
    }

    .page-container {
    background-color: #FFFFFF;
    margin: 10px auto;
    width: 970px;
    }

    .page-bottom-img {width:970; height:10px; background:#FFFFFF url(img/footer_bottom.jpg no-repeat;}

    .header-top-img {
    background: url("../img/home_05.jpg") no-repeat scroll 0 0 #FFFFFF;
    height: 11px;
    width: inherit;
    }

    ======= HTML Code ========

    <div clas="header-top-img"></div>

    <div class="page-container"></div>

    <div clas="header-bottom-img"></div>
     
    creativewebmaster, Mar 22, 2013 IP
  6. mavmaverick

    mavmaverick Active Member

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #6
    You've added pics in that code. Please give me those
     
    mavmaverick, Mar 22, 2013 IP
  7. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #7
    Ok, Find attached 2 graphics for the top and footer.
     

    Attached Files:

    creativewebmaster, Mar 22, 2013 IP
  8. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #8
    is this work for you?
     
    creativewebmaster, Mar 22, 2013 IP
  9. GMF

    GMF Well-Known Member

    Messages:
    855
    Likes Received:
    113
    Best Answers:
    19
    Trophy Points:
    145
    #9
    There are some mistakes in your code:

    In CSS: I think you meant .header-bottom-img and not .page-bottom-img (because there is no class page-bottom-img)

    In the css for .page-bottom-img (should be .header.bottom-img) -> width:970;
    You need to specify the amount. I guess it would be pixel, so

    width:970 px;

    would be right.


    Next, you forgot to close the brace around

    background:#FFFFFF url(images/footer_bottom.jpg no-repeat;

    This would be right

    background:#FFFFFF url(images/footer_bottom.jpg) no-repeat;


    On .header-top-img -> width: inherit doesn't work out. Use 970px


    You know what: I'll rewrite the whole thing

    <html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body {
background-color: #4B7B81;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}
 
.page-container {
background-color: #FFFFFF;
margin: 0 auto;
width: 970px;
height: 500px;
}
 
.header-bottom-img {
    width:970px;
    height:10px;
    background:#FFFFFF url(./images/footer_bottom.jpg) no-repeat;
    margin: 0 auto;
}
 
 
.header-top-img {
background: url("./images/home_05.jpg") no-repeat scroll 0 0 #FFFFFF;
height: 11px;
width: 970px;
margin: 0 auto;
}
           
        </style>
    </head>
    <body>
       
        <div class="header-top-img"></div>
 
<div class="page-container"></div>
 
<div class="header-bottom-img"></div>
    </body>
</html>
    HTML:
    Without my adjustments, it looks like this:
    [​IMG]

    With my adjustments:
    [​IMG]


    But why you would use images instead of CSS border-radius: is beyond me.
     
    GMF, Mar 22, 2013 IP
  10. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #10
    Especially since ircts.com uses CSS, not images.
     
    Rukbat, Mar 22, 2013 IP
  11. mavmaverick

    mavmaverick Active Member

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #11
    Hey, Friends I got the css of the site IRCTC. They use no images, its all work of css
     
    mavmaverick, Mar 23, 2013 IP
  12. #12
    Below is a sample code to make a page with background image like paper.

    <html>
    <head>
    <title>Home</title>

    <style type="text/css">
    body{background-color:#2781BA;}
    .container{margin:20px auto; width:900px; background: none repeat scroll 0 0 #FFFFFF; border: 2px solid #038B8F; border-radius: 5px 5px 5px 5px; text-align:center;}
    </style>
    </head>
    <body>
    <div class="container">
    <p>A</p>
    <p>B</p>
    <p>C</p>
    <p>D</p>
    <p>E</p>
    <p>F</p>
    <p>G</p>
    <p>H</p>
    <p>I</p>
    <p>J</p>
    <p>K</p>
    <p>L</p>
    <p>I</p>
    <p>J</p>
    <p>K</p>
    <p>L</p>
    <p>M</p>
    <p>N</p>
    <p>O</p>
    </div>
    </body>
    </html>
     
    born_star16, Mar 26, 2013 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    I'm just wondering what the **** "paper" has to do with any of this -- it's not textured... it's just white... and yeah this is 2013 not 2001, use CSS3 for the rounded corners.

    Also, fixing the width is a bad idea design-wise unless you don't care about people actually wanting to visit the site -- and damn, that IRCTC page is horrifically bad in terms of speed, size, or accessibility. Talk about your idiotic train wrecks of ineptitude.

    I would say born-star's example is the best so far, though I hate the illegible stuffing everything on one line in the CSS garbage, the lack of a doctype is problematic, and you don't need to say border-radius' property multiple times if it's all the same value - border-radius:5px; would have been quite sufficient.

    Also, border-radius values less than 8px usually don't look all that great in some browsers.
     
    deathshadow, Mar 28, 2013 IP
  14. mavmaverick

    mavmaverick Active Member

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #14
    THANKS!!!
     
    mavmaverick, Mar 28, 2013 IP