I have a background image of many colors. Header is a white box and i need to write text over this box. So what happens is through this box, text is clipped and background is seen through this white box. How to do this?
You cab do that with background clip: text, but you have only support in webkit
CSS
body {
height: 100%;
background: linear-gradient(0deg, red,white, blue, pink, yellow, green);
}
h3 {
background-image: inherit;
-webkit-background-clip: text;
color: transparent;
font-size: 80px;
top: 0px;
position: relative;
margin-top: 0px;
padding: 0px;
}
h3:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: white;
z-index: -1;
}
fiddle
Simply use this css code on box:
#box_over {background-color:rgba(255,255,255,0.1);}
Where is 0.1 there is background opacity. You can increase or decrease opacity.
I got your point! Its simple! You can do this with images.
Imagine there is a background colors, and you simply put another div style with image which contains white background with see-trough text! Use photoshop ;)
And also, check this css3 how to do multiple backgrounds in one div:
#box_over{
background:url(clipped_text.png), url(background.png);
background-size:100% 100%;
background-repeat:no-repeat;
}
Related
I have created an ID for my HTML body called #indexbody. I put a background image with CSS using background-image:url("hs2.webp");. Because I Have done it this way, is there a way to change the background opacity of my image without dimming the entire body?
CSS:
#indexbody{
background-image:url("hs2.webp");
background-size: 100% auto;
}
If you put the background-image on the before pseudo image rather than the actual body element you can set its opacity down without that affecting the whole body element.
Here's a simple snippet:
body {
width: 100vw;
min-height: 100vh;
margin: 0;
}
body::before {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://picsum.photos/id/1015/300/300);
background-size: cover;
opacity: 0.4;
position: absolute;
}
<body></body>
There are many different ways to do this. One of the most common is using a pseudo-element. In this case, I used :after to create the background color overtop of the picture then used z-index to make sure my absolutely positioned text elements are layered ahead of the pseudo-element.
#indexbody {
background-image: url("https://dummyimage.com/600x400/000/fff");
/* background-color: rgba(0, 0, 0, .5); --> solution without using psuedo-element */
background-size: cover;
background-position: center;
width: 100%;
height: 500px;
position: relative;
}
#indexbody:after {
content: "";
position: absolute;
background-color: orange;
opacity: .5;
inset: 0;
}
p {
position: absolute;
color: white;
background-color: blue;
z-index: 1;
text-align: center;
}
<div id="indexbody">
<p>absolutely positioned element overtop, unaffected by opacity</p>
</div>
Using the :before or :after CSS pseudo-elements, you apply the div with a background image and set an opacity on it.
I've seen people make designs like this for their website. As you can see those two low opacity blue lights, one at the top right and the other at the bottom left. I am wondering how are they making this in HTML and CSS? I can make PNG out of this, but is there a way that can be done with HTML and CSS? I think it would load faster than a PNG file. Thank you in advance. :)
I tried using this code.
HTML:
<body>
<div></div>
</body>
CSS:
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
div {
width: 100%;
height: 100%;
background-color: #191b1f;
}
div::after,
div::before {
content: "";
display: inline-block;
position: absolute;
background: hsl(199, 56%, 18%);
width: 300px;
height: 300px;
border-radius: 50%;
filter: blur(70px);
mix-blend-mode: lighten;
}
div::before {
top: 0;
right: 0;
transform: translate(50%, -50%);
}
div::after {
top: 50%;
left: 0px;
transform: translateX(-50%);
}
/*With gradient background*/
div {
background: radial-gradient(
circle closest-corner at center 125px,
hsl(199, 56%, 18%),
#191b1f 70%
)
no-repeat;
}
Result:
For this method, the normally used styling is the backdrop filter method. By using that, you can create a frosted glass effect in CSS. First you should create a main div and then a sub div which we should create the backdrop effect. The method which I follows is:
Find a picture with similarity to the background.
Then reduce the brightness of the background image using filter: brightness(48%); and then I use the backdrop-filter: blur(5); to the sub div.
This is the exact same method which I was following for the past few months.
I am having a problem with creating a hover effect with a PNG image and CSS. As the image below shows the image is a triangle notch. I am trying to make the background color extend left from the image and not overlap it as is happening in my example.
Hover Background and Image
.parent-1:hover, .parent-2:hover, .parent-3:hover {
background: #993408 url(/images/brown-notch.png) no-repeat right;
background-size: contain;
position: relative;
padding-left: 10px;
color: #fff !important;
z-index: 1;
}
Is there a way to make the background end where the image starts, so it becomes an arrow and be responsive?
I attempted this but it does not work responsively:
.parent-1:hover::before, .parent-2:hover::before, .parent-3:hover::before {
content: '';
background-color: #993408;
background-position: left;
position: absolute;
display: block;
left: 0;
z-index: -1;
font-size: 1rem;
width: 96%;
height: 100%;
}
Assuming your image is 10px set the width on your :before elements to:
width: calc(100% - 10px);
I've looked at several SO posts about this: I want to darken the current background image by adding an overlay.
#header1 {
background: url("http://lorempixel.com/image_output/cats-q-c-640-480-10.jpg");
background-position:center center;
position: relative;
background-size: cover;
padding-bottom:5em;
}
.overlay {
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
<div class="header">
<div class="overlay">
<div class="jumbotron" id="header1">
<h1>Hello</h1>
</div>
</div>
</div>
Maybe I'm not understanding how to use z-index, or maybe I'm missing something here. The darker background used for tinting isn't showing up. Any pointers?
Use Linear gradient
to darken the background refer to this codepen and this link
<div class="bg-img"></div>
.bg-img {
width: 100%;
height: 100%;
background: url('http://alexcarpenter.me/img/banner.jpg') center center no-repeat;
background-size: cover;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}
#header1 {
background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/
background-size: cover;
}
h1 {
color: white;
background-color: rgba(0, 0, 0, 0.7);
padding-top: 10px;
padding-bottom: 100px;
padding-left: 20px;
padding-right: 20px;
}
<div class="header">
<div class="overlay">
<div class="jumbotron" id="header1">
<h1>Hello</h1>
</div>
</div>
</div>
As intended the h1 acts as an extra visual layer and its padding covers the #header1.
A second solution would be to add the original background image to .header and have the styles from h1 given to #overlay and with a bit of tweaking that should also do the trick.
And yet another possible solution(similar to the second one) you can add the background-image to overlay and have the h1 styles from the example I gave to #header1 or .jumbotron
In addition to the first solution, you should be able to add extra layer by adding a background-color: to overlay. I'm not sure how it will effect the background exactly but from what I'm guessing it should just add an extra layer of color.
Here is a personal example where I used this technique.
Example
#header1 {
background: url("https://www.random.org/analysis/randbitmap-rdo.png");/*Random image I grabbed*/,
box-shadow: "0px 4px 4px 0px #00000040,inset 0 0 0 1000px rgba(0,0,0,.5)"
}
You don't need the overlay if you add a box shadow. The inner box-shadows work as an overlay. You can adjust the opacity by changing the .5 up or down.
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
for your answer, you can visit css-tricks
I guess you would like to completely hide the background image, Then you need to set the value of alpha to 1 in rgba(0,0,0,1)
0.7 defines the transparency level you need the particular element to be shown.
below link explain concept of overlaying with very good examples
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
You can also use this CSS:
filter: brightness(50%);
I need a way to 'append' the style to the same div in css. I know this can be done with jQuery, but I wonder if it'll be possible just using the stylesheet.
My div has a class .myClass, and then later I give it a custom attribute "customAttr". I need background image to be put on top of gradient.
In the example below, I actually specify attribute and class at the same time. In the real thing though, I need to be able to add it at a later point, such that image will appear on top of the previously visible background. Also, I would have many more backgrounds specified to accommodate for older browsers.
http://jsfiddle.net/mgboss/eyw4v82f/3/
div {
height: 70px;
width: 70px;
}
div[customAttr="hello"] {
background-image: url("http://s22.postimg.org/5cvkclhi5/bolt.png");
}
div.myClass {
background: background: linear-gradient(red, blue);
}
Thanks!
CSS gradients are also values of background-image (even if specified with background shorthand), so even with correct specificity of selectors you will have to specify both picture and gradient as multiple background:
div {
height: 70px;
width: 70px;
}
.myClass[customAttr="hello"] {
background: url("http://s22.postimg.org/5cvkclhi5/bolt.png"), linear-gradient(red, blue);
}
.myClass {
background: linear-gradient(red, blue);
}
<div class="myClass" customAttr="hello"></div>
Alternatively, you can add extra images with pseudo elements:
div {
height: 70px;
width: 70px;
position: relative;
}
.myClass[customAttr="hello"]::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("http://s22.postimg.org/5cvkclhi5/bolt.png");
}
.myClass {
background: linear-gradient(red, blue);
}
<div class="myClass" customAttr="hello"></div>
You can do it this way too..
div.myClass {
background: url("http://s22.postimg.org/5cvkclhi5/bolt.png") no-repeat,
linear-gradient(red, blue) ;
}
http://jsfiddle.net/umairorana/6mc2v7mx/
Is this the kind of effect you're looking for?
http://jsfiddle.net/ben220/e3912d78/
HTML:
<body>
<div></div>
</body>
CSS:
div {
height: 350px;
width: 500px;
position: relative;
background: linear-gradient(red, blue);
}
div::after {
content:"";
background: url("tree.jpg") no-repeat;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
The only way I could think of to do this was to add opacity to the background image but there seems to be no conventional way to do this in CSS. You can however use the ::after property was a work-around. This basically allows you to insert content into your webpage without changing the HTML. In this example I've only included one div in the HTML code. The other, which contains the background image, is purely done with css.
I hope this helps.
Ben