The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
pandy
post Sep 1 2011, 05:12 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,567
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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
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,019
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.


--------------------
Darin McGrew
WDG Member since 1998
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,019
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.


--------------------
Darin McGrew
WDG Member since 1998
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


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,567
Joined: 9-August 06
Member No.: 6



Can't say what you are doing wrong from looking at a screen cap. Code please.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
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


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,567
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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB 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


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,567
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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
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: 25th October 2014 - 10:16 AM