I want to make the background of this iframe embed transparent:
<iframe class="airtable-embed" src="https://airtable.com/embed/shrXOJJGmSy0avuio?backgroundColor=gray&layout=card" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
I was searching and found that it was possible with js or jquery. However, I tried for an hour but still can't figure it out.
I was able to make it transparent with inspect element here, under html background color.
Image
Any help would be appreciated. Thank you!
Related
I'm not sure why this isn't working but I'm trying to make a transition bar on a page that is basically just a block of color across some content.
I'm using Bootstrap 3 but not sure that has anything to do with it. If I apply the color directly to my div tag using a style tag it will work. However, I would like it to be in my style sheet so I can add a left and right border. When I put the same thing in my style sheet and try to apply it the style it won't display. I'm still learning to use the Dev Tools but when I view it using F12 I looks as though it applies my stylesheet style like it should.
Any ideas on what I'm doing wrong?
This works. I'm using a period to control the height for now but will eventually try to apply some height styling.
<div class="row">
<div class="col-md-12" style="background-color:#6f88a1">.</div>
</div>
This doesn't
.home_transition_bar
{
border-left: 1px solid Black;
border-right: 1px solid Black;
background-color: #6f88a1;
}
<div class="row">
<div class="col-md-12 home_transition_bar">.</div>
</div>
well, bootstrap has some pre-defined styles... in order to overwrite them, simple css code might not be accepted. Therefore, try at the end of the style "!important". For example:
#header
{
background-color: red !important;
}
I am working with bootstrap and that has done it for me. Hope it helps
In a web application I am using images sprites that have alt text. But in Firefox only the actual alt-text overlays the image on screen.
<img width="36" height="36" class="step1Current" title="Step 1" alt="Quote step one image">
Its class is:
.step1Current{
background: url(../images/progress-sprites.png) no-repeat;
background-position: 0px 0px ;
width: 36px;
height: 36px;
}
So the image is overlayed with the text 'Quote step one image'.
You shouldn't use a background on an img tag.
If you don't specify a src="" god knows what will happen, the alt should show up.
Inline sprites: http://css-tricks.com/css-sprites-with-inline-images/
Live Demo: http://css-tricks.com/examples/CSSClip/
The key is the clip property, which works all the way down to IE6.
I have a div for gallery that contains other divs(each on has an image).In the outer div i set backgournd and border but nothing happens... I know the problem is that inner divs cointains only tags and nothing else. How can i work this arround without setting fixed width??
*All tags where closed even before.I copied part of my code, sorry for the misunderstanding!
*Someone said to set overflow and it worked! Thank You!(post was deleted and didnt saw who was!
Thanks all for the answers!
<div class="gallerybox">
<div class="img">
<img src="#" width="140" class="border1" alt="Click..."/>
</div>
</div>
And the CSS.
.gallerybox {
background:#CCC;
border:#000;
-moz-border-radius: 15px;
border-radius: 15px;
}
Thanks :D
The background is working correctly. Your border issue can be fixed by assigning it a specific width and style.
For example:
border: 1px solid #000;
JS Fiddle: http://jsfiddle.net/mQQ2A/2/
Hi you should be using background-color and border-color attributes when specifying only the color of those.
.gallerybox {
background-color:#CCC;
border-color:#000;
-moz-border-radius: 15px;
border-radius: 15px;
}
It may be that you didnt set anything for the border but its color and radius:
border:#ccc;
Should be:
border:solid 1px #ccc;
Make sure you close div.gallarybox. Right now it's open. When I tried it and closed it, I found it functioning like one would expect.
http://jsfiddle.net/6rGxw/
I am trying to have a header image with a border at the top of my page above my content area but for some reason my bg image is repeating. Do you know what is causing the image to repeat? Any help is greatly appreciated!
Here is my code:
<div class="container_12">
<div class="subheader">
<img src="images/subheader_1.png" alt="Subheader" width="940px" height="240px" />
</div>
</div>
here is my CSS:
.subheader{background:url(../images/subheader_1.png);background-repeat:no-repeat; min-height:300px; width:940px}
.subheader img {border:1px solid #ccc;padding:5px;background:#efefef}
You've only specified the background attribute in your css. This is a global attribute expecting all settings defined there. To couple the background-repeat with an image you have to use background-image:
Edit:
Based on your edit and posted screen shot, it looks like you don't have a repeating image so much as you've included the image in both the background AND an image tag. You should pick one or the other, but to get it to line up right, you need to remove the padding and margin:
.subheader img {
border:1px solid #ccc;
padding:5px; <--- TAKE THIS OUT
margin: 0px; <--- ADD THIS
background:#efefef
}
Currently I'm getting like this in Chrome, Safari, Mobile Safari and Opera. edges are rough.
img {border-radius: 10px; border:3px solid red}
See this example in Google Chrome or Opera or iPad http://jsfiddle.net/4PLUG/2/show/
Borders are fine in Firefox.
and in IE9 border edges are fine but it has a different problem. it shows some space between border and images
How to get the result like Firefox in all other browser?
You can give extra div to your img tag like this:
body {padding:100px}
img {
vertical-align:bottom;
position:relative;
z-index:-1;
}
div{
overflow:hidden;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border:3px solid red;
display:inline-block;
}
http://jsfiddle.net/4PLUG/4/
/* just make sure you're including border radius for all browsers rendering engines */
.img-border{
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border:3px solid red;
}
all browsers have different CSS capabilities, and handle them differently.
if you want the corners to look exactly the same in all browsers, you'll just have to put the curves in the actual image, and not rely on CSS.
An alternative is to use a background image on a div instead, which may get better clipping.
You might want to try wrapping the images in a block element and floating 4 divs in all four corners with border images as a background. Make sure the image itself has an border as well, this makes using radius borders in images quite a lot easier if you have more than one size of images that needs 'm.
I've done this effect with two divs using z-index.
<div class="picture-wrapper">
<div class="mask">
</div><!-- end mask -->
<div class="picture">
<img src="" />
</div><!-- end picture -->
</div><!-- end picture-wrapper -->
Set your background image on mask to the red borders with the middle cut out (png), then use z-index to stack it above the picture div.
Should work cross browser, the only thing is it doesn't account for dynamic widths/height in the images, it assumes all images are the same. AND you're doing a request for that extra mask image.
Up to you.
for img tags , percent border radius work perfectly:
.roundcornerimg{border-radius: 50%;}
<img src='imageurl' class='roundcornerimg'/>
link the image in the body:
<img src="image.jpg">
add your sizing to the image:
<img src="image.jpg" width="100%" height="30%">
Then add in the inline CSS.
<img src="image.jpg" width="100%" height="30%" style ="border:solid thick black;border-radius="25px">
By adding in the inline CSS, the border and border radius will take effect on the image. Just dont style this particular image in the stylesheet because specificity may mess with the inline CSS.