I'm helping a friend with this site:
http://smashingdivas.info/
No matter what style I apply to the gray background of the content div, I can't make it transparent (in any browser), so that the background image of the page shows through.
I've tried all of the following:
background-color: transparent;
background: transparent;
background-color: none;
background: none;
and nothing seems to work.
Thanks for your help!
If it's the div with class 'container' it's because you have a rule in your HTML that is overwriting your CSS:
.container,
.sliderGallery { background-color: #111111; }
If you want to apply transparency just on the background there are 2 options:
1) you can set the "alpha" channel on RGB ie.
background:rgba(255,255,255,0.5)
but this won't work on IE
2) create a simple transparent png image and set it this way
background:url(transparentIMG.png) repeat;
Have you tried applying the opacity property ?
like for eg.
opacity:0.5;
Works for me, at least. I guess you're overriding the background properties via CSS due to some later rule again.
Just remove following rule:
.container, .sliderGallery {
background-color: #111111;
}
Related
At the website I'm currently working on I need to differentiate some elements by giving them background (color) so it's easier to see which one you're in.
If I use the inspector from firefox, I can give the background without problem but when I pass that to my code I don't know why it does not work.
The class I'm using is this one:
<fieldset class="collapsible required-fields group-desc-programa field-group-fieldset form-wrapper collapse-processed">
</fieldset>
So what I add in my css style-sheet is the following:
.collapsible.required-fields.group-desc-programa.field-group-fieldset.form-wrapper.collapse-processed.collapsed{
background: red !important;
}
I think it has to be a really easy question because I normally do this kind of things without problem...
Thanks for your time!
Your last class .collapsed is not necessary:
.collapsible.required-fields.group-desc-programa.field-group-fieldset.form-wrapper.collapse-processed {
background: red !important;
}
Just add some ,.
.collapsible, .required-fields, .group-desc-programa, .field-group-fieldset, .form-wrapper, .collapse-processed, .collapsed{
background: red !important;
}
Use this css code
.collapsible, .required-fields, .group-desc-programa, .field-group-fieldset, .form-wrapper, .collapse-processed, .collapsed{
background: red !important;
}
If you want to apply background color to the particular fieldset mentioned in question. Use id to apply background to it.
I am currently having an issue with background color and background images. The project i am working on must use both a color and a background image. For example the image will fill up half of a div and the color will fill up the other half.
Now normally to do this i would use the following piece of CSS:
background: blue url('img.png) right no-repeat;
and this works perfectly but on this project in particular the user can set the background image themselves using a CMS system. So to apply the background images i am using an inline style on each of the divs then the div has its own color in an external stylesheet like so.
stylesheet.css
.bg-color {
background: blue;
}
index.html
<div class="bg-color" style="background:url('img.png') right no-repeat;">
</div>
Now when doing this the background image overrides everything, is there a way for me to achieve the results i am looking for dynamically?
Thanks
the default value of the background shorthand you have on style= is transparent and that is overwriting the color you give in the class bg-color. try:
.bg-color {
background-color: blue !important;
}
In your CSS try using:
.bg-color {
background-color: blue;
}
instead of only background: blue;.
Here is a solution
You may use shorthand notation to incorporate both backgrounds.
<div style="background: url(http://scienceblogs.com/gregladen/files/2012/12/Beautifull-cat-cats-14749885-1600-1200.jpg) no-repeat, green;
background-size: 50%;"></div>
I'd like to decorate the bottom of my page with a repeated triangle. The picture shows one triangle, but I want to fill the whole horizontal div.
Screenshot of what I've got so far: http://i.stack.imgur.com/JJA6D.png
<div class="container triangle"> </div>
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}
Is this possible or do I have to use an img as background?
Thank you for any help.
Use a background image in your CSS-
background:url("http://site.com/img/whatever.svg");
And then set it to repeat only horizontally-
background-repeat:repeat-x;
This means that yes, you do have to use a background image.
You could clone the element using jQuery or something but I don't think it's worth it.
background-image:url('your image url');
background-repeat:repeat-x;
My opinion is to use background images in CSS if they are not being used as links etc. Basically, if you aren't fussed about the SEO on those images. With that in mind, just use some CSS for your image.
background-image: url("yoururl/image.jpg") repeat-x;
As it has been mentioned you could technically use JQuery's clone method. This is a bad idea. Why add extra things for the page to do when CSS handles it.
If you want to experiment, there's a CSS property that gives you the ability to use an element (your triangle div in this case) as a background image. This property is the background:element().
You can see a demo here in Firefox.
However, this property works only in Mozilla with the -moz- prefix but there have been attempts to work in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.
use the img as background and let it repeat.
I have to say that I like background images more instead of the image in the html code.
This is cause people can't copy them easily as the image in the html code
I have an odd issue while beginning to learn CSS. This is a test page. It has a large transparent PNG covering the background color of solid blue.
Typically the black image (which has transparent holes in it) completely blacks out my background color.
In this example page I made the image's div transparent just to see if the background was still working.
Any ideas why my alpha is getting completely ignored?
Thanks all.
It's because on .backgrounddiv you have background-color set to #000. Instead use transparent to fix:
.backgrounddiv {
position:absolute;
background-color: transparent;
background-image:url(POCTransparentBG.png);
...
.backgrounddiv {
position:absolute;
background: transparent url('POCTransparentBG.png');
}
this is the proper css.
I just looked at your page, and it seems like the div with the background image on it (backgrounddiv) is styled to also have a solid black background (#000). If you remove the:
background-color: #000;
From your source, it looks the way you'd like!
This is my HTML:
<div id="links">
Link 1
Link 2
Link 3
Link 4
</div>
And these are the CSS styles:
#links {
position: absolute;
border: 1px solid #000;
}
#links a {
display: block;
}
#links a:hover {
background-color: #CCC;
}
This displays a list of links, the problem is that in IE, I can only click a link by directly clicking the text link, which is not the case with other browsers (where you can click anywhere whether the text link or anywhere else as long as it's in the link block), is there any fix for that (with only CSS, no javascript)?
Please note that I don't want to specify a width for the links or the div.
I have had the same problem and none of the solutions above worked for me.
I also needed the background of the links to be transparent.
A very uncomfortable solution, but one that worked perfectly is to set the background to a transparent gif. Only needs to be 1x1 px as it will repeat.
#links a
{
display: block;
background: url(/images/interface/blank/1dot.gif);
}
This seems to have no side effects apart from one additional request to the server.
Put position:relative; in your CSS at #links a{ }
like this
It will fix it :)
Enclose the link text in a span element. Then it will accept clicks anywhere within its bounds.
I have no idea why, but giving the anchor a background color seemed to fix this problem for me.
Setting the background color to #FFF and an opacity of 0 worked for me in IE9, Chrome and Firefox. Don't know about other versions though. Setting it to transparent didn't help me.
This has the advantage of being pure CSS and cross-browser, so maybe it could be a better alternative.
Ok, the fix for this problem is to give the anchors a background property other than transparent. Some proposed to give the anchors a transparent background image. I have an addition to this: The image does not have to exist. You can simply write any path and it will make it work:
a {
background:url('dummy/doesnotexist.png') no-repeat;
}
Insert this inside your a-tag style:
background:url('images/dot.png') no-repeat;
where dot.png is a 1x1 transparent image.