I am working on this test page.
Scroll the page. The logo stays fixed on the background and this area I painted with purple scrolls over it. I made it purple just so I can see.
I am trying to make this area I painted with purple partially transparent, so I can see the background logo behind, as I scroll, like the purple area was a semi-transparent glass. The color is (255,0,255,0.6) and is defined on the secundario.css styles as
body.index #main {
padding-top: 5em;
background-color: rgba(255, 0, 255, 0.6);
}
Whatever I do, I cannot make this purple area semi-transparent. It stays opaque.
Any ideas? Thanks in advance.
I see that you found an alternative, but in case you are still wondering, I found your problem:
You have the background image as part of your banner section, which is a sibling to main (so, even if it looks like it, they do NOT overlap). If you want to see the image, you need to place it in one of the containers underneath, either page-wrapper or directly on the body.
The transparency works, you just can get different color results depends on element's color under the target with your rgba. Try to change background-color: rgba(255,0,255,0.6); to background-color: rgba(255,0,255,0.1); for example and you will see the difference.
Try using this
body.index #main {
opacity: 0.5;
padding-top: 5em;
background-color: rgba(255,0,255,0.6);
}
The transparency works, ok, but there is nothing below the purple area (just a blank page). You have set the logo background on your page header but that ends where your purple area starts.
The best would probably be to set the background on the #page-wrapper or similar parent element.
If you just want your element to be transparent, it's really as easy as :
background-color: transparent;
But if you want it to be in colors, you can use:
background-color: rgba(255,0,255,0.6);
https://www.w3schools.com/css/css_image_transparency.asp
I have discovered how to do it. I need to assign it to an independent id, not to a regular style.
Something is probably interfering with the current #main id, so, by creating a new one the problem is solved.
Thanks guys!
Related
I just trying to solve the problem.
CSS:
.default-img > img {
height: 100px;
width: 100%;
background: url('bg.png');
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
border: 10px solid black;
}
I have a white "Border" (Inner Border?) in the Image tag and i cant remove it.
The Black Border is set manually to show you the Problem and the Red Content is the included image.
How can i remove the white inner border from img tag
Open up a image editing software. Re-crop / re-save your source image
being rendering from 'background: url('bg.png');' background
property. So, the 'bg.png'.
Another thing you can do if you don't want to do above. Nest another
<div> around your initial .default-img <div> and set the
heights and widths to crop out the white. Make sure to set property
overflow:hidden;
In some rarer cases a white line or (outline) can be induced around
elements as a browser quirk. Test your element across browsers (and
maybe even devices too) to target if it's something browser
specific. Then target that browser and remove. ie. outline { none; }
Hope this helps, g'luck!
The img creates that border when you have a background but not a source.
To solve this issue move that background to a div :)
is it possible that that white border exists in the image itself, not in css? view the file on the black background and check.
Looks like you are showing two images there at 100%, both the source image and the background image. Do you need the background image? Could that cause the white line?
I am designing a website where its whole background color is light green (#F5FFF6 to be exact), and now I need to create a fieldset who's background color is white (#FFFFFFF). My CSS markup is below:
#page_content {
width: 100%;
height: auto;
min-height: 100%;
position: relative;
background-color: #F5FFF6;
}
#fieldset {
background-color: #FFFFFF;
}
It kinda worked on the "light-green page background color" and my fieldset's color is white which what I wanted too. But I noticed that the area where my fieldset is positioned, the background color of the page was white too instead of that light-green. The rest were all light-green except to that area. So I tried creating another fieldset and boom! The same thing happened to the first fieldset - the area behind my fieldset was white again.
I do not understand the exact problem. If you don`t want the whole width of the page to be white just give the fieldset a width and so the background color of the page will remain green.
#fieldset {
background-color: #FFFFFF;
width: 100px;
height: 150px;
}
i made an example:
http://jsfiddle.net/aKGmc/2/
if this does not help you please upload a jsfiddle with it so i can take a look at the problem
Ids (selectors prefixed with a #) should be unique to one single element.
If you want to target more than one element of a category, use a class and the appropriate selector (<div class="something"> and .something {}) or a generic selector (div {}).
That behavior is normal.
You chose to apply the white background to an element (Fieldset) and you got the white background relative to that area. So if that is not ok, you probably want to achieve something else.
I have a navbar with a navbar-wrapper class which makes it floating at the top center of the browser. I'd like to have a rectangle zone behind it filled with blue color. How should I do it?
Consider this page http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse
I'd like to add a blue filled area before body and behind the navbar.
UPDATE
I have managed to do something similar to what I wanted by adding an empty jumbotron at the beginning of the body and by setting
.jumbotron{
margin-top:-90px;
background-color:rgb(20,7,91);
}
The problem is that it has rounded corner and the two top corners leave an annoying white space as you can see http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse
Any idea on how to work around it?
UPDATE
It was easy
.jumbotron{
margin-top:-90px;
background-color:rgb(20,7,91);
border-radius:0px;
}
assuming your navbar-wrapper class is 'navbar-wrapper'
.navbar-wrapper {
background-color: blue;
}
or, if like the example you link to
.navbar {
background-color: blue;
}
The basic idea for this might be using z-index. You said, before the body and behind the navbar.
Try this:
body {
// write body font, font-size, color etc
}
Then you can use z-index to make the navbar float over it (But remember, each element always floats over the body, so you don't need this; but still if you want to use it)
.navbar {
z-index: 2; // 2 to make sure, that others stay under it always
background-color: #hexforblue;
padding: 5px 10px; // to make it a rect.
}
After using this, the navbar will have a rectangular div floating behind.
Note: This will be the background for whole of the div, not for just a small portion of it.
I am trying to create this ribbon effect dynamically using an h1:
I have these two images:
and my goal is to stick these on each end of my h1 tag, use the display: inline; property to add dynamic width. Is there any "right way" to do this and make it work cross browser?
For my testing purposes, the ribbon ends are 40px tall, and 18px wide. I am not sure yet what I am going to do about the shadow, but if you guys can just help me figure out how to get this working, I can make it look nice. (hopefully)
For clarification purposes, here is the (non-working) css I have so far:
h1 {
display: inline;
height: 40px;
background-image: url(images/ribbon/left.png), url(images/ribbon/right.png);
background-position: left, right;
padding: 0 18x;
background-color: #ECECEC;
}
The css above causes the #ECECEC color to bleed behind the ends of the ribbon. Any ideas?
Update:
If it helps, here is a screen shot of what my current css is bringing me. This is a little sensationalized to make the result easier to see. I have added a red background instead of the #ECECEC.
First try
overflow: hidden
It could also be a browser issue:
Border Radius = Background Bleed
EDIT:
Have you thought about not using the images all together and just using pure css
http://css-tricks.com/snippets/css/ribbon/
May not look like you wanted but messing around with the css would fix this.
Let's say I'm making a Valentine's Day app. I want a heart to fill up with pink from 0 to 100 to show one's love for another.
The height of the image will be 102 pixels, and for every % someone is "in love", we will creep up a single-pixel height line.
My approach is as follows: go into Photoshop and remove the 'background' of the inside of the heart, so that the inside is now transparent. The area of the surrounding heart will be painted white. Put on a site with a white background. Put the image on a 102 x (whatever) div, then put another div inside, whose background color is pink. It's then a simple matter of increasing the child div's height.
This is nice, but I can only use it on sites which have a white background, because it's the white that's preventing the area from turning pink. In short, I need a way to fill up this heart while being able to change the background color of the web page.
Create the heart as you normally would making the background transparent and fill in the center. Use that as the background image of a div and position it at the bottom.
The example below shows a heart at 40%.
HTML
<div class="heart-wrap">
<div class="heart" style="height: 40px; margin-top: 60px;">
</div>
</div>
CSS
.heart,
.heart-wrap {
width: 100px;
height: 100px;
}
.heart {
background: transparent left bottom url('/heart.png');
}
Demo: http://jsfiddle.net/UFBjh/
Demo2: http://jsfiddle.net/L5uDp/
Check out this demo. This is probably what you want - http://jsfiddle.net/Rhpyp/
The solution involves drawing out the heart using CSS3 using the technique mentioned in http://www.webfroze.com/css/heart-shape/
And then having an outer div handle the partial hiding of the heart as needed.
The color of the heart as well as the DIV that is used for partially hiding it is editable via CSS.