The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Stretch div background image
Stripes
post Sep 1 2011, 02:54 PM
Post #1


Newbie
*

Group: Members
Posts: 15
Joined: 11-September 10
Member No.: 12,708
Hey guys, I'm designing a new website and I'd like to know if it's a good choice to have one rather large image (900w 700h) to be the background of the main content layer, and if so...I'd like to have it stretch out with the content, the length-wise way. So this would mean when I write content and have it run down on spaces, the background will stretch with the div layer that has the text in it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
Stripes
post Sep 4 2011, 02:11 PM
Post #2


Newbie
*

Group: Members
Posts: 15
Joined: 11-September 10
Member No.: 12,708
Finished my template design, except for the right div layer. Code is below image.
IPB Image

My index.html
CODE

<head>
<title>Nic's PC Services</title>
<link href="css/Style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
    background-color: #1E3349;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="content">
    <div id="header"><img src="images/header.gif" width="800" height="95" /></div>
    <div id="navbar"><img src="images/navbar_holder.png" width="800" height="25" /></div>
    <div id="contentarea">
      <div id="left"><iframe src="docs/l1block.html" frameborder="0" scrolling="auto" height="340" width="580"></iframe></div>
      <div id="right">Right</div>
      <div id="leftspace"></div>
      <div id="left2"><iframe src="docs/l2block.html" frameborder="0" scrolling="auto" height="340" width="580"></iframe></div>
      
    </div>
    <div id="footer">
    <center><iframe src="docs/footer.html" frameborder="0" scrolling="no" width="780px"></iframe></center>
    </div>
  </div>
</div>
</body>
</html>


My CSS Sheet
CODE

@charset "utf-8";
/* CSS Document */
* {
    margin: 0px;
    padding: 0px;
}
#wrapper {
    height: 100%;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}
#wrapper #content {
    height: 100%;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
}
#contentarea {
    height: 700px;
    background-image: url(../images/content_bg.png);
    background-repeat: no-repeat;
    padding: 10px;
}
#wrapper #content #contentarea #left {
    float: left;
    width: 588px;
    background-image: url(../images/left_bg.png);
    background-repeat: no-repeat;
    height: 348px;
}
#wrapper #content #contentarea #leftspace {
    float: left;
    width: 588px;
    height: 8px;
    /* [disabled]clear: both; */
}
#wrapper #content #contentarea #left2 {
    float: left;
    width: 588px;
    background-image: url(../images/left_bg.png);
    background-repeat: no-repeat;
    height: 348px;
}
#wrapper #content #contentarea #right {
    float: right;
    width: 192px;
}
#footer {
    clear: both;
    background-image: url(../images/footer.png);
    background-repeat: no-repeat;
    height: 80px;
    padding: 10px;
    width: 100%;
}

#header {
}
#navbar {
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
Stripes   Stretch div background image   Sep 1 2011, 02:54 PM
pandy   Background images can't be stretched (yet). Wh...   Sep 1 2011, 05:12 PM
Darin McGrew   Another approach is to use a non-repeating backgro...   Sep 1 2011, 09:41 PM
Stripes   Yeah, I've used the method that Darin said bef...   Sep 2 2011, 03:48 PM
Stripes   So, I've been working on the background and I ...   Sep 2 2011, 05:11 PM
Darin McGrew   Looking at your image, one approach would be to ha...   Sep 2 2011, 06:10 PM
pandy   Can't say what you are doing wrong from lookin...   Sep 2 2011, 06:40 PM
Stripes   Finished my template design, except for the right ...   Sep 4 2011, 02:11 PM
Stripes   Bump...any idea?   Sep 7 2011, 08:39 PM
pandy   It is inside #wrapper, at least with the code you ...   Sep 7 2011, 08:52 PM
Stripes   So you're saying it was fine for you...? or th...   Sep 8 2011, 06:29 PM
pandy   I don't know if it was fine or not since I don...   Sep 8 2011, 06:47 PM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 03:38 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC