I have the following code in my html markup :
<div class="profile-img">
<img src="<?php echo $user_meta['profilepicture'][0]; ?>" />
</div>
This code generates a profile image or avatar.
I'd like to use it into CSS as a background image.
So this is what I am trying to use :
<div class="profile-img">
<style type="text/css">
.profile-img img { background-image: url('<?php echo $user_meta['profilepicture'][0]; ?>'); }
</style>
</div>
My CSS then looks like this :
.profile-img {
width: 90px;
height: 90px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 15px;
}
.profile-img img {
width: 80px;
height: 80px;
padding: 5px !important;
background: #fff !important;
border: none !important;
border-radius:500px;
-moz-border-radius:500px;
-webkit-border-radius:500px;
background-position: center center;
}
What I am trying to achieve is a round image thumbnail - avatar with proportionally cropped image.
But it seems that the code I am trying to use to call the image into CSS doesn't do the trick.
Where am I going wrong here ?
You have to add this rule removing background-image property that will be parsed via php.
.profile-img {
background-image: url('https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
width: 100px;
height: 100px;
}
<div class="profile-img"></div>
So your final html addition will be:
<div class="profile-img" style="background-image: url('<?php echo $user_meta['profilepicture'][0]; ?>');"></div>
If you want the image to be a background-image and not part of an IMG tag, and you need it to be dynamic, then you'll need something more like this:
<div class="profile-img" style="background:url('<?php echo $user_meta['profilepicture'][0]; ?>') no-repeat center center #ffffff"></div>
This will place the image as a background within the .profile-img DIV. Then you'd style just your DIV:
.profile-img {
width: 90px;
height: 90px;
margin: 0 auto;
text-align: center;
padding: 5px !important;
border: none !important;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%; }
To be honest, I haven't checked your CSS as I'm not sure what you are trying to accomplish beyond the circle shape. I changed your border-radius to 50% as that's what'll create a circle.
Im not sure, but a while back I used some css to have round corners for an webapp. Perhaps this will help you:
.myImg img{
-webkit-border-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px;
border-radius: 30px 30px 30px 30px;
}
Hope this helps
<script>
var imageSrc = "<?php echo $user_meta['profilepicture'][0]; ?>";
$('.profile-img').css('background-image',imageSrc);
</script>
Related
Is it at all possible to have an image be a circle in mPDF?
Looked all over and couldn't find any clear answers.
For me this image shows up fine, except that its a square and this should make it a circle.
css
img{
width: 150px;
height: 150px;
border-radius: 150px;
}
php
$inputPath = '../web_content/cool_cat.jpg';
<div class="profile_img">
<img src="'.$inputPath.'"/>
</div>
Found a way to work around this by using the image as a background image instead of an element.
So within the PHP file which creates the pdf with mpdf I just made a div that can take the image path as $inputPath. Seems to work fine now.
HTML / PHP
<div class="profile_img" style="background-image: url('.$inputPath.');"></div>
CSS
.profile_img {
position: absolute;
width: 120px;
height: 120px;
border-radius: 120px;
border-style: solid;
border-color: white;
border-width: medium;
overflow: hidden;
background-size: 150px 150px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Border-radius is not supported on IMG elements.
See Supported CSS in mPDF manual.
Unfortunately, this cannot be faked even with placing the image into a div which supports the border-radius element.
<div style="width: 150px;
height: 150px;
border-radius: 150px;
border: 2px solid maroon;
overflow: hidden;">
<img src="assets/butterfly_ProPhoto.png" />
</div>
I have been using PHP and ImageMagick for to generate a 3D preview of a canvas print (see image below).
There are options to change the edge type, depth, size etc which are AJAX calls to a PHP support file which re-renders the preview with new settings and I reload it into the DOM.
This is starting to overload our server when busy. So I thought I could do this in CSS3 and do all the preview rendering client-side instead.
Here's what I have so far:
<div class="wrapper">
<div class="inner">
<div>
<img src="http://lorempixel.com/200/200/nature" alt="Nature">
</div>
</div>
</div>
.wrapper {
perspective: 500px;
margin: 4em auto;
width: 37em;
}
.inner {
transform: rotateY(40deg);
}
.inner div {
width: 11em;
display: inline-block;
margin-right: 1em;
}
.inner img {
display: block;
height: auto;
max-width: 100%;
margin: 0 auto;
}
The problem I am having is wrapping the image around the edges like in the image above. How can I do this?
I have done a demo, with 2 elements holding the same image.
Just set the image origin on them accordingly to the dimension, and it will match.
.main {
width: 400px;
height: 300px;
border: solid 1px red;
background-image: url(http://lorempixel.com/400/300);
background-size: 0px 0px;
perspective: 500px;
position: relative;
}
.front {
position: absolute;
width: 360px;
height: 100%;
left: 40px;
top: 0px;
transform: rotateY(45deg);
transform-origin: left center;
background-image: inherit;
background-position: -40px 0px;
}
.side {
position: absolute;
width: 40px;
height: 100%;
left: 0px;
top: 0px;
transform: rotateY(-45deg);
transform-origin: right center;
background-image: inherit;
background-position: 0px 0px;
}
<div class="main">
<div class="side"></div>
<div class="front"></div>
</div>
I have a searchbar in my header, which I need centered horizontally and just a little bit above the bottom of the header. I was able to achieve this by using
display: flex;
justify-content: center;
align-items: center;
The problem I am having now is that although it is responsive when you make the window smaller horizontally, It is a total mess when you resize the window vertically. I am pretty sure it's because I used margin-top: 350px; to set the vertical position. I also would much rather not use flex display because it isn't supported by much yet. Below is a screenshot of how it looks normaly, and one of how it looks when the view is altered vertically. Also the code pertaining to it. If anyone could help me figure out how to get the searchbar to be responsive vertically, that would be great!
How it is normally:
How it looks when you change the screen size vertically (the searchbar is behind the images):
HTML:
<div class="outcont">
<div id="top" class="header">
<div class="wrap">
<div class="col1"><img class="logoi" src="<?php bloginfo('stylesheet_directory'); ?>/images/main-logo.png" alt="<?php bloginfo('name'); ?> Logo" /></div>
<div class="col2"><?php wp_nav_menu(array('menu' => 'global-nav', 'container' => '')); ?></div>
</div>
<?php get_search_form(); ?>
</div>
CSS:
#searchform div {
shadow: 4px 7px 4px #000000;
margin-top: 350px;
display: flex;
justify-content: center;
align-items: center;
}
#searchform .text {
font-family: 'Merriweather';
padding-left: 35px;
height: 75px;
width: 600px;
font-size: 220%;
color: #B7B7B7;
border-radius: 50px;
background: white url('images/search-img.png') no-repeat;
background-position: 96% center;
}
#searchform .text:focus {
background-image: none;
}
#searchform .text img {
margin-right: 25px;
}
Check out this Fiddle I have made for you.
I have my main div with a background-image and the input inside of that div with the css like so:
#hero {
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
height: 100vh;
margin-bottom: 0px;
right: 0;
}
#hero input {
position: absolute;
width: 200px;
height: 34px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 5px 10px;
border-radius: 50px;
outline: none;
}
This way the textbox will always stay in the center of the image no matter how the browser is scaled. In order for this to work the textbox must have a defined width and height.
So in your case replace your css for the searchbox with the css I have for #hero input and set the parent divs position to relative with position: relative;.
Please let me know how this works out for you.
Hope this helps!
Aligning image at start and
I am using following code
<div id="ringName" style="background-color: #701344;height: 50px; border-radius: 4px; width: 800px; ">
<img style="margin-top:5; margin-left:20;" src="images/about_us_logo.png" alt="" width="40" height="40" />
<div style="font-size: 24px; color: #FFF; text-align: center; line-height: 50px; height: 50px; border-radius: 4px; width: 760px; " ><?php echo $store['name'] ?></div>
</div>
What i want to do is, make a Voilet bar of width 800px , height 50px.
The <img> tag will show logo at like margin left 5 and margin top 5. Means at start in center vertical at start of The bar.
However I want to show the store name in the middle of the MAIN DIV, CEnter horizontal, center vertical.
In above code, the Text is not showing, and the margins to the logo are not working either.
What are the fixes
Here's the debugged code: http://jsfiddle.net/u7G2M/.
HTML:
<div id="ringName">
<img style="" src="http://placehold.it/40x40" alt="" />
<div>Store Name</div>
</div>
CSS:
#ringName {
background-color: #701344;
height: 50px;
border-radius: 4px;
width: 800px;
}
#ringName > img {
margin-top:5px;
margin-left:20px;
width: 40px;
height: 40px;
}
#ringName > div {
display: inline-block;
font: 24px/50px Sans-Serif;
color: #fff;
text-align: center;
vertical-align: top;
width: 700px;
}
.className{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
I'm trying to horizontally center an image. However it does not move from the left side of the page. This answer does not work in my case. What am I doing wrong?
#container {
width: 100%;
border: 2px yellow dashed;
height: 100px;
}
#profile-image img{
margin-left: auto;
margin-right: auto;
border: 2px orange solid;
}
mypage:
<div id="container">
<div id="profile-image">
<p><img src="<?php echo $data['profile_image_url'];?>" alt="me"></p>
</div>
to make any div or anything horizontally at center , common css approach will be,lets have a width and declare margin:0 auto;
#profile-image{
width:400px;
margin:0 auto;
}
Try this: http://jsfiddle.net/rua4d/2/
#container {
width: 300px;
border: 2px yellow dashed;
height: 100px;
display:table-cell;
position:relative;
vertical-align:middle;
}
#profile-image img{
margin-left: auto;
margin-right: auto;
border: 2px orange solid;
display:block;
position:relative;
vertical-align:middle;
text-align:center;
width:50px;
}
You just need to add display:block to your image's style. Images are inline elements, and inline elements ignore margins.
why cant this work?
#profile-image p { text-align: center; }
#profile-image img { display: inline; }
that way you won't need to specify the width.. if you want margins to work together with the text-align: center you would need inline-block instead:
#profile-image p { text-align: center; }
#profile-image img { display: inline-block; }