I have an image in HTML
I want to give linear gradient to it. I know how to give linear gradient to a pic pulled in CSS. But can we do the same if we have an image pulled in HTML without giving it inline CSS?
If i have understood correctly you can do that by adding the style attribute to the image and then add the css inside that.
As far as I understand your question you need the following:
<div class="container">
<img class="image" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg" />
<div class="grad"></div>
</div>
.container {
position: relative;
}
.image {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 200px;
}
.grad {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 200px;
background: linear-gradient(
to right,
transparent 0%,
rgba(255, 0, 0, 0.5)
);
}
https://jsfiddle.net/whjptge1/
Please correct and share your fiddle if your question addresses the different problem
Related
I'm a total newbie. And I ran into this problem. Alas, I did not find a definite answer on the net, so I decided to turn here.
The task is that I need to overlay the pictures on top of each other, so that it looks like in screenshot No. 2, i.e. we have a yellow spot overlay, and a full size image that needs to be cropped.
From what I know, I've tried everything. I ask for help and do not throw tomatoes. Thanks in advance
Example code (html, css):
<p class="card">
<img class="one" src="/" alt="123">
<img class="two" src="/" alt="123">
</p>
.card {
position: relative;
z-index: 10;
width: 100%;
}
.one {
position: absolute;
width: 350px;
top: 50px;
left: 55px;
z-index: 5;
}
.two {
position: absolute;
width: 350px;
left: 20px;
top: 25px;
z-index: 2;
}
Use mask image property to mask like that shape and use position:absolute and do Further
-webkit-mask-image: url(---.png); //use the image shape to mask
mask-image: url(---.png);
-webkit-mask-size: 70%;
mask-size: 70%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
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'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'm trying to achieve the background effect on this website:
http://mountaintheme.com/themeforest/mountain/home.html
The background pictures seem to be covered in a dotted overlay sort of thing.
Is there a way to create this effect with CSS only?
A little bit late, but here is a solution that uses just CSS to create the dotted overlay using a pattern created with radial-gradient.
.image {
width: 800px;
height: 600px;
position: relative;
background: url('https://upload.wikimedia.org/wikipedia/commons/6/6e/Rathong_from_Zemathang2.jpg');
background-size: cover;
}
.image:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(127, 127, 127, 0.5);
background-image: radial-gradient(black 33%, transparent 33%);
background-size: 2px 2px;
}
<div class="image"></div>
Here is my way of doing this https://jsfiddle.net/soumyabg/wefLyrhp/
Very minimal and pure CSS solution. The catch is that the actual image is the background of <a> tag (with display:block), and <img> is the dot overlay (its size should be defined in the CSS).
HTML:
<div class="image-container">
<a class="dotm" href="#">
<img src="http://s14.directupload.net/images/111129/44ga9qid.png" alt="dotm" title="dotm" class="dotm-overlay">
</a>
</div>
CSS:
.dotm {
display: block;
background: url(https://media.giphy.com/media/SOoaHiWfwZyfu/giphy.gif) no-repeat; /* change with the image URL */
background-size: cover;
}
.dotm-overlay {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
width: 100%;
height: 400px; /*height of the image*/
}
Output:
You can implement this using only css background properties:
background-image: radial-gradient(black 50%, transparent 50%);
background-size: 4px 4px;
Here's one way of doing it.
<body>
<div id="overlay">
image
</div>
<div id="page">
<div id="content">
....
Basically, you add a container outside your page container.
Add a fixed position for it, and add a pseudo element :after to it and give it a background image.
Assume you have an object with "bg" id, this css class will add small dotted background:
#bg {
background-image: radial-gradient(#000 10%, transparent 10%);
background-size: 15px 15px;
background-color: #EEE;
}
You can change dots color by replace black (#000) with any color, and background color by replacing #EEE.
To adjust dots size, play with 10% and 15px.
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