In the home page the thumbnail image box shows the image of the post like this:
Is there anyway I can make the thumbnail image box contain the image of the post?
It always zoom the picture in any post I make, whatever the the dimensions of the image are.
I have played a little bit with the css of this part but I couldn't get it to contain the image.
Thank you
my blog URL: www.aflamtalk.com
You can try background-size: contain on the span.snippet-thumbnail-img selector.
Like so:
span.snippet-thumbnail-img {
background-size: contain;
}
This may or may not be the effect you desire. It depends on your use case
Search for the following block of code
.post-outer .snippet-thumbnail-img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
And change background-size: cover; to background-size: contain;
I have found the solution in changing:
background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, "1:1").cssEscaped'/>);
to
background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, "16:9").cssEscaped'/>);
in <b:includable id='normalPost'>
Related
I have a bootstrap Masthead img thats great when its full size , but as I shrink the page the entire ~25% of the top and bottom get cut off. Of all the things on the page I want this to just scale correctly. I tried width:100% but that don't work
padding-top: 10rem;
padding-bottom: calc(10rem - 56px);
background-image: url("../img/Am/20180904_094438cropped.jpg");
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Thanks
You could try putting your code into a container div. It may look something along the lines of:
.container {
padding-top: 10 rem;
padding-bottom: calc(10rem - 56px);
background-image: url("../img/AM/20180904_094438cropped.jpg");
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
width: 100%;
}
Additionally, I found this reference for you: similar topic on stack overflow
I think it may help. Your code looks just about the same, however the width 100%, is a bit different! Check it out.
I want to know how I can see the 100% of a picture in a header with CSS. The problem is that when I add the image to the header, the image does not resize, so I have to make bigger the header, but I don't want that.
.header{
background-image: url("../IMAGES/myimage.png");
width: 100%;
height: 100px;
}
Basically I want to achieve a header with an image resized, so I will be able to see the full image in a header with the dimensions that I want on the header. I am new in CSS. Feel free to ask any question. Thank you.
how I can see the 100% of a picture in a header with CSS
to see a background image in it's entirety, use
background-size: contain;
.header{
background-image: url("//placehold.it/300x100/cf5");
background-size: contain;
background-repeat: no-repeat; /* add this to not repeat it as pattern */
background-position: 50% 50%; /* center it? */
height: 100px;
}
<div class="header"></div>
than id needed you can additionally play with background-position to set it's position
If you want the image to fill the entire header area without distortions use
background-size: cover;
.header{
background-image: url("//placehold.it/300x100/cf5");
background-size: cover;
background-repeat: no-repeat; /* add this to not repeat it as pattern */
background-position: 50% 50%; /* center it? */
height: 100px;
}
<div class="header"></div>
if you don't care that the image distorts but you want the image to stretch-to-fill than use
background-size: 100% 100%;
.header{
background-image: url("//placehold.it/300x100/cf5");
background-size: 100% 100%;
height: 100px;
}
<div class="header"></div>
Without exactly knowing what you really want to achieve, I think you're trying to do, what the background-size property does.
With background-size: cover; you can force the background image to cover the whole area of the according element (like a div).
Your code example would look like
.header{
background-image: url("../IMAGES/myimage.png");
width: 100%;
height: 100px;
background-size: cover;
}
Just use:
max-width: 100%;
On the css of the image, that will make it be at max, the 100% of the width of the container.
CLARIFICATION
For an image inside the container header, max-width will do the trick. If it's a background image, background-size:contain will maintain the image INSIDE the header, while cover will expand the image to cover the whole header.
.header > img {
max-width: 100%;
height: 200px;
width: 600px;
}
.header2 {
background-image: url("https://source.unsplash.com/random/500x500");
background-size: contain;
background-repeat-x: no-repeat;
height: 200px;
width: 600px;
}
.header3 {
background-image: url("https://source.unsplash.com/random/500x500");
background-size: cover;
background-repeat: no-repeat;
height: 200px;
width: 600px;
}
<div class="header">
This is my header
<img src="https://source.unsplash.com/random/500x500" alt="and this is my image inside it" />
</div>
<div class="header2">
This is my second header with a background contained inside
</div>
<div class="header3">
This is my third header with a background covering it
</div>
I have a really cool photo as my website portfolio but i cant get it responsive and fit the div. It fills the entire div but the entire photo isnt fittinf properly. I am using bootstrap.
This is my css
.bg1 {
background-image: url (../img/brain.jpg);
background-size: 100%;
height: 600px;
}
try this:
.bg1{
background-image: url (../img/brain.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Demo link
More info here: Perfect Full Page background
You can try load your image with a <img> tag, and add img-responsive class which is supported by Bootstrap. See more in http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
I'm trying to set a background image for a page in IONIC 2.
I have tried multiple things.
my Html code**strong text**
<ion-content class="myview" padding class="letsstart">
</ion-content>
**my scss**
.myview {
background-image: url('../../img/letsstart.jpg');
// background-image: url('/img/letsstart.jpg');
// background-image: url('img/letsstart.jpg');
// background-image: url('../img/letsstart.jpg');
// background-image: url('./img/letsstart.jpg');
}
Above mentioned ways are not working..
is something I am missing ??
Try including a variable in ts with your url as value and then use the variable in html.
TS
constructor(){
this.backimg = 'img/letsstart.jpg';
}
HTML
<ion-content class="login-content" style="background-image: url('{{backimg}}')">
</ion-content>
SCSS
.login-content{
width: 100%;
height: auto;
background-repeat: no-repeat;
background-size: 100% 100%;
}
It worked for me. Hope this helps you too.
Don't use background-image:
background-image: url('../../img/letsstart.jpg');
Use background:
background: url('../../img/letsstart.jpg');
To make it work use the following format. This should work for both web and the device.
background-image: url('../img/lola_akinmade_akerstrom-white_reindeer-1605.jpg');
Credit:
https://forum.ionicframework.com/t/css-body-background-image-not-showing/9649/6
Ionic 3.10.1
Include without quotes and the finish into declaration
page-login {
.login-background{
background: no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-image: url(/assets/img/background.jpg);
}
}
Result:
Photo by Samuel Fyfe on Unsplash
Anywhere you are, on any level, keep using the path ../assets/your_folder/your-image.*
ion-content {
background: url("../assets/images/city-view_min_resized.jpg") no-repeat center center fixed;
height: 100%;
}
Hope it helps :)
I have a background-image set on a div at 100%.
<div style="width: 990px; height: 742px; background-image: url('http://images.nationalgeographic.com/wpf/media-live/photos/000/913/cache/deadvlei-africa-namibia_91343_990x742.jpg'); background-size: 100%; background-repeat: no-repeat;"></div>
When I scale that image down by editing the width/height of the element, it retains its quality.
<div style="width: 247.5px; height: 185.5px; background-image: url('http://images.nationalgeographic.com/wpf/media-live/photos/000/913/cache/deadvlei-africa-namibia_91343_990x742.jpg'); background-size: 100%; background-repeat: no-repeat;"></div>
However, when I scale the image down using transform: scale, the image loses quality.
<div style="width: 990px; height: 742px; background-image: url('http://images.nationalgeographic.com/wpf/media-live/photos/000/913/cache/deadvlei-africa-namibia_91343_990x742.jpg'); background-size: 100%; background-repeat: no-repeat; transform: scale(.25);"></div>
Here is a demo of the results.
The image only seems to lose quality in webkit browsers. Chrome is worse than Safari.
Does anyone know why the image loses quality using transform: scale and if there is a way around it?
This question has been already asked. Simply set blur filter to 0.
Check -webkit-transform: scale / blurry images