Stretch div background image |
Stretch div background image |
Stripes |
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.
|
pandy |
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. |
Darin McGrew |
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.
|
Stripes |
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 |
Stripes |
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! What am I doing wrong?
|
Darin McGrew |
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.
|
pandy |
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.
|
Stripes |
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.
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 { } |
Stripes |
Sep 7 2011, 08:39 PM
Post
#9
|
Newbie Group: Members Posts: 15 Joined: 11-September 10 Member No.: 12,708 |
Bump...any idea?
|
pandy |
Sep 7 2011, 08:52 PM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
|
Stripes |
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! |
pandy |
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.
|
Lo-Fi Version | Time is now: 28th March 2024 - 09:22 AM |