I am almost certain that this is not possible to create, but I have to ask. So I have those 3 divs. One is main wrapper, other is green one on the right side, and 3rd is the small one. So what would I like is to make that small div transparent all the way down to wrapper. So that it doesn't have green background, but the smiley one. Don't think it's possible, but then again, I might be wrong. I know I can split the green div in 4 blocks and "wrap" the transparent one, but that won't work because I have border radius on the small one.
UPDATED:
http://jsfiddle.net/9hLf8mcu/3/
Just add this background: url('http://superlifestylecoach.typepad.com/.a/6a0120a9506f8e970b01348158e534970c-pi');
background-position:center right; to your .same_as_blue {
DEMO
It is not possible with pure css as you would need to have the green div to be transparent too, which it obviously isn't. A work around would be to give your small square the same background as the one you want it to have and then use background-position to move the image to where you want it
.blue {
width: 200px;
height: 200px;
}
.blue,
.same_as_blue {
background: url(http://lorempixel.com/200/200/) left top no-repeat;
}
.green {
width: 50px;
height: 100%;
background: green;
float: right
}
.same_as_blue {
width: 40px;
height: 40px;
background-position: -150px top;
}
<div class="blue">
<div class="green">
<div class="same_as_blue"></div>
</div>
</div>
Your fiddle updated - If you move the background:green you will see the little image matches up nicely
I really like Anthony's answer using the duplicated background. Another solution would be to look into the clip and mask features of CSS.
Related
Is it possible to apply a css blend mode to an element in a different div?
E.g, I have a large background hero image in one div. Above that image (in a different div) I have a blue semi-transparent box with text in it. This transparent box is what I would like to apply a blend to, but it seems to not work perhaps because they are not in the same div, like in the example https://css-tricks.com/basics-css-blend-modes/
I am working in wordpress, so it will be a bit hard to re-structure the HTML in order to put the image and the colored box in the same div.
Does anybody know of a trick I can use to achieve this method?
Thanks in advance!
Use mix-blend-mode.
DEMO:
http://plnkr.co/edit/R5TBohMs1jKfsPj7zcXt?p=preview
There are two ways to use blend-modes:
background-blend-mode: If both the background are in same div, then this property can be used.
mix-blend-mode: When you want to blend background of 2 different elements, then you can use the mix-blend-mode property.
code:
HTML:
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
CSS:
div.wrapper {
position: relative;
}
div.first,
div.second {
width: 300px;
height: 200px;
position: absolute;
}
div.first {
background: url(http://images.all-free-download.com/images/graphicthumb/male_lion_193754.jpg) 0 0 no-repeat;
z-index: 9;
top: 0px;
left: 0px;
}
div.second {
background: url(http://images.all-free-download.com/images/graphicthumb/canford_school_drive_dorset_514492.jpg) 0 0 no-repeat;
z-index: 10;
mix-blend-mode: difference;
top: 30px;
left: 120px;
}
Here is a trick:
you can add both divs in a single div.
Then in css You can add the two backgrounds for a single div. This way, you can use the background-blend-mode property to blend the two images.
Here's an example: https://jsfiddle.net/4mgt8occ/3/
You can use :after or :before to create another element in the img-div. Then set the background color with rgba(). The 0.2 here is the opacity of the background color. For the text div, you don't have to do anything about it.
div#wrapper::after {
background-color: rgba(216, 223, 228, 0.2);
display: block;
width: 100%;
height: 100%;
content: ' ';
}
I'm new to design and I need to place the two imgs beside each other, with some space between.
This is what currently my site looks: Dont worry about the cut off, it is suppose to be like that. I need to prepare this to allow me to later on add responsive elements on to it so I cannot use absolute positions or anything that will lock the image into place.
Both Images are the same height at 125 px. When I float both the pictures left or right, the pictures appear 95% cut off at the edges of my webpage. I dont understand why it's being place underneath each other, there seems to be plenty of room for the second image to be on the same level.
Heres what I have so far: "navi" is my container or wrapper... mainlogo and slidertop i used to experiment and currently have no code under each.
<div id="navi">
<div id="mainlogo"><header></header></div>
<div id="slidertop"><header id="topad"></header></div>
<div style="clear:both"></div>
</div>
#navi{
height: 130px;
}
#mainlogo{
}
#slidertop{
}
This is how Im calling my images:
header{
background: url(../Images/logo1.gif) no-repeat 15% 0px;
border: none;
height: 125px;
top:100px;
}
header#topad{
background: url(../Images/TopAd.gif) no-repeat 80% 0px;
border: none;
height: 125px;
vertical-align: middle;
}
In the original code you posted, I think the divs are all 100% of the available width, and they will appear on top of each other on the page. You can see this for yourself if you temporarily add a coloured border around each div so you can see where they are.
If you want them side by side, you have to add styles to accomplish this. For example, you could float them and specify the widths:
header { width: 45%; float: left; }
header#topad { float: right;}
E.g.: http://codepen.io/anon/pen/ynuoa
Have you tried floating the divs?
#mainlogo{
float: left;
}
#slidertop{
float: left;
}
I have those 2 divs nested into the yellow div, and as you can see the green one is getting under the red one. I would like the green one to sit to the right of the red one. How can I do that? Thanks a lot
The screen shot is at:
http://i.stack.imgur.com/7cbCI.png
here is my code:
.reddiv {
height: 100px;
width: 150px;
background: red;
float:left;
margin:5px;
}
.greendiv {
height: 70px;
width: 300px;
background: green;
}
Add float:left to both red and green div and you should be set.
Be warned though that if you need to have another content below yellow div, your content might seem to ignore the height of your yellow div. To tackle that issue, easiest way is to add a third div with clear:both inside the yellow div
im trying to make a facebook like blue bar.
So, i noticed they make a blue bar with width 100%, and make a new div under it which selects half of the div like this(the light blue part is the new div)
So, then the text or link i put under the new div is alligned just like i want it.
How can i achieve this?
My HTML
<div class="topBar" >
<div class="bar_frame">
fuuu
</div>
</div>
And here is my CSS
.topBar {
background: #3b5998;
top: 0;
height: 36px;
width: 100%;
background-position: center;
position: fixed;
}
.bar_frame{
/* The new div code must go here but i dont know how to do this */
}
This will work. I'm assuming you just need to center a fixed-width div in its parent element? This is exactly how Facebook does it in your example, and this is how it is done in many cases:
.bar_frame{
width: 981px;
margin: 0px auto;
}
Demo fiddle
-edit- sorry i put in a lot of useless info. In short i want a static div that i can set the left and right of (from top to bottom) which i can fill and it should be on top of my background image but below the text in the sidebar.
long version:
I am hacking something in wordpress. I need the sidebar to have a green background. Theres two problems. 1) Is if i make #secodary green i have a TON of whitespace on the left and it looks wrong (but to the right the menu also looks wrong)
2) I need the color to go to the bottom of the page. I dont know how long a page will get.
I think using a fixed place div that is from X to Y (maybe 80 to 300) green. I just dont know how to do it as my css and html-fu is weak. I'll note that i have a background image but the menu is on white which is coming from something else. I dont know if its from #main (post+sidebar) or #primary(post) since changing primary bg color did change the sidebar menu (i bet the theme is using float somewhere...)
Instead of having that tiny little thing green i want it from the left (where the red starts) to the right where i marked with my poor paint.exe job. Also the green should go all the way down. The black circle in the css shows that it isnt simple to do in css which is why i want to hardcode a green box into it
Ok, here is the simplest way to code a position: fixed; div. (with words and white areas as shown in your paint img)
HTML:
<div id="greenBox">
<p>About us</p>
<div class="white">
</div>
<p>Services</p>
<div class="white">
</div>
</div>
CSS:
body /*jsfiddle only, so you can see the fixed effect*/
{
height: 1000px;
background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
}
#greenBox
{
position: fixed;
height: 400px;
width: 250px;
background-color: #008000;
}
.white
{
background-color: #fff;
width: 90%;
height: 100px;
margin: 0 auto;
}
Example for you here.
I made a JFiddle for you here;
http://jsfiddle.net/sfnGH/
#secondary{
position: absolute;
background: green;
top: 0;
left: 0;
height: 100%;
width: 300px; /*or however long you want it to be*/
z-index: 999; /*So it stays on top. I think that's what you wanted?*/
}
Is that what you wanted?
Edit: As pointed out in a comment to my answer you asked for position: fixed;
Before you decide to use that as a left bar there is at least one thing to keep in mind.
It will stay in the fixed position when scrolling. This means, that if you have a lot of content in the sidebar you would never see the bottom part of it on smaller screens.
For a more thourough explanation of differences in positioning you can check out this link: http://css-tricks.com/1191-absolute-relative-fixed-positioining-how-do-they-differ/
Whatever you decide to use I hope you end up with an awsome site.