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
Related
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>
I need some advice in creating a caption underneath an image, that is aligned to the right hand side. The image will change, so I can't use fixed value margins or anything like that - is this possible without javascript?
This is the basic layout, 'text-align: right' would work if I could somehow force the wrapper div to constrain to the image width, but currently it breaks past this. Any advice?
<style>
#section{height: 74%; padding-left:5%;}
#photowrapper{position:relative;}
#photo{height:100%; width:auto;}
#detailsdiv{position:relative; text-align:right;}
</style>
<div id='section'>
<div id='photowrapper'>
<img id='photo' src=../imgs/banan.jpg></img>
<div id= 'detailsdiv'>banan</div>
</div>
</div>
Maybe an obvious question but it hasn't been asked that I can see.
Just add display: inline-block; to the #photowrapper CSS
#photowrapper{
position:relative;
display:inline-block;
}
Fiddle: http://jsfiddle.net/DyrS9/
You can add display:table-cell (or table,inline-block) to #photowrapper :
#photowrapper{
position:relative;
display:table;
}
Example
I didn't really know how to word this question, but anyway, My website
kind of looks rather weird at the moment. I had it looking perfectly well, however i changed it due to the fact that the Footer was taking up the whole main section of the page (and i wanted to add color variations between the footer and main section).
So what i would like to know is how do i get the Main Area Text background color cover everything from the navbar to the footer (as wide as the navbar also)? I would make change it to using pixels, but wouldn't that mean to much guessing as you decide to change it? Surely there is an easier way!
Thanks to any help provided
Code:
.mainsection{
float:left;
width: 660px;
margin:30px;
background-color:#999;
}
.center{
background-color:#999;
}
HTML:
<div class="center">
<section class="mainsection">
<p>Main Area</p>
</section>
<aside class="sidenews">
This is the side news
</aside>
</div>
How about:
html {
background: #999;
}
or
body {
background: #999;
}
?
Another thing you can try is wrapping all the areas you want a certain background color in a div, then set that div's class and do a background color property in that class. You'd have to remove background color property from the rest of your classes for this to work. You can further control it with !important.
try this ; create one new class for all main page like .center and add below styles in that i hope this is help you.
body{background:#999;width:100%;height100%;}
.center{margin:auto; width:960px;}
Image explanation: http://img219.imageshack.us/f/skrmavbild20110321kl160.png/
I have a background-image that I want on the top of my page, this image is width 800px and height 400px.
Under this image I want another background-image which will repeat vertical (repeat-y) for the rest of the page.
I have tried the following
<div id="bg-static">
<div id="bg-repeat-y">
<div>
Text goes here
</div>
</div>
</div>
The thing is that I want "The text goes here" to float over both element. (See picture, http://img219.imageshack.us/f/skrmavbild20110321kl160.png/)
What should I do to do this?
You are making this seem too complicated, but it's extremely easy.
This is what you need to do:
Your "infinite, repeated" image will go as a site background, like this:
body{ background: url("your-repeated-image.png"); }
Next, create a html like this:
<body>
<div id="container">
any content, text, whatever goes here
</div>
</body>
And just put your 800x400px image there like this:
#container{ width: 800px; background: url("your-top-image.png") no-repeat; }
While testing it, temporarily use this:
#container{ height: 600px; } /* erase after the content is ready */
I think the solution would be the other way around: have the repeating background on the outside div and the fixed height background on the inside div.
Some code on jsfiddle: http://jsfiddle.net/EBK4C/
I have an issue (about the third time I've ran into it actually) where I have a container which holds a left and right div.
If they are of different lengths (right being longer than left or the other way around) how can I get the other one to stretch [in height] without using Javascript.
I don't want to have to result in table and I thought inherit would do it (but it just inherits auto). There doesn't seem to be an easy answer. Or should I just use tables!? Anything wrong with that?
This problem is blowing my mind for how stupidly simple it should be...
Thanks in advance!
edit: I'll give an example:
<body style="background: #000000 url(????.com);">
<div id="container" style="margin:0 auto; width:996px; height: auto; background: transparent; overflow:hidden;">
<div id="left" style="float:left; width:690px">
<div style="background-color:#FFFFFF;">Content</div>
<div style="background-color:#FFFFFF;">content</div>
</div>
<div id="right" style="float:left; width:306px">
<div style="background: transparent;">Content<br />Content<br />content<br/>Last line</div>
<div style="background-color:#FFFFFF;">Content</div>
</div>
</div>
</body>
As you would know, the left is much smaller than the right. Height:100% seems to do nothing.
Result: it's impossible without JS support. Cheers all.
If you need support for IE6 and IE7 I´m afraid you can´t do that in just css without tables or javascript.
For other browsers you can go the display: table-cell and display: table-row way.
Of course faking it using background images works if you don´t really need the columns to be equal height but just appear to be like that.
http://www.alistapart.com/articles/fauxcolumns/
For anything relatively simple faux columns will do the job, you just repeat an image vertically mimicking the simple solid bg colors of the columns. If it's anything more complex you'll need to do a combination of the sort.
See my reply here for more techniques:
2 column CSS div with stretchable height
If you just want it to appear that the columns are the same length, you can use this ugly hack:
.rightDiv, .leftDiv
{
margin-bottom: -1000px;
padding-bottom: 1000px; /*1000 + real padding*/
}
.wrapper
{
overflow: hidden;
}
Basically, it causes both columns to extend 1000px further than they should, with the unwanted bits hidden. Won't work with bottom borders though.
Obviously, this doesn't actually make them the same length.