I would like to blend an image with a solid colour using CSS. How can this be done?
This is what I've got so far:
header {
width: 900px;
height: 60px;
background-image: url(../images/banner.jpg);
background-color: rgba(51,102,153,0.5);
}
It's not working though!
I just can't get my head around this.
Thanks for any help!
The currently accepted answer and it's alternative indeed work. But both use background-image's for actual content. This method uses an img tag.
HTML
<div class="blend">
<img src="http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg" alt=" " />
</div>
CSS
.blend {
background: red;
display: inline-block;
}
.blend img {
opacity: 0.5;
}
See this fiddle.
Use two divs, see this fiddle:
HTML:
<div id="wrapper">
<div id="content"></div>
</div>
CSS:
#wrapper
{
background: url("http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg") no-repeat;
}
#content
{
background-color: yellow;
opacity: 0.5;
width: 477px;
height: 318px;
}
The currently accepted answer works, but it's semantically incorrect and would benefit from some optimisations.
You can use the pseudo after element for this, so you don't need to introduce additional markup for this. So the markup remains this:
<div id="content"></div>
The CSS is verbose, but more expressive. I don't like that the "wrapper" contains the actual content (image), while the "content" is just a simple color. Also there is no need to fade the whole div, but you can use the alpha channel for the color.
#content {
position: relative;
background: url("http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg") no-repeat;
width: 477px;
height: 318px;
}
#content:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255,0,0,0.5);
pointer-events: none;
}
jsfiddle
Related
i have a parent div with background image and another div inside it. i want background image of parent div only be seen in child div (like an open window).
.parent {
width:800px;
height:600px;
background-image: url("https://via.placeholder.com/150");
}
.child{
width:50%;
margin:auto;
}
<div class="parent">
<div class="child"></div>
</div>
From what I understand, you want an image in backgound and you want to display it inside a child div.
To implement this, you can use WebKit's image masking.
.demo {
width: 200px;
height: 250px;
}
.demo {
position: relative;
float: left;
margin-right: 30px;
}
.demo:before {
content: "";
display: block;
position: absolute;
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg)
no-repeat;
opacity: 0.1;
transition: 0.7s;
}
.demo .has-mask {
position: absolute;
clip: rect(10px, 190px, 190px, 10px);
}
.demo:hover:before {
opacity: 0.4;
}
<div class="demo">
<img src="https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" alt="" class="has-mask">
</div>
More details here: https://css-tricks.com/clipping-masking-css/
Sadly, I can not comment yet. But as far as I understand your question, you want to mask the image of the parent by the child.
Maybe you can achieve this by using the information provided here:
https://css-tricks.com/clipping-masking-css/
But maybe, if you visualize your problem, there is no need for masking or cliping and can be solved way easier.
use
.parent {
width:800px;
height:600px;
background-image: URL(...);
background-size: 100% 100%;
}
I am a pega developer never spend a lot of time in working on webpage.I want to create a pdf .In Pega that will be created from a html page.i need to keep the wate mark draft as background?
I tried following code but when im including it in my code it is creating as separate div and next divs are coming on the next page?and also the draft is not coming in the background middle ?`
<div style="position:absolute;z-index:0;background:white;display:block;min-height:50%; min-width:50%;color:yellow;">
<p style="color:steelblue;font-size:120px;">DRAFT</p>
</div>
`
This is another way. hope this helps
div{
position: relative;
z-index: 0;
background: white;
display: block;
min-height: 40%;
min-width: 100%;
color: yellow;
border: 2px solid black;
height: 200px;
}
p{margin:0}
div:after{
content: "DRAFT";
color: steelblue;
font-size: 120px;
/* text-align: center; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity:0.1
}
<div >
</div>
Try setting a background-image in the CSS
body {
background-image: url('https://example.com/image.jpg');
}
or in the HTML as so
<body style="background-image: url('https://example.com/image.jpg');">
Use CSS to give the body the background:
body{
background-image: url('../watermark.png');
background-size: contain; /* Make background take entire page */
background-position: center; /* Center Background */
}
I'm trying to make it so that I have 2 divs, one on the top part of the screen with a name, and one on the bottom of the screen with some buttons. If you hover over 1 of the divs, they should both become visible. I found out about using the + and the ~ to make the second one appear while hovering over the first div, but can't find any way to do it the other way around. Here's what I have now: http://codepen.io/anon/pen/ojpqao
html:
<div class="bg">
<div class="topbar"></div>
<div class="bottombar"></div>
</div>
css:
.bg {
background-color: red;
width: 200px;
height: 200px;
}
.topbar {
width: 200px;
height: 20px;
background-color: green;
}
.bottombar {
width: 200px;
height: 20px;
background-color: green;
top: 180px;
position: absolute;
}
.topbar:hover, .bottombar:hover, .topbar:hover + .bottombar {
background-color: blue;
}
I would just change up your markup a little, since your bottom bar is absolutely positioned anyway:
<div class="topbar">
<div class="bottombar"></div>
</div>
Then you can do:
.topbar:hover,
.topbar:hover .bottombar {
background-color: blue;
}
http://codepen.io/inorganik/pen/gaoeEQ
Unfortunately I believe there is no CSS solution to this, see [this page] (Is there a "previous sibling" CSS selector?)
You probably need to do it in Javascript
I've been looking at this question and I'm having trouble getting my progress bar to work exactly the way it should.
HTML:
<div id="progress_bar">
<div id="bar_color1">
<div class="upload_status"></div>
</div>
<div id="bar_color2">
<div class="upload_status"></div>
</div>
</div>
CSS:
#progress_bar {
border: solid 1px #000;
height: 20px;
width: 300px;
display: block;
position: relative;
text-align: center;
}
#bar_color1 {
background-color: #FFFFFF;
color: #000000;
width: 100%;
}
#bar_color2 {
background-color: #000000;
color: #FFFFFF;
width: 0px;
}
#bar_color1, #bar_color2 {
height: 20px;
position: absolute;
top: 0;
left: 0;
}
As I dynamically increase the percent of #bar_color2 and update .upload_status, I end up with something like this:
Whereas I want the text to remain centered one on top of the other, so when the progress reaches half way the text appears to change color... I've tried various things, swapping divs around, adding another parent, but I just can't seem to figure it out. Any ideas?
I know that this doesn't really help your question, but using the native HTML <progress> element will save you a lot of headaches when interacting with it using JavaScript if you're targeting relatively modern browsers.
edit: The stuff I posted earlier doesn't work, but this does:
http://jsfiddle.net/mYEM3/8/
Just copy from there.
You can just change the color of the text that is on the progresive loading bar(not the middle one/the white one) to black and the annoying percentage should dissapear.
And about when the progress reaches half way the text is supposed to change color problem, i think you can do this as well with the change color thing.
Here's a rough idea that will work:
HTML:
<div id="progress_bar">
<div id="bar_color1">
<div class="progress_text1">50%</div>
</div>
<div id="bar_color2">
<div class="progress_text2">50%</div>
</div>
</div>
CSS:
#progress_bar {
border: solid 1px #000;
height: 20px;
width: 300px;
display: block;
position: relative;
text-align: center;
overflow:hidden;
}
#bar_color2 {
background-color: #FFFFFF;
color: #000000;
width: 50%;
}
#bar_color1 {
background-color: #000000;
color: #FFFFFF;
width: 50%;
}
#bar_color1, #bar_color2 {
height: 20px;
position: relative;
float:left;
overflow:hidden;
}
.progress_text1{
position: absolute;
left:100px;
width:100px;
text-align:center;
}
.progress_text2{
position: absolute;
right:100px;
width:100px;
text-align:center;
}
I Think its only possible with javascript.
Its not complete, and only a little example with changing the "color" after 50%, but the trick is to using special "layers" for that: http://jsfiddle.net/J92Bv/
<div id="progress_bar">
<div class="progress_left" style="width: 50%;"></div>
<div class="progress_right" style="width: 50%;"></div>
<div class="text_1">50%</div>
<div class="text_2">50%</div>
</div>
You must change the z-index if the "white" text overlaps with the first progress-bar layer. In combination and a little more time you can create an progressbar, there change the color correctly when the bar appears to the text. I think here you must use a little helper layer there is positioned after 50%.
I'm trying to set quite a complex border image to my website. I can't make it a background-image because it's actually a border for a slide and the slide content has to go UNDER the border when it actually slides, and with background image I assume the content will just go above it.
So, basically I need help how to make this a border image for a div maybe. OR if there is a better approach then making this a border, let me know please.
Thank you.
Doing a transparet png image is not html, you need to do it with a software such Photoshop or Gimp else you can do it with messing around with divs
<style>
.screen {
height: 422px;
width: 820px;
}
.back {
position: absolute;
height: 422px;
width: 820px;
background-image:url('test.png');
}
.content {
position: absolute;
height: 320px;
width: 672px;
margin-left: 73px;
margin-top: 56px;
border-radius: 50px;
overflow:hidden;
}
</style>
<div class="screen" >
<div class="content" >
put here what ever you want to put inside
</div>
<div class="back" ></div>
</div>
this work with me with your image
You could use the before/after psuedo elements to attach your unusual "border" as a background image.
div.slide {
background: yellow;
position: relative;
}
div.slide:before {
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
background: url(slide-bg.png) no-repeat;
background-size: 100% 100%;
z-index: 1;
}
http://jsfiddle.net/kTgJJ/
The demo uses an opaque to transparent gradient so you can see the effect. Your image just needs to have transparent areas for the text to show through, and opaque areas where it shouldn't. Add paddings to the .slide as appropriate.