I've got a problem. I want a transparent background for the content div. But not all content in it. I can't get this working:
<div class="notTransparent"> <div class="transparent"></div> content </div>
Is there another work around??
CSS rgba
http://www.css3.info/preview/rgba/
http://www.css3.info/preview/opacity/
I think I have done this before (although it was ages ago). What you do is have a div with display: relative, then another div within that with display: absolute, left: 0px, top: 0px, width: 100% and height: 100%. Maybe apply z-index: -10 (to put this behind all other content). You then have the content within the top level (relative) div as normal. Give me a few minutes and I will work out the code for ya...
Ok done that - try the following:
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.opaque {
position: relative;
}
.content {
position: absolute;
left: 10px;
top: 10px;
}
<div class="opaque">
<div class="transparent">
<img src="/Images/header1.png"/>
</div>
<div class="content">
Hello world!
</div>
</div>
Unfortunately I cannot find a way to place a relative element over the transparent div. If anyone finds a way then please paste the code here. By the way there is actually no need to specify any z-indexes.
I also ran into inheritance problems with transparency a while back, this did the trick for me: http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack (demo).
Related
I have an image (picture of a lawn) styled with the following:
img{
width: 100%;
height: 40%;
position: fixed; <!-- top of page-->
}
I have an <h1> Putnam Lawn Care</h1> that I would like to have overlap and be centered in the image, but am unsure how to do this with css (I have tried position:fixed; top: 20%; left: 50%; but this puts the 'P' of 'Putnam Lawn Care' at 50% so this is also not centered) ? Also I am unsure if fixed positioning is correct here, should I be using absolute? Thanks in advance for any help!
Here's with a dynamic image size and wrapping element.
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: block;
margin: 0;
}
.wrap {
position: relative;
float: left;
}
<div class="wrap">
<h1>Loreum!</h1>
<img src="https://picsum.photos/300/200" alt="Loreum Pics">
</div>
I hope this will work. This can place the h1 tag in 100% width and text inside that will be center aligned.
h1{
position:fixed;
top: 20%;
width:100%;
text align: center;
}
Since you used position:fixed for the image, it is better to use fixed position for <h1> also.This will help to stick the <h1> always with image.
why not just put both the img and the h1 tag in an enclosing div, and then do the absolute positioning on that div - this will be more maintainable because you won't have to be setting position: absolute on multiple elements
is there any way to make single page website without position absolute? Because when I want to variable height of containers, absolute position is little bit awkward. I mean when I insert more content to one container, the other above it should move down. I've tried position static and relative, but it didn't work for me.
Now my css looks like:
<style>
#header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;}
#main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;}
#about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;}
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;}
</style>
<body>
<div id="header">
content....
</div>
<div id="main">
content...
</div>
<div id="about">
long content which is covered with next div, because its "top" atribute settings
</div>
<div id="contact">
div which covers previous one's end
</div>
But when some container needs to be longer, problem is here..
Thanks for any help!
That depends on the style of your website. Of course you can set up anchors and have a one-page scrolling website, but I don't think that answers your question.
My suggestion is to try using absolute positioned elements as containers, and have your actual template inside them.
It would help if you provided some actual code or a specific issue you're having, as it's currently too vague.
I'll provide an answer to what I think you might be asking, though it isn't clear. I hope this isn't too basic.
Ditch the position property altogether.
Just have a div (which is by default 100% width) as your header at the top of your html. The content should be in another div below that.
Divs by default have 100% width, and their height is dependent on the height of their content. They will grow to accommodate taller content. These behaviors are because they have the property display:block .
You've used % which, if I remember correctly, is relative to the parent element. vh (viewport height) is relative to the height of the screen (100vh is the full height of the screen).
I added the background-color just so it's easier to see.
<style>
#header {
background-color: #777;
height: 20vh;
}
#main {
background-color: #999;
height: 80vh;
}
#about {
background-color: #777;
height: 100vh;
}
#contact {
background-color: #999;
height: 50vh;
}
</style>
I have a left panel with fixed position(it's always on the left side, nomatter how much you scroll) and also few elements in that left panel. On a certain event a mask appears(it goes over everything because position:fixed; z-index: 102).
My goal is when X event fires and the mask come up, to show up the holder element over the mask.
Here is a fiddle showing my problem: JSFIDDLE
Here is my HTML:
<div class="leftpanel">
<div class="just-random-elem" style="height: 30px;">just an element to move the holder abit down</div>
<div class="holder">asdasdas</div>
</div>
<div class="mask"></div>
<div style="height: 9999px;">Just to make sure both mask and leftpanel are with fixed positions.</div>
and here's the CSS:
.mask {
opacity: 0.85;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 101;
background-color: #000;
}
.leftpanel {
width: 250px;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: red;
padding: 15px;
}
.holder {
width: 230px;
height: 90px;
background-color: #fff;
z-index: 99999; <<<<<<<<<< This is NOT working!
}
Your .holder element is no positioned, so z-index simply has no effect on it. You need to add a position value different from the default static – relative will do.
http://jsfiddle.net/DJA5F/4 works that way in every browser I tested – except Chrome. Can’t spontaneously say if Chrome is handling stacking contexts correct here and the others are not – or if it’s the other way around.
Works in Chrome as well if you put #mask into .leftpanel: http://jsfiddle.net/DJA5F/5 – might not be the nicest workaround, but since it’s postioned fixed, it does not actually matter, since the orientation for fixed is the viewport.
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 8 years ago.
Simple as it may look I need to create a background for a website with a container that would be semi-transparent. If I add opacity: 0.5; inside of the #content I will end up having the entire container, with all the widgets and letters going ghost. What should I do to apply transparency only to the background image? One answer would be to add transparency to the picture inside of PS but still I am curious.
#content .container {
background:url(images/menu_bar.png) left top repeat-y !important;
}
Give this a try:
#content .container {
width: 500px;
height: 100px;
background: url(../images/menu_bar.png) left top repeat-y rgba(0, 0, 0, 0.5) !important;
}
The 'a' in rgba sets the opacity of the color which is 'rgb'. Of course you can set the values to your liking though. If this helps, click the checkmark ;)
Also, don't forget to set the width and height of the image.
One way around the issue is using the position attribute and the z-index attribute. The element you want to be transparent will be the one underneath and then the opaque content will be positioned on top of it.
example:
#transparent-box {
position: absolute; top: 10px; left: 10px;
z-index: 1;
}
#opaque-content {
position: absolute; top: 20px; left: 20px;
z-index: 2;
}
caveat:
When you use this method, you have to bear in mind the indentation/padding you want your content to have and then position it appropriately.
Hope that helps.
You have an interesting problem - the likes of which always have interesting solutions. I'm a big fan of CSS myself and I've tried to mimic the behaviour you need with a few CSS properties here : http://jsfiddle.net/Tax4w/
However, you can always tweak it to suit your needs if this is not exactly what you'd need.
Note: It does look the first time that the text is transparent as well but if you notice carefully it is not
HTML:
<div class="container">
<div class="inner-container">
<p>I am a big cat</p>
<p>I am a big cat</p>
<p>I am a big cat</p>
<p>I am a big cat</p>
</div>
</div>
CSS:
.container{
width:500px;
height:500px;
background-color:#eeeeee;
position:relative;
}
.inner-container:after{
content:"";
background: url('http://placekitten.com/500/500') left top no-repeat;
width:500px;
height:500px;
opacity:0.5;
position:absolute;
left:0px;
top:0px;
}
.inner-container{
width:500px;
height:500px;
}
p{
font-size:20px;
}
You can do something like this:
HTML
<div class="wrapper">
<div class="transparent"></div>
<div class="content">Text goes here</div>
</div>
CSS
.wrapper {
position: relative
}
.transparent {
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
z-index: 1;
}
.content {
position: relative;
z-index: 2;
height: 100px;
width: 100px;
}
That will separate out the background opacity and the content opacity. The absolute positioning will ensure that the transparent div covers the entire parent div. Hope this helps!
What's the best way (if any) to make the inside box transparent so the image can be seen with no opacity (clear image) and the rest of the outer box opaque. So far this is what I'm doing:
<style>
#a {
background-color: black;
float: left;
} #b {
opacity : 0.4;
filter: alpha(opacity=40);
} #div {
position: absolute;
height: 30px;
width: 30px;
top: 90px;
left: 90px;
border: 1px solid #FFF;
background: transparent;
}
</style>
<div id="a">
<div id="b">
<img src="http://clagnut.com/images/ithaka.jpg" />
</div>
</div>
<div id="div"></div>
Any ideas? thx
The maximum opacity of an element is the opacity of its parent element. So if div#b has an opacity of 40%, if his children have 100% opacity in style they will also be 40% absolute opacity.
To accomplish what you're describing (at least what I think you're describing), one way could be to have both the transparent wrapper and the image children of a parent div with relative positioning. You can absolutely position both of the children inside of that wrapper so that the image shows up on top of the transparent box.
Edit: Here is the code for the effect you are describing. My example has a 480 x 320 image, and a 30-pixel border:
<style>
#back {background-image:url(mypicture.jpg);
width:480px;
height:320px;
position:relative;}
#middle {position:absolute;
width:480px;
height:320px;
background-color:#000;
opacity:0.4;
filter:alpha(opacity=40);
top:0;
left:0;}
#front {position:absolute;
width:420px; /* 30px border on left & right */
height:260px; /* 30px border on top & bottom */
background-image:url(mypicture.jpg);
background-position:-30px -30px; /* compensate for the border */
top:30px;
left:30px;}
</style>
<div id="back">
<div id="middle">
</div>
<div id="front">
</div>
</div>
If I understand you correctly, try using just one div (i.e. get rid of the outer one with ID "a") and setting a colored border around it. Or you could get more flexibility by "faking" a border using 4 divs for the left, right, top, and bottom edges and 4 more for the corners.
It's kind of hard to know what you mean without an example page, or screenshots of what you expect and what you're actually getting.
EDIT: I was about to edit in basically the same thing Rex M wrote. Here's another (although idealistically inferior) way to do it:
<style>
#a {
float: left;
position: relative;
}
div.overlay {
opacity: 0.4;
background-color: black;
position: absolute;
}
#t {
left: 0; top: 0; height: 90px; width: 450px;
}
#b {
left: 0; top: 120px; height: 218px; width: 450px;
}
#l {
left: 0; top: 90px; height: 30px; width: 90px;
}
#r {
left: 120px; top: 90px; height: 30px; width: 330px;
}
</style>
<div id="a">
<div id="t" class="overlay"></div>
<div id="b" class="overlay"></div>
<div id="l" class="overlay"></div>
<div id="r" class="overlay"></div>
<img src="http://clagnut.com/images/ithaka.jpg">
</div>
If you want to be sure that the images have a certain color for a background, you could just as well stick a background to all IMG-elements in your stylesheet:
div#a img { background: #FFF; }
Anyhow, the filter-property in CSS should not be relied upon, as it is not part of the official specifications for CSS 2.1.
I might have misunderstood the question, though. Could you rephrase it or provide pictures of expected results?
To follow on what Rex M said, you'll need to change things so that the non-transparent elements aren't children of the transparent elements.
You can use absolute or relative positioning to line up your "border" with the picture, although this can often have inconsistencies between browsers.
The most painless way off the top of my head is to use javascript to get the top and left pixel locations of the image and set the top/left css properties of the border to match (and set the size of the border to that of the image).
UPDATE:
The asker showed an example of what he is trying to recreate. In the example linked, the shaded areas (the "not selected" area) of the picture is created by 4 divs.
The top and bottom divs are the full width of the image, and are set to have a height that is the difference between the top/bottom of the selection box and the top/bottom of the image respectively.
The side divs have height and width modified so that they fill in the "side areas" of the image.
The sizes are updated via a mousemove event.