I am trying to call image using img
and this is my code:
<img src="/pc/images/leader.png">
is this possible to put this in css? like this code:
without using background-image.
css
.leader{
src: /pc/images/leader.png;
}
html
<img class="leader">
thanks :)
No. You can't do it with css.
CSS has no use of foreground images. You can only use background images.
However, if I understand your problem, you can do place the image using pseudo element:
.leader::after{
content: "";
background: url(path.jpg) no-repeat;
position:absolute;
top: 0;
left: 0;
width: 50%;
height: 300px;
}
.leader::after{
background: url(path.jpg) no-repeat 50% 50%;
}
if you use 50% 50% then the image will be at centre possition.
Related
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 need to create full width, transparent triangle with border and some elements inside via CSS. Does somebody know how to do that?
Thanks in advance.
You can create triangle as vector (svg) here.
You can convert from svg file to base64 here.
body {
background-color: #444;
}
#triangle {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBpZD0ic3ZnXzEiIGQ9Im0yLjk5LDc5Ni44MzM4MmwzOTYuOTk5OTgsLTc5My43NTA3bDM5Ni45OTk5OCw3OTMuNzUwN2wtNzkzLjk5OTk3LDB6IiBmaWxsPSIjZmZmZmZmIi8+CiA8L2c+Cgo8L3N2Zz4=");
background-size: cover;
background-repeat: no-repeat;
height: 300px;
position: relative;
width: 300px;
}
#circle {
background-color: #7220fd;
border-radius: 50%;
height: 90px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, 20%);
width: 90px;
}
<div id="triangle">
<div id="circle"></div>
</div>
See it on jsfiddle.
You did not provide any code or background image to use, I have to generate new for testing and the result may not exactly to your screenshot. However you can change the triangle vector using the link above.
To customize circle position, change the argument of translate(). The first is horizontal position, second is vertical position.
The effect I'm trying to achieve is the first main picture on this website: http://shop.soot.me/
As far as I can tell, this is being achieved by background, not <img>. Is it possible to achieve this with the <img> tag? I tried my hand in it, but it's not exactly there.
https://jsfiddle.net/jzhang172/e1javm23/
.box{
width:100%;
height:500px;
background:black;
overflow:hidden;
}
.box img{
max-width:190%;
min-height:100%;
}
<div class="box">
<img src="http://www.hdwallpapersnew.net/wp-content/uploads/2015/12/landscape-desktop-hd-wallpaper-images.jpg">
</div>
Here is a fiddle of code that fills the image to 100% of the width of the box container. https://jsfiddle.net/9pjxeo6o/
Is this what you are looking to do? The website that you referenced actually does use the background property to create the effect that you are talking about. I suspect that this is actually what you are wanting to do, rather than just using an image. This code handles the background cover:
.homepage-hero-video, .homepage-hero-image {
display: block;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
The background-size: cover; stretches the image to the width of the container automatically.
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
I want a background to repeat-x at the top of my page, but I want it to begin repeating from the center, not across the whole page. For example something like this:
One way is to use the ::after pseudo selector like this:
body::after {
content: '';
position: absolute;
left: 50%;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: url('http://i.imgur.com/2xPV3gf.png') repeat-x left top;
}
Fiddle: http://jsfiddle.net/Vf4Rm/
Just a simple background CSS declaration
background-position: center;
background-repeat: repeat-x;
like this:
background-position:center;
but you also need:
background-attachment:fixed;
along with it.
see this page from w3schools.
fiddle here
You can try something like this:
<div class="bg-skew"></div>
<p>Lorem ipsum dolor sit amet...</p>
Use a separate element to hold the background and use absolute positioning to set the offset.
The CSS:
html, body {
height: 100%;
}
.bg-skew {
background-image: url('http://placekitten.com/50/50');
background-repeat: repeat-x;
background-position: 0 0;
width: 50%;
height: 100%;
position: absolute;
z-index: -1;
left: 50%;
top: 0;
}
You can also use a pseudo element instead of an explicitly defined element.
The reason you might use this approach would be if you had a pre-defined parent container.
use a div ( you probably want to use z-index:-1;) with:
position: fixed;
margin-left:50%;
width:50%;
fiddle here