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(1 - 11)
pandy
post Sep 1 2011, 05:12 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Background images can't be stretched (yet). What you can do is position an inline image behind other content and stretch it by setting its width to 100% (and leave the height out). It may or may not look good, depending on the kind of image it is and how much it is stretched.

If it's a good idea to have a large background image is another matter.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Sep 1 2011, 09:41 PM
Post #3


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Another approach is to use a non-repeating background image, with a background color that blends with the color at the edges of the background image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Stripes
post Sep 2 2011, 03:48 PM
Post #4


Newbie
*

Group: Members
Posts: 15
Joined: 11-September 10
Member No.: 12,708



Yeah, I've used the method that Darin said before in some designs, which works pretty good. I think I understand your idea pandy, and will give it a go. However, my new website is moving away from one large webpage look to a clean centered content of 80% only, which is where issues come up that I'd like it to stretch. My image will be 800px wide, so they will need to stretch quite a bit if someone on a widescreen monitor views the page, even if it's 80% and 800px on a 1024x768, double the width will hurt the image...so I will only be going with a gradient color and not a digital image.

This post has been edited by Stripes: Sep 2 2011, 03:48 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Stripes
post Sep 2 2011, 05:11 PM
Post #5


Newbie
*

Group: Members
Posts: 15
Joined: 11-September 10
Member No.: 12,708



So, I've been working on the background and I think I'll get it worked out....however I am having some centering issues. I'm using a wrapper at 80% and I have the left and right margins set to auto (also tried 10%) but I keep getting my page centered to one side or the other! angry.gif What am I doing wrong?

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Sep 2 2011, 06:10 PM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Looking at your image, one approach would be to have 3 images. The top image would be behind the others, and would be a gradient from the dark blue at the top to the lighter blue that matches the background color. The left background image would blend with the top background image, extending the dark color down the left edge. In the same way, the right background image would blend with the top background image, extending the dark color down the right edge.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 2 2011, 06:40 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Can't say what you are doing wrong from looking at a screen cap. Code please.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Stripes
post Sep 4 2011, 02:11 PM
Post #8


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
Stripes
post Sep 7 2011, 08:39 PM
Post #9


Newbie
*

Group: Members
Posts: 15
Joined: 11-September 10
Member No.: 12,708



Bump...any idea?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 7 2011, 08:52 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It is inside #wrapper, at least with the code you posted above.

I gave #wrapper a white border.
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Stripes
post Sep 8 2011, 06:29 PM
Post #11


Newbie
*

Group: Members
Posts: 15
Joined: 11-September 10
Member No.: 12,708



So you're saying it was fine for you...? or that you worked a new code?

EDIT : I just remade all the code and got it centered now. strange. thanks anyways!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 8 2011, 06:47 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I don't know if it was fine or not since I don't know what you expected. The screen cap is of the code you posted. The only addition I made was the border on #wrapper to show that it does contain the problem DIV.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 28th March 2024 - 09:22 AM