I have div with mask it work when I use internal svg file
but when I use same file with external url it not work
any Idea I want to use external url file
<div style=" -webkit-mask: url('/images/facebook-color.svg') no-repeat center; mask: url('/images/facebook-color.svg') no-repeat center;" ></div>
but following code not work
<div style="-webkit-mask: url('https://www.logo.wine/a/logo/Facebook/Facebook-f_Logo-Grey-Logo.wine.svg') no-repeat center; mask: url('https://www.logo.wine/a/logo/Facebook/Facebook-f_Logo-Grey-Logo.wine.svg') no-repeat center;" ></div>
Related
Trying to figure out why the header image for my site is non-responsive.
From what I've read, this should do it with a width of 100% on the containing element.
https://super-lollipop-a72757.netlify.app/
.intro {
display: table;
width: 100%;
padding: 0;
background: url(../img/big_logo.jpg) center center no-repeat fixed;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
Header component
import logo from '../images/logo2.png';
export const Header = (props) => {
return (
<header id='header'>
<div className='intro'>
<div className='overlay'>
<div className='container'>
<div className='row'>
<div className='col-md-8 col-md-offset-2 intro-text'>
<h1>
{/* {props.data ? props.data.title : 'Loading'} */}
<img style={{marginBottom:"20px"}} src={logo} alt="logo" />
<span></span>
</h1>
<p>{props.data ? props.data.paragraph : 'Loading'}</p>
</div>
</div>
</div>
</div>
</div>
</header>
)
}
It works fine with images I've tested from the gallery too. But, for some reason when adding the logo as the header image, it doesn't work right.
background-size: contain vs cover
As Chris Coyier summarized here, background-size can provide various options, and cover might not be you're looking for here.
cover is focused on ensuring there's no space uncovered—practically extending the background image to all four edges beyond the containing boundaries. contain, on the other hand, is focused on ensuring there's no cropping happening on the background image—practically leaving uncovered areas blank.
If you intend your big image to remain intact, uncropped, and readable at all times, try adding the following to your .intro class.
background-size: contain;
background-color: #426CB4;
You already have your background-position: center as part of your background shorthand, so this should cover it. background-color line helps to fill the container with the same color as the logo background.
Try adding this code to your intro element in CSS file. This will fix your problem.
display: flex;
background: url(../img/big_logo.jpg) center center no-repeat center;
background-attachment: fixed;
height: 100vh;
background-size: cover;
I would like form field images to have a set dimension regardless of the actual image size. So we want all form field images to be 25px by 25px, even if the actual image file is 35x by 35x. Current CSS is below, but if the url points to an image larger than the form field, it no worky. Newbie question for sure, but might be helpful for all future beginners as well.
#namefieldicon {
background: white url(example.com/images/nameicon.gif) left
no-repeat;
}
I created a snapshot check the link below
<div>
<div class="bgimg"></div>
<div class="bgimg"></div>
<div class="bgimg"></div>
<div class="bgimg"></div>
<div class="bgimg"></div>
</div>
css
.bgimg {
background: white url(https://placehold.it/100/100) left no-repeat;
background-size: 70px;
width: 70px;
height: 70px;
display:inline-block;
}
Is this what you mean?
https://jsbin.com/tavulac/1/edit?html,css,output
I am developing a site where the users' profile image needs to display in a circle. There are many circles on this site and the circle size can vary.
I can display square images properly but with vertical and horizontal images I face a problem.
I have to display the image in a circle with the below criteria:
Suppose image size is 500x300. The image should crop 100px off of the right and left sides, so that the center of the image is shown. Now the image should be 300x300, centered. Then I need to make a circle from that image. OR hide 100px of the right and left of the image using CSS.
If image size is 300x500, then the top and bottom area should be hidden using CSS
What do I have to do to fix this? CSS-only answers are best for me, if possible.
background-size
MDN -
CSS Tricks - Can I Use
As the image sizes are variable, you want to make sure they cover the div as well as being centered within it.
Adding the border-radius: 50%; will give you the circle effect.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.one {
background-image: url('https://via.placeholder.com/400x200');
}
.two {
background-image: url('https://via.placeholder.com/200x200');
}
.three {
background-image: url('https://via.placeholder.com/200x400');
}
<div class="user one">
</div>
<div class="user two">
</div>
<div class="user three">
</div>
In practice, you wouldn't want to have a class for each image, so you'd specify it with an inline style in the markup:
<div class="user" style="background-image:url('path/to/user/img.png')"></div>
object-fit
MDN - CSS Tricks - Can I Use
A newer alternative is to use the object-fit property on a regular <img> tag. This does not work in IE or older versions of Edge.
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
<img src="https://via.placeholder.com/400x200" class="user">
<img src="https://via.placeholder.com/200x200" class="user">
<img src="https://via.placeholder.com/200x400" class="user">
set the image as background, centered.
<div class="image"></div>
css:
.image{
width: 300px;
height: 300px;
border-radius: 50%; /*don't forget prefixes*/
background-image: url("path/to/image");
background-position: center center;
/* as mentioned by Vad: */
background-size: cover;
}
fiddle
If you are using bootstrap you have class img-circle to do this.
<html>
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg"
id="circle">
</body>
</html>
full CSS file : http://pastebin.com/9LjYjiUF
.body-content{
background-image: white url("images/content-bg.gif");
background-repeat: repeat-y;
background-position: left bottom;
}
this is the html:
<div class="content-bead bg2 rockwell">
<div class="body-content">
<div class="body-content-sub">
<div id="content-left">
</div>
<div id="content-main">
</div>
</div>
</div>
</div>
== updated css===
background-image: url(images/content-bg.gif);
background-repeat: repeat-y;
background-position: left bottom;
background-color:#FFFFFF;
still nothing
i cant get the background image to come up at all. on
That's because background-image is not a combined property. either pick them apart:
background-image: url('images/content-bg.gif');
background-color: white;
or combine them:
background: white url('images/content-bg.gif') left bottom repeat-y;
give overflow:auto a try on the container with the bg, it might be that floated elements inside need to be cleared. Just experienced this problem with IE7 but worked fine in all other browsers
maybe remove white as it is not part of "background-image"
or change it to "background"
remove white value.
.body-content{
background-image: url("images/content-bg.gif");
background-repeat: repeat-y;
background-position: left bottom;
}
Duplicate:
What is the best way to create rounded corners
How to make a cross browser, W3C valid, semantic, non-javascript ROUND corner?
jQuery rounded corners
Do you know a way to make rounded borders to div elements.
I used ruzee but i got problem to use CalenderExtender(asp.net ajax) and GMDatePicker components.
In CSS 3 there will be a standard for that. Today you can do it (only for Mozilla and Webkit based browsers) with:
.roundBorder {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}
Otherwise you can use multiple divs with backgound-images, but JQuery will provide a more simple way (that I don't know about :()
The multiple div way could look something like this:
html:
<div class="topLeft">
<div class="topRight">
<div class="bottomLeft">
<div class="bottomRight">
<div class="content">
</div>
</div>
</div>
</div>
</div>
css:
.topLeft {
background-image: url('topLeft.png');
background-position: top left;
background-repeat: no-repeat;
}
.topRight {
background-image: url('topRight.png');
background-position: top right;
background-repeat: no-repeat;
}
.bottomLeft {
background-image: url('bottomLeft.png');
background-position: bottom left;
background-repeat: no-repeat;
}
.bottomRight {
background-image: url('bottomRight.png');
background-position: bottom right;
background-repeat: no-repeat;
}
You could use the CSS3 border-radius property, but this isn't supported in IE yet.
for JQuery, you could use 'Corner'. See here