Improve company productivity with a Business Account.Sign Up

x
?
Solved

CSS Grunge Borders

Posted on 2013-01-04
7
Medium Priority
?
1,935 Views
Last Modified: 2013-01-10
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/
0
Comment
Question by:asp_net2
  • 3
  • 2
  • 2
7 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38745808
I don't understand the problem.  The page is just a few images.  The "grunge" effect is part of the images.  It is done in any graphics program.  Just create the images and add them to the css as a background image.  

Cd&
0
 
LVL 4

Author Comment

by:asp_net2
ID: 38745953
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
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38745984
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&
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
LVL 8

Expert Comment

by:Alicia St Rose
ID: 38747761
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.
<div id="wrapper">
 <div id="content">
 </div>
 <div id="bottom"></div>
</div>

Open in new window


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;
}

Open in new window

This will only shrink or grow with the content. If you need to resize as in responsive, then you are going to have to make separate batches of images for each device size, and add the new background images using CSS media queries...
0
 
LVL 4

Author Comment

by:asp_net2
ID: 38747851
@laughhearty,

Can you show me an example on how that will work?
0
 
LVL 8

Accepted Solution

by:
Alicia St Rose earned 2000 total points
ID: 38749223
Here's an example with perhaps a simpler way:

Another way to do this is with only two images and no tile. You'll have to create the top, but make it really long to accommodate any future lengthy text. Since this will be  larger image you'll have to use a jpg instead of a png and grab some of the body background.

You'll still have the wrapper, but put the empty div for the bottom outside the wrapper.

Option 2:
<div id="wrapper">
 <div id="content">
 </div>
</div>
 <div id="bottom"></div>                                      

Open in new window

#wrapper {
 background: url('top.jpg') top center no-repeat;
}
#bottom {
height: /*this should be as high as the bottom.png or less*/
background: url('bottom.png') bottom center no-repeat;
}

Open in new window


You can see a working example of this here on the blue sidebar. Also note a I've got a painterly border for the content area, this is using the tile solution I first suggested:
http://thehouseofsixdoors.com/about/

If you view source in firebug you'll see that there's a sidebar wrapper with a long image and a <p> (I used this instead of a div) for the bottom. There's a bit more going on because I had to work the horizontal shadows in above and below the social media. So here's some code to use:

<div id="sidebar-wrapper">
 <div id="content">
  ....
 </div>
</div>
 <div id="bottom"></div> 

Open in new window

CSS
#sidebar-wrapper {
    background: url("images/sidebar-bg3.jpg") no-repeat top center;
    width: 301px;
}
#bottom {
    background: url("images/tweet-bg.png") no-repeat  bottom center;
    height: 13px;
    width: 301px;
}

Open in new window

 

Play around with that code and add the following images. Sorry the images aren't semantic and that one's a png and one's a jpg, but you get the idea:

image for the sidebar wrapperimage for the bottom
0
 
LVL 4

Author Comment

by:asp_net2
ID: 38750798
@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?
0

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

595 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question