I'm trying to change the background color to just black on this site: https://vimeopro.com/mbtv11/our-short-film-show. I have this code so far, but I can't get the wrapper to go away. Any suggestions? Thanks in advance!
div {
background-color: #000000
}
Please post the actual code and not a link.
.wrapper .content has a background image. You need to remove it with the snippet below, or override it with !important.
.wrapper .content { background: transparent; }
Related
I want to have a background image on my site. It comes from the top of the page and is only behind the header. The problem is, my theme forces me to have a background color for the header so you can't see my background image at all. Here is a photo of what I want the site to look like:
And you can see what it actually looks like here. I'm using the Brunch Pro theme on Wordpress.
Is there a way to make the header background transparent or is there a better way to do this?
Add this to the end of the custom.css or style.css of your theme:
.brunch-pro .site-header{
background: transparent;
}
If you can edit the CSS (which I presume you can in WP), look for where .site-header has it's CSS properties set. Remove the background and background-color properties.
You could also just add a new CSS property and apply it to the header. Something like:
header.site-header {
background: none !important;
}
The !important will override already set properties...
If background-color property is required, you could use rgba color and make it transparent. background: rgba(0,0,0,0); makes background-color black, but fully transparent, without opacity and other tricks. Like so:
.black-but-transaprent {
color: red;
height: 100px;
width: 100px;
background: rgba(0,0,0,0);
border: 1px solid black;
}
<div class="black-but-transaprent">Test</div>
I would like to change the home icon of the Primefaces Breadcrumb with another icon but I can't find how.
I tried with CSS but it is not working for the icon:
.ui-breadcrumb {
background: none !important;
border: none !important;
icon: url('resources/images/look/bandeau.png')
}
It should be enough with:
.ui-breadcrumb .ui-icon-home {
background-image: url("#{resource['images/look/bandeau.png']}");
background-position: 0; /* asuming bandeau.png is a single image */
}
But you have to make sure two things:
First, that you are overriding primefaces css correctly, you shouldn't need !important. See this. If you are doing it right, at least you will see that the default image dissapear.
Second, you have to make sure that you are referring to the image correctly. In my code, I show how I do it myself, but it depends on your configuration so you should also check this.
Try to target that specific icon by doing so:
.ui-breadcrumb ul li .ui-menuitem-link.ui-home {
background: none !important;
border: none !important;
background-image: url('resources/images/look/bandeau.png') !important;
}
Also check if the background image hyperlink is correct.
I'm working on a website and am struggling with one thing. Basically, when you hover over the main logo, the background of the logo goes white and it looks awful. I've tried this in three different browsers. Apart from the mouse pointer changing to a link indicator, I don't want any other visual changes on hover. This is a bootstrap based mediawiki theme if that helps.
The site is: www.nebdat.com
I've figured out that that section is called p-logo and have tried the following:
#p-logo:hover { background-color: transparent !important; }
It doesn't seem to do anything though. However, when I try:
#p-logo:hover { opacity: 0; }
the logo and background all go transparent, so I know it's the right name of the object. However, I want the logo name to remain.
I hope that makes sense. I'm pretty new to this.
Hope you have some advice.
Thanks,
JT
#media screen
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
That's causing it.
This should do it:
#p-logo > a {
background: transparent;
}
It's not the image that's got a background on hover, it's the anchor tag.
You don't have to override it, you can simply remove it. Find and remove this code from load.php:
img:hover{background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGElEQVQYV2N4DwX/oYBhgARgDJjEAAkAAEC99wFuu0VFAAAAAElFTkSuQmCC) repeat;background:white url(http://www.nebdat.com/wiki/skins/common/images/Checker-16x16.png?2013-05-25T13:38:20Z) repeat!ie}
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}
I have a CSS rule like this:
a:hover { background-color: #fff; }
But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.
I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:
a.imagelink:hover { background-color: transparent; }
Today I was looking for a more elegant solution to this problem when I stumbled upon this.
Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.
Is there a nice way to solve this problem, or do I have to use the dirty approach again?
Thanks,
I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any...
About images with that bottom gap, you could do the following:
a img{vertical-align:text-bottom;}
This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.
For the transparent images, you should use a class.
I really hope that's solved in CSS3, by implementing a parent selector.
I'm confused at what you are terming "image links"... is that an 'img' tag inside of an anchor? Or are you setting the image in CSS?
If you're setting the image in CSS, then there is no problem here (since you're already able to target it)... so I must assume you mean:
<a ...><img src="..." /></a>
To which, I would suggest that you specify a background color on the image... So, assuming the container it's in should be white...
a:hover { background: SomeColor }
a:hover img { background-color: #fff; }
I usually do something like this to remove the gap under images:
img {
display: block;
float: left;
}
Of course this is not always the ideal solution but it's fine in most situations.
This way works way better.
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration: none;
border: 0 none;
background-color: transparent;
}
No cumbersome classes that have to be applied to each image. Detailed description here:
http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/
Untested idea:
a:hover {background-color: #fff;}
img:hover { background-color: transparent;}
The following should work (untested):
First you
a:hover { background-color: #fff; }
Then you
a:imagelink:hover { background-color: inherit; }
The second rule will override the first for <a class="imagelink" etc.> and preserve the background color of the parent.
I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.
you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.
I assume you have whitespaces between <a> and <img>? try removing that like this:
<a><img /></a>
I had this problem today, and used another solution than display: block thanks to the link by asker. This means I am able to retain the link ONLY on the image and not expand it to its container.
Images are inline, so they have space below them for lower part of letters like "y, j, g". This positions the images at baseline, but you can alter it if you have no <a>TEXT HERE</a> like with a logo. However you still need to mask the text line space and its easy if you use a plain color as background (eg in body or div#wrapper).
body {
background-color: #112233;
}
a:hover {
background-color: red;
}
a img {
border-style: none; /* not need for this solution, but removes borders around images which have a link */
vertical-align: bottom; /* here */
}
a:hover img {
background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}
I had the same problem. In my case I am using the image as background. I did the following and it resolved my problem:
background-image: url(file:"use the same background image or color");