I have set background-image for my menu's background, as for the black bar behind the menu:
http://www.cochlea.co.il/
background-image: url("http://www.cochlea.co.il/wp-content/uploads/2015/07/bar.png");
background-repeat: no-repeat;
background-position: inherit;
But, sometimes the black background won't load. and sometimes when you scroll down and then up, it disappears.
What's the problem?
Thanks so much.
I noticed that it is getting hide whenever we are scrolling down.
Well how about if you remove the background-image and allow the background to be black?
Use this code
.main-navigation ul {
list-style: none;
margin: 0;
display: inline;
background: #000;
padding: 5px;
border-radius: 28px;
padding-left: 30px;
padding-right: 30px;
}
.theNavigationBar {
position: absolute;
width: 100%;
top: 15px;
left: 0;
text-align: center;
font-weight: bold;
/* background-image: url("http://www.cochlea.co.il/wp-content/uploads/2015/07/bar.png"); */
/* background-repeat: no-repeat; */
/* background-position: inherit; */
/* letter-spacing: 0.5px; */
}
It will do the same purpose of what is your background-image is doing. So simply use the above code.
Related
I have a div in CSS which is to show a piece of tape.
The problem is that the background in the middle is overlapping and appearing on both ends of the tape, so the transparency that should be at the ends of the tape div is not there.
Here is my CSS.
.tape {
background-image: url(../graphics/tapeleft.png), url(../graphics/taperight.png), url(../graphics/tapemiddle.png);
background-repeat: no-repeat, no-repeat, repeat;
background-position: left, right, center;
font-size: 1.05em;
height:32px;
min-width:75px;
line-height:32px;
text-align:center;
border:0 solid #000000;
margin:0;
padding: 0;
display:inline-block;
color: black;
}
.tape span { padding-left:16px; padding-right:16px; }
How do I stop the middle background from appearing beneath the background on the ends, while having the three backgrounds in one div? I have tried using background-clip and background-origin but I can't get it to work.
You need to use a pseudo element for the repeated image, as you can't set both a start and an end offset for it.
body {
background-color: magenta;
}
.tape {
position: relative;
background-image: url('http://i.imgur.com/vVnpGzx.png'),
url('http://i.imgur.com/Po3AT0u.png');
background-repeat: no-repeat;
background-position: left, right;
font-size: 1.05em;
height: 32px;
min-width: 75px;
line-height: 32px;
text-align: center;
display: inline-block;
color: black;
}
.tape::before {
content: '';
position: absolute;
top: 0;
left: 8px; /* start offset */
right: 8px; /* end offset */
height: 100%;
background: url('http://i.imgur.com/7aGUUgo.png') center;
z-index: -1
}
.tape span {
padding-left: 16px;
padding-right: 16px;
}
<div class="tape">
<span>$60 annual revenue</span>
</div>
EDIT: It seems the snippet works fine if I remove z-index from the parent, but it's most certainly not doing that on my forum. Take a look: http://pjonline.tk/index.php?act=idx
So, I have something a little complicated set up. Basically, I'm making a forum, right? And each forum has a description. Since some go on to multiple lines, I have it set as display:block so there's no trouble with wrapping.
Now, I want a kind of fancy look for these. Specifically, this:
Except, uh, y'know. Properly made. My first attempt was with percentage border-radius, but it was squished in too much. So I decided to create a div around it that'd have normal borders, and with both borders having a transparency fade so it'd look seamlessly like the display above.
I wandered around Google for a while and eventually found the idea to use ::after to get a gradient rounded border. Unfortunately, due to the display:block, the ::after's background is appearing on top of the actual background. ::before didn't help either.
So um, lil bit stuck on what to do ^^; I'd really like a border to what I've set, but nothing's working out and you of course just can't set the colour of top-left/bottom-right >>
Is there a way I could do this?
Current codes:
body { /* only here to set font size/family */
font-size: 11px;
font-family: arial;
}
#wrapper { /* a container these are held in with a specific z-index */
position:relative;
z-index:7;
}
.forum-desc {
background: #EFEFEF;
border: 1px solid transparent;
display: block;
border-radius: 387px 115px 387px 115px / 36px 22px 36px 22px;
margin-left: 40px;
width: 335px;
height: 24px;
padding: 5px;
font-style: italic;
text-align: justify;
-moz-text-align-last: enter;
text-align-last: center;
background-clip: padding-box;
position: relative;
z-index: 2;
}
.forum-desc::after {
position: absolute;
top: -2px;
bottom: -2px;
left: -2px;
right: -2px;
background: linear-gradient(red, blue);
content: '';
border-radius: 387px 115px 387px 115px / 36px 22px 36px 22px;
z-index: -2;
}
<div id="wrapper">
<span class="forum-desc">Various information pertaining to rules and the proper way to act on the forum and game.</span>
</div>
Here u go my frnd...
css:-
body { /*only here to set font size/family */
font-size: 11px;
font-family: arial;
}
.forum-desc {
background: #EFEFEF;
border: 1px solid transparent;
display: block;
border-radius: 387px 0px 387px 0px / 36px 22px 36px 22px;
margin-left: 40px;
width: 335px;
height: 24px;
padding: 5px;
font-style: italic;
text-align: justify;
-moz-text-align-last: enter;
text-align-last: center;
background-clip: padding-box;
position: relative;
}
.forum-desc::before {
position: absolute;
top: -2px;
bottom: -2px;
left: -2px;
right: -2px;
background: linear-gradient(red, blue);
content: '';
border-radius: 387px 0px 387px 0px / 36px 22px 36px 22px;
z-index: -2;
}
Output:-
... Apparently it was my .row4's background-color that was blocking it all from layering properly... Bizarre, but an issue resolved by assigning .row4 a z-index, I guess. I did everything right, just had conflicting code x:
When I test it on various of browsers running locally (Apache on virtual server) - everything's fine, but once I upload it via FTP on a host - background-image does not get displayed if there's also set a background-color:
case no1:
body {
font-family: Candara, Tahoma, Verdana;
font-size: 0.9em;
color: white;
background: #242424 url("/Images/background.png") no-repeat top center;
}
case no2:
#top {
position: relative;
border-radius: 5px;
text-align: left;
background-color: #CC0000;
background-image: url("/Images/sky_banner.png");
background-position: top;
background-repeat: no-repeat;
height: 200px;
}
.top-content {
position: absolute;
bottom: 0;
left: 0;
}
Once I remove the 'background-color' property, image gets displayed.
Try This code...
element{
background-image:url(background.png.png);
background-repeat:no-repeat;
background-color:#242424;
background-position: top center;
}
Use background-color property after background-image
I put together a button using :before and :after elements and IE10/9 are ignoring them completely, as far as I can tell they should be working perfectly in at least those 2 versions.
.buttonSML {
background-position:-35px -432px;
background-color: transparent;
border: none;
text-transform: uppercase;
font-size: 2.9rem;
font-weight: #font-bold;
height: 55px;
padding: 0 5px;
position: relative;
.text-shadow(0,0,4px);
cursor: pointer;
}
.buttonSML:before, .buttonSML:after {
content: " ";
position: absolute;
top: 0;
height: 55px;
width: 20px;
display: inline-block;
visibility: visible
}
.buttonSML:before {
background-image: url('../images/sprite.png');
background-position: 0px -432px;
background-repeat: no-repeat;
background-color: transparent;
left: -20px;
}
.buttonSML:after {
background: url('../images/sprite.png');
background-position: -394px -432px;
background-repeat: no-repeat;
background-color: transparent;
right: -20px;
}
Added a jsfiddle so you can see the end result http://jsfiddle.net/7D4kG/1/
Not really sure what up so would appreciate any advice you guys can provide.
After some work I found 2 solutions.
FIrst is with the help of jquery, you can replace with and add
$('#button-id').click(function ()
{
$('#form-id').submit();
});
Works well, but you loose HTML5 form validations.
To keep the validations you can skip the jquery and just add "overflow: visible" to your buttons style. Have only tested it in IE10 so far, will test the rest later when I republish.
http://jsfiddle.net/3MHHs/1/
I have made some changes and it works for me in Chrome and IE10. I completely removed the positioning, because that is very ...advanced thing in pseudos. Browsers fail on simpler cases too. I have removed the 5px padding too.
.sprite {
background-image: url('https://dl.dropboxusercontent.com/u/6374897/sprite.png')
}
.buttonSML {
background-position: -35px -432px;
background-color: transparent;
border: none;
text-transform: uppercase;
font-size: 2rem;
height: 55px;
padding: 0;
cursor: pointer;
}
.buttonSML:before, .buttonSML:after {
content: "";
width: 20px;
height: 55px;
font-size: 2rem;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-color: white; /* sorry */
background-image: url('https://dl.dropboxusercontent.com/u/6374897/sprite.png');
}
.buttonSML:before {
background-position: 0px -432px;
}
.buttonSML:after {
background-position: -394px -432px;
}
I want to have a HR like background image. a 2 pixel wide gif file.
I looked into styling the HR tag, but too much browser issues..
Used a 2px high div with the image as bg, but in IE6, there is a padding I can not seem to get rid of.
Any suggestions welcome!
CSS:
.hr {
margin: 0; padding: 0;
height: 2px;
background-image: url('images/help-hr.gif');
background-repeat: repeat-x;
background-color: green; /* just to see the padding in IE6 */
}
HTML:
<p>sky</p>
<div class="hr"></div>
<p>grass</p>
Add overflow:hidden;
.hr {
margin: 0; padding: 0;
height: 2px;
background-image: url('images/help-hr.gif');
background-repeat: repeat-x;
background-color: green; /* just to see the padding in IE6 */
overflow:hidden;
}
I do not know the answer to the IE6 issue you're dealing with, but I had the same issue with using hr and found a solution that worked for me:
hr {
background-color: #ccc;
border-width: 0;
color: #ccc;
height: 2px;
line-height: 0;
margin: -.5em 10px 1.8571em 10px;
page-break-after: always;
text-align: center;
width: 80%;
}
hr:after {
content: "\a7\a7";
font-size: 1.25em;
}