I'd like to add a border image on the left and right of a wrapper element to give it a ripped paper effect.
I've tried using the before and after pseudo selectors but I couldn't get the image to repeat along the y-axis.
What is the best way to achieve the desired result?
Thanks.
Image example: http://i.imgur.com/9f5Y8bi.png
Edited for clairty: Here is a screenshot of the full site insofar: http://i.imgur.com/IpifJyd.jpg
I'd like to put a ripped image of the current paper texture to the left and right side of the main wrapper, and have it repeat along the y-axis to give the wrapper a ripped paper effect.
Currently, it's just a box-shadow.
you can try this and i hope it will work for you.
Demo or jsfiddle
css-
body{background: url(body/background/image/path);}
.wrapper{height: 316px;width: 700px;position:relative;background: url(your/background/image/path);margin: 0 auto;border-right:1px solid #333;border-left:1px solid #333;}
.wrapper:before{background: url(transparent/shadow/image/path);content: '';position: absolute;height: 100%;width: 43px;left:-44px;}
.wrapper:after{background: url(second/transparent/shadow/image/path);content: '';position: absolute;height: 100%;width: 43px;right:-44px;}
html:-
<div class="wrapper">
If I understand what it is that you're asking, you should be able to achieve the desired effect by adding a wrapper with a background image, like so:
.wrapper {
padding:0 15px; /* Set the left and right to the width of the border you desire */
background: url('path/to/border/image.png') repeat;
}
<div class="wrapper">
<img src="/path/to/facing/image.png" />
</div>
Related
How Can I Make An Odd Shaped Icon "Circle"?
The issue: I have 2 icons on a site that are irregularly shaped. I'm adding a padding, background-color, and border-radius to them. At some screen sizes the background-color looks like a circle, but at others, it starts to look like an oval (which I don't want).
jsFiddle:
http://jsfiddle.net/CSS_Apprentice/gv2wne9o/
HTML:
<div class="left">
<img src="http://placehold.it/83x111" alt="icon" />
</div>
<div class="right">
<img src="http://placehold.it/83x111" alt="icon" />
</div>
CSS:
img {
border-radius: 100%;
background-color: #555555;
padding: 10%;
}
Working jsFiddle: http://jsfiddle.net/gv2wne9o/1/ (applied to one of the two icons)
Just setting a border-radius is not going to do it in this case. And you need to set left and right padding without top and bottom padding, since your icon's dimensions are oval-shaped (83*111).
Assuming your icon is an inline-block element, you can use the following code to determine exactly how much left and right padding to add until the width of the element is equal to the height.
var img = document.querySelector('img');
var padding = 0;
while(img.offsetWidth < img.offsetHeight){
img.style.paddingLeft = (++padding)+"%";
img.style.paddingRight = padding+"%";
}
Check this out
img{
border-radius:0px;
background-color: #555555;
padding: 10%;
}
EDIT:
Define Square: a plane figure with four equal straight sides and four right angles.
You do not have 4 equal sides therefore you're using a RECTANGLE.
Bro, You are putting "border-radius:100%" and what else do you expect? border-radius must be "1% - 5%" for any proper use at website. When you provide anywhere with such a high value as "border-radius:50%" and above it will be oval and "at 100%" it(div) will be a circle. What's the issue?
border-radius:5px
try to put the border-radius as such, and you will get a proper square with non-pointed end-points! Hope, that solves the issue! Happy coding!
I am wanting to use an image as a border but just for the bottom - can this be achieved in CSS? I have briefly researched it and im reading about slices etc but I dont quite understand it.
I thought there might be something like border-bottom-image or similar to that...
Thanks
Perhaps think of this in another way. You want an image to appear along the bottom of an element. It might look like a border, but it doesn't have to be called one. An easy way to get the visual effect you are seeking is to place some padding on the element and place the image as a background image in that padding area. E.g.
element {padding-bottom: 20px; background: url(bgimage.png) no-repeat 50% 100%;}
First make your HTML something like this:
<div class="container block">
<div class="content block">
<---!Putt content here!--->
<div class="border-bottom block">
<---!Make it empty!--->
</div>
</div>
</div>
Then make the css something like this:
.block
{
display:block;
position:relative;
width: xpx; /*choose your width (x) */
}
border-bottom
{
background: url('picture url');
}
ps: you can repeat this as much as you want and you'll have always the style for those classes (just copy and past the HTML code)
you can use this css property:
border:solid;
border-bottom-width:10px; //thickness of border
border-image:url(image.jpg) 0 0 20 0 repeat; //20 is length of your image
Just ran into a problem with repeating background image.
In the case when the content is very short, shorter than the monitor height, the background image is still repeating for the extra space.
Please refer to the screenshot.
Orange bar is my footer. The bottom grey area is the extra space.
Can I make stop the background image repeating for the bottom area?
I mean ideally the background image just repeats as long as my content.
Any help will be appreciated.
.
You can use the below property.
background-repeat:no-repeat;
For more information go through this site
You can also give repeat-y or repeat-x to make the background-image repeat vertically or horizontally respectively.
If you want to give dimensions to your background image then you can use
background-size:100px 100px; /* width height */
I think this is what you mean.
Rather than sticking the background onto the body, slap another div in there and put the background onto that. The inner content will push the div to the right height and will stop at that point (unless otherwise stated).
eg:
<!doctype html>
<html>
<body>
<div id="background">
Your inner content
</div>
</body>
</html>
and put your repeating background onto #background in your css rather than your body.
you can set your background directly in CSS making like so:
body {
background: url(../images/background.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Hope this helps :D
It would be good if you could post your code here.
Try something like this:
<div>
<div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both"></div>
</div>
<div class="footer"></div>
</div>
Try this in the style section.
background-size: cover;
background-repeat:no-repeat;
I always have a problem trying to figure out the best way to make expandable content boxes. I used to use tables and cut the box into sections (top, bottom, left and right - then each corner in a table cell too, with an expandable middle cell for the content) This worked flawlessy on all browsers but its generally frowned upon.
Today i have an image which i need need to only expand vertically. however it has a drop shadow and the top 200 pixels or so has a gradient. Heres a link to the image im working with.
http://imageshack.us/photo/my-images/16/brandinfobox.png/
The content needs to flow and the div needs to expand vertically as the content grows. Ive looked at a few approaches but ive either not been successful or they have just not worked in some browsers. The main problem is the drop and shadow and top gradient. Those stop me from using a base background then absolute positioning some divs inside as the background ruins the drop shadow when i absolute position the outer edges.
Any advice? Sure its fairly simple if you know your way around css
May be you can do like this for this type of image & gradient
http://jsfiddle.net/wh6r4/
edit: added CSS code
.content{
background: url(http://i.imgur.com/5hN1S.png) repeat-y top left;
width:647px;
min-height:300px;
position:relative;
margin:50px;
}
.y-repeat{
position:absolute;
left:2px;
right:7px;
top:0;
bottom:0;
background: url(http://i.imgur.com/bJmR4.png) repeat-x top left;
}
.top, .bottom{
background: url(http://img16.imageshack.us/img16/3301/brandinfobox.png) no-repeat 0 0;
height:20px;
width:100%;
position:absolute;
left:0;
}
.top{
top:-20px;
}
.bottom{
background-position:left bottom;
bottom:-20px;
}
If that box can have a min-height than here are some ex. how to do it:
<div id="box-top"> // CSS bg image = 600*8px with rounded corners
<div id="box-middle"> // CSS bg image = 5*80px vertical tiny gradient line ; min-height!
<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners
OR EVEN BETTER:
You can make expand a gradient image inside the middle DIV, by setting position:absolute, width 100% and height:100% !!
<div id="box-top"> // CSS bg image = 600*8px with rounded corners
<div id="box-middle">
<img class="box_mid_img" src="vertical_gradient_image.png"> // CSS: .box_mid_img width:100%; height:100%; position:absolute
</div>
<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners
Another trick is to simply use a CSS3, you'll get support for IE gradients but not for shadows and corner (border) radius.
http://jsbin.com/uberub/2/edit#javascript,html,live
I would add a linear-gradient in CSS3.
For the surrounding rounded box with drop shadow, whether I go for 100% CSS3 or two background images and an extra div would depend of the requirements of my client.
I would split the image into three horizontal strips. One for the top, including the rounded corners, one for the bottom, including corners and shadow, and one very thin strip for the middle.
Then with markup like this:
<div style='background-image: url("middle.png"); width: 400px;'>
<img src='top.png'>
Expanding content in the middle
...
Can be as big as you like
<img src='bottom.png'>
</div>
I have an image and a border on the bottom of the div that contains it. The problem is that I want the border to be directly on the bottom edge of the image. Instead, there seems to be some natural padding on the bottom that I want to get rid of. How can I do this?
You need to set the images vertical align to top in your CSS :)
img { vertical-align: top /* can be baseline */ }
Hope that helps!
To put border on image
img{
border:1px solid #000;
}
Please share your code to solve your padding issue.
Why don't you apply the border directly to the IMG tag instead of its container DIV?