See this fiddle for the simplest and cleanest explanation I can offer: http://jsfiddle.net/JRyJe/2/
On a site I am working on I am creating decorative borders around certain divs. To create the effect I am compositing many background images together, one for each corner plus a 1px wide tiled edge piece to create the sides.
Two of the three work exactly as intended. But this one, for some reason, is having color problems in the edge pieces - the color doesn't match the background color. I have triple checked the edge pieces themselves in photoshop (Here is a link to one for you to download and see for yourself) and the color is correct in the image.
So what is going on?
The code, since SO doesn't appreciate jsfiddle links:
HTML
<div id="about">
<div class="deco_border">
<h2>Why are those pinkish bars there?</h2>
</div>
</div>
CSS
#about .deco_border {
padding: 110px;
background: url('http://web.fildred.com/images/about_border/NWcorner.jpg') no-repeat,
url('http://web.fildred.com/images/about_border/SWcorner.jpg') left bottom no-repeat,
url('http://web.fildred.com/images/about_border/SEcorner.jpg') right bottom no-repeat,
url('http://web.fildred.com/images/about_border/NEcorner.jpg') right top no-repeat,
url('http://web.fildred.com/images/about_border/Nborder.jpg') repeat-x,
url('http://web.fildred.com/images/about_border/Wborder.jpg') repeat-y,
url('http://web.fildred.com/images/about_border/Sborder.jpg') bottom repeat-x,
url('http://web.fildred.com/images/about_border/Eborder.jpg') right repeat-y,
#c00d13;
}
It seems to be your images (even though you said you had checked them). If I view your image at source your color issue is present
http://web.fildred.com/images/about_border/SWcorner.jpg
Related
I'm working to edit the background at the bottom of my webpage and noticed a white border around the background that does not mirror the top portion of the webpage.
I've attempted the usual solution of including top: 0; and right: 0; I've also included background-size: cover, but that has not fixed the issue either.
Here is my CodePen so you can view the HTML and CSS. Note, I'm writing my CSS in SASS, so its a bit long.
I expect the lower background (which transitions from the dark purple to the dark pink) to stretch all the way to the edges, a la the upper background (dark pink to blue), but it instead has a weird white border around it.
The problem is that your body got 8px margin.
It's easy to notice with inspection (Ctrl+Shift+C on Chrome dev tools).
Reset it:
body {
margin: 0
}
I'm trying to use multiple background images on a single div with a top portion, a middle repeating portion, and a bottom portion. The issue is that the repating portion repeats throughout the whole div.
Does anyone know of a technique to restrict a repeating background image to a particular portion of a div? If that is not feasible, do you know if it's possible to push the background_middle_repeating.png background images behind the top and bottom background images?
CSS
div {
background:
url(../images/background_top.png) no-repeat 50% 0%,
url(../images/background_middle_repeating.png) repeat-y 50% 100px,
url(../images/background_bottom.png) no-repeat 50% 100%;
}
Thanks.
Background layers are created in the order they are specified, top-down; with this in mind, to push the middle layer behind the top and bottom layers, declare it last:
div {
background:
url(../images/background_top.png) no-repeat 50% 0%,
url(../images/background_bottom.png) no-repeat 50% 100%,
url(../images/background_middle_repeating.png) repeat-y 50% 100px;
}
Note however that if portions of your top and bottom images are transparent, this will cause the middle image to show through those transparent portions. In such a case you will need to find a different way to restrict the area of the middle background image through some other means. Depending on your layout, this could be as simple as filling in those transparent areas using an image editor, or this could require the use of pseudo-elements or assigning the top and bottom images to different elements altogether.
Hi all am trying to create a info box using css by an gradient box and which must expand by its contents goes large and which has to support old version upto ie6 i can able to create box using pure CSS and CSS3 which is not working on old browsers so am planned to do it using background image concept but i can't able to finish it.
this is the image used as background
Gradient rectangle box
then I sliced the images as four slice and I styled and markup ed using this four corners like
CSS
.rounded-box{
background: #fff url('../img/top-left-radius.png') no-repeat;
}
.top-right-radius{
background: url('../img/top-right-radius.png') no-repeat top right;
}
.bottom-left-radius{
background: url('../img/bottom-left-radius.png') no-repeat bottom left;
}
.bottom-right-radius{
padding:20px;
background: url('../img/bottom-right-radius.png') no-repeat bottom right;
}
HTML
<div class="rounded-box">
<div class="top-right-radius">
<div class="bottom-left-radius">
<div class="bottom-right-radius">
rounded box :-)
</div>
</div>
</div>
</div>
it add the corners of the box correctly and now the problem top,bottom border and center background gradient i don't have any idea to do it please help me out
Use css3pie
http://css3pie.com/
or jquery plugin
http://jquery.malsup.com/corner/
Both solutions will allow you cross browser compatibility.
I have the following gradient in firefox:
-moz-linear-gradient(top,#222 0%,#444 5%,#333 20%,#333 95%, #222 100%)
this works good for a horizontal band used on my web page but now I would like to use a similar gradient to make a logo appear as though it sticks out from the page. Does anyone out there know how I could apply a gradient to a div of for example 200 by 30 pixels and have that with a gradient that makes it look like it stands up from a black page like a button with gradient on all four sides?
Hope there's some new feature that can do this.
Marie
It sounds like a drop shadow is what you want. Usually this would apply a gradient to the right and bottom sides, but if you set the X and Y offset to 0, then it should apply to all sides.
There is a box-shadow CSS rule for this, and here is an example with the Mozilla vendor prefix (-moz-):
div.box {
width:200px;
height:30px;
-moz-border-radius: 15px;
-moz-box-shadow: 0px 0px 10px #fff;
}
<div class="box">logo?</div>
This should give you a rounded box with gradients "outside". There are other vendor prefixes and the prefix-less standard that you should consider including too. For IE too, I think there is a shadow filter you can look into.
Hope that helps.
I'd like to have separate background images on the top and bottom of my site but can't quite seem to nail it. I would like the images to stay at the absolute top and bottom of the page.Below is a shot of the site mockup, and a shot of the backgrounds on their own with dimensions.
The mockup doesn't show it, but there will be text links and copyright info at the bottom. You can find my failed attempt at coding at www[dot]dev[dot]arbitersoflight[dot]net
Mockup
img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg
Backgrounds
img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg
Note: The backgrounds are 1200x400 each.
EDIT: At this point I can get the two images to show up without fail, the problem is getting the bottom image to stick to the absolute bottom of the browser window. It seems that it is currently at a fixed position. Below is my CSS and HTML..
UPDATE (Solved): I finally solved this by reworking my code based on this guide: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Thanks for all of the suggestions everybody.
You could use the second image as the body background, set a color too, and the first image as the container's background. Or vice-versa, but remember to align the background, and if you switch, mind the container's height.
The body and html background (like the suggestions from zzzzBov and nemophrost) don't work in my Firefox...
body {
background: #DDD url('2.png') no-repeat center bottom;
}
.container {
background: url('1.png') no-repeat center top;
}
Another thing you can do is set a background image on the body and on html.
body {
background: url(...);
}
html {
background: url(...);
}
You can see jqueryui.com for an example of this.
What you can do:
The menu is a div with an own background to fit the upper area.
Then apply the background with the bottom part to the body or content/page container that you are using.
It sounds like you want:
html
{
background: url(...) no-repeat top; /* see the background-position property */
}
body
{
background: url(...) no-repeat bottom;
}
you may want to switch one or both to use repeat-x, and make sure you set a suitable background color to match the color on the images.