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 :)
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.
It's located in project/resources/images/banner-landingpage.jpg. The
HTML index file is in the project folder. I cannot get the background to display using:
.banner {
background-image: url(./resources/images/banner-landingpage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100px;
}
I thought the ./ meant go up one file then follow the path to the file?
I believe the standard solution to this is
.banner {
background-image: url('../resources/images/banner-landingpage.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100px;
}
where you go up a directory using ../
Also note that the url will be relative to where the css file is stored.
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'>
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