asked on CSS Grunge Borders
Hello Experts,
I'm trying to create an effect from the following link below for my navigation container and my container that will hold all my services. I don't know how to find such tutorials other than they look like grunge backgrounds.
Basically I will have a navigation container that will be 700px width and 60px height with a solid background color applied to it. Is there a way to add a background image to give the nav container a look like that? Same would apply for my services container (940px width and 600px height with a solid background color applied. I would need to somehow apply a background effect like the link below.
http://static.livedemo00.template-help.com/wt_42014/
I'm trying to create an effect from the following link below for my navigation container and my container that will hold all my services. I don't know how to find such tutorials other than they look like grunge backgrounds.
Basically I will have a navigation container that will be 700px width and 60px height with a solid background color applied to it. Is there a way to add a background image to give the nav container a look like that? Same would apply for my services container (940px width and 600px height with a solid background color applied. I would need to somehow apply a background effect like the link below.
http://static.livedemo00.template-help.com/wt_42014/
CSSHTML
Last Comment
Brian
ASKER
The problem is that I want to apply that grunge effect to a container(s).
For example if I have a div named "services" and apply the properties below, then I would like to apply a grunge background to that without making the div look square block. Also when that div gets resized I would like the grunge effect to adapt.
Can you assist with this?
Width: 700px
Background-color: blue
For example if I have a div named "services" and apply the properties below, then I would like to apply a grunge background to that without making the div look square block. Also when that div gets resized I would like the grunge effect to adapt.
Can you assist with this?
Width: 700px
Background-color: blue
The page you posted as an example is fixed and static and a single version, and that is the only way it will work.
You can create the background and if you put it in a fixed siz container on a static page it will work out. The second resolution changes or a page element is re-sized the image background will re-position and possibly distort. The only solution will be to use scripting on the page that might work ost of the time and when it does not the page will be a mess.
So either go with a fixed, static layout; develop a large number of versions of the background for each resolution and browser you want to support; or start working out how much detailed scripting you are going to have to add to the page.
Cd&
You can create the background and if you put it in a fixed siz container on a static page it will work out. The second resolution changes or a page element is re-sized the image background will re-position and possibly distort. The only solution will be to use scripting on the page that might work ost of the time and when it does not the page will be a mess.
So either go with a fixed, static layout; develop a large number of versions of the background for each resolution and browser you want to support; or start working out how much detailed scripting you are going to have to add to the page.
Cd&
Hi asp_net2
This can be done with wrapper divs and a y-repeating tile.
You will have to create the graphic in Photoshop, then slice off the top and bottom as two images. Then for the middle part you can use the offset filter in photoshop to make a tile.
The top image goes into the wrapper div. Inside the wrapper div is your content div and an additional empty div for the bottom of the background image.
CSS:
This can be done with wrapper divs and a y-repeating tile.
You will have to create the graphic in Photoshop, then slice off the top and bottom as two images. Then for the middle part you can use the offset filter in photoshop to make a tile.
The top image goes into the wrapper div. Inside the wrapper div is your content div and an additional empty div for the bottom of the background image.
<div id="wrapper">
<div id="content">
</div>
<div id="bottom"></div>
</div>
CSS:
#wrapper {
padding: /*this should be as high as the top.png*/
background: url('top.png') top center no-repeat;
}
#content {
background: url('content-tile.png') top center repeat-y;
}
#bottom {
height: /*this should be as high as the bottom.png
background: url('bottom.png') bottom center no-repeat;
}
ASKER
@laughhearty,
Can you show me an example on how that will work?
Can you show me an example on how that will work?
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
@laughhearty
How did you make the grungle looking borders?
Could this also be achieved if I add border images for each side of the square element and then just place the content in the middle?
How did you make the grungle looking borders?
Could this also be achieved if I add border images for each side of the square element and then just place the content in the middle?
Cd&