I have div wrapper and the background is white, I also have a body background (its an image) I want to have a div inside my wrapper with no white background, basically I am looking to make that div transparent to the wrapper background.
<div style="background:none;">ghjhjghjghj</div>
Any suggestions?
Edit:
I'm trying to make the body background appear trough a div that is inside another div that have a white background. Is this possible?
Transparent background color works in this simple example...
http://jsfiddle.net/rD93B/1/
More HTML/CSS would help identify the problem you're having.
And updated jsfiddle with white background color on container div...
http://jsfiddle.net/rD93B/3/
Another update ....
http://jsfiddle.net/rD93B/6/
This shows the background color of the container div without showing the background image
CSS
div#outer {
background-color: green;
background-image: url(http://static4.grsites.com/archive/textures/red/red001.jpg);
width: 200px;
height: 200px;
z-index: 1;
}
div#inner {
background-color: inherit;
background-image: none;
width: 100px;
height: 100px;
border: solid 2px yellow;
color: yellow;
z-index: 0;
}
HTML
<div id="outer">
<div id="inner">
</div>
</div>
Use the background-color property and set it to: transparent on your inner div.
<div style="background-color: transparent;">ghjhjghjghj</div>
Related
I am newbie in css world and I am trying to make responsive design like this using bootstrap,css and html5.
but ended up like this.
how to create same curve in div displaying in image 1?
Note : Red color in second image is for better explanation.I have to apply white color anyway
You should use percentage to define the border-radius, in this way the curve will look like the one you want.
border-radius: 100%
http://codepen.io/FezVrasta/pen/XKvkJX?editors=1100
To get curved edges use border-radius, the background can be achieved with linear-gradient
jsfiddle: https://jsfiddle.net/ojhcbepz/
html, body {
height: 100%;
}
div.outer {
width: 600px;
height: 250px;
background: linear-gradient(to bottom,blue 50%,red 0px);
padding: 20px 0;
overflow: hidden;
}
div.inner {
height: 100%;
border-radius: 50%;
background: white;
margin: 0 -50px;
}
<div class="outer">
<div class="inner">
</div>
</div>
well a simple solution maybe... use a small red dot image and repeat it in outer div and inner div has border-radius: 50%
<div style="background-image: red url("http://i.imgur.com/dXis68u.png") repeat;">
<div style="background-color: white; border-radius: 50%; text-align:center;" >
ABCDEFGH
</div>
</div>
(You can add two 's of height as you want to get those top and bottom borders)
This is my code ( if the image has an height higher than 100px then show only the first 100px of the image and hide the rest ):
HTML:
<div>
<img>
</div>
CSS:
div{
max-height:100px;
overflow:hidden;
}
Now, I need to add a border of 5px:
img{
border:solid 5px #555555;
}
but if the image has an height higher than 100px, the bottom border doesn't appear. How can I resolve that ?
That's because the div's overflow is hidden. Instead, you should set the border on the div. This way, the div will only take up the height of the image but after 100px, it'll keep the border but the image won't show past that. You will need to adjust the width of the div to fit the image, though.
<span><img src="" /></span>
span{
max-height:100px;
border:solid 5px #555;
overflow: hidden;
display: inline-block
}
img {
width: 200px; /* image width */
height: 200px; /* image height */
}
Using a span with display: inline-block you no longer need to set the width of the outer container.
Issue: when image size is less than 100px, there is a small gap between the image bottom and outer container.
demo
Take a peek if this is what you need:
(1st try) http://jsfiddle.net/Vn4PM/
(last try) http://jsfiddle.net/Vn4PM/11/
HTML (with sample graphics):
<div>
<img src="http://www.dummyimage.com/100x150/ffff00/fff" />
</div>
<div>
<img src="http://www.dummyimage.com/100x50/ffff00/fff" />
</div>
CSS:
div {
max-height: 100px;
border: solid 5px #555555;
overflow: hidden;
display: inline-block;
}
img { margin-bottom: -5px; }
--
display: inline-block, and border added to div so border will wrap around the image
margin-bottom added to img so extra gap is hidden
Consider this simple markup:
<body>
<div style="border: 2px solid navy; position:absolute; width:100%; height:100%">
</div>
</body>
In the browsers I've tested (Firefox and Chrome) the right and the bottom parts of the border seem to lie outside the window area, since they are not visible. How should I fix my markup or stylesheet so that the div's border is completely visible while the div occupies the whole available area (i.e. its sizes are 100%/100% or equivalent)?
Because the border rests outside of the width of an element, if your body width is 100%, the border will be outside of that and thus not visible. Take a look at the box model:
alt text http://www.codeweblog.com/upload/b/basic-knowledge-of-css.png
To set a border for your page, just don't define the width and height:
body
{
border: 2px solid navy;
}
An alternative would be to do a faux border, setting the HTML background color to your border color, adding some padding, and then setting your body to the normal page background color:
html
{
background-color: navy;
padding: 2px;
}
body
{
background-color: #fff;
}
Or if you are wanting to accomplish this using a div:
<body>
<div class="containerDiv">
<div class="theDiv">
Content here.
</div>
</div>
</body>
...
div.containerDiv
{
background-color: navy;
padding: 2px;
}
div.theDiv
{
width: 100%;
height: 100%;
background-color: #fff;
}
I have the following DIV structure:
<div id="parent">
<div id="child"></div>
<div id="child2"></div>
</div>
I want to apply one half opaque background into the parent DIV, and one fully visible background to the child DIVs. However, it seems that the child will take over the parent, so, I have now no idea how to come over with this.
EDIT: Some more clarification.
I have a jQuery draggable "window" made of DIVs. Inside it, I have a progress bar with
relative position like:
position: relative;
left: 16px;
top: 16px;
This way the progress bar will be at 16-16 of the window (not the screen) and the progress bar moves correctly along with the window.
However, the progress bar has texture on the top. Take a look at this example:
<div style="background: url('texture.png'), url('empty.png'); width: 256px;">
<div style="background: url('progress.png'); width: 33%;"></div>
</div>
There's an opaque texture applied to the whole progress bar element, for example, if the percentage of this progress bar is 33%, then it looks like xxx------ where x denotes the flowing green bar and - is empty. The texture must be applied to both x and -, but currently the image of x takes place over the texture.
I can't really use Z-index and/or position absolute to position the child elem on the top, because of the relative positioned approach.
I don't know whether I understoood your question correctly, but aren't you looking for CSS3 RGBA colours?
p { color: rgba(0,0,255,0.5) } /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */
Reference: 4.2.2 RGBA color values
Here is the progress bar code I use:
To change the percentage, just change the cover class' postiion (e.g. left:80%) and of course the text percentage both of which are in the HTML. Also, it uses a semi-transparent png for the bar image, so you can change the bar background color #888888 in this case to match whatever color you desire.
Note: the files are hosted on tinypic and it's been a little slow for me lately, so give it a few extra seconds to see the images.
CSS
.wrapper {
background: transparent url(http://i50.tinypic.com/2a65xtf.png) no-repeat scroll 0pt 0pt;
width: 216px;
height: 25px;
position: relative;
}
.bar {
background: #888888 url(http://i49.tinypic.com/2cdzyj9.png) repeat scroll center center;
overflow: hidden;
position: absolute;
display: block;
width: 200px;
height: 15px;
top: 6px;
left: 8px;
text-indent: -30px;
}
.cover {
background: transparent url(http://i47.tinypic.com/zyfq61.png) repeat-x scroll 0pt 0pt;
position: absolute;
display: block;
width: 200px;
height: 15px;
top: 0px;
}
.bartext {
position: absolute;
display: block;
top: -0.2em;
font-size: 12pt;
font-weight: bold;
color: #ffffff;
}
HTML
<div class="wrapper">
<span class="bar">
<em class="cover" style="left:50%">
<span class="bartext">50%</span>
</em>
</span>
</div>
Since the children are divs, they will fill to the maximum width they can, which so happens to be the width of the parent. As a result, child and child2 will cover all the area the parent fills. To get some of the parent to show around the children, try setting the size of the children to something less than that of the parent, or try adding padding to the parent.
this is the solution for IE, the bold pieces of code are the magic ones:
<style type="text/css">
#parent { background: red; opacity: .5; filter: alpha(opacity=50); width: 100px; height: 100px }
#child1, #child2 { margin: 10px; position: relative }
#child1 { background: blue }
#child2 { background: green }
</style>
<div id="parent">
<div id="child">lorem
<div id="child2">ipsum
</div>
To be cross-browser I would suggest using an alpha PNG in the parent's background, making life much easier.
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.