I tried many times and searched a lot about how to set image background for whole app in angular project.
I tried global css and app.component.css but it just set background for component area.
Here is my global css file:
body {
font-family: 'Vazir';
background-image: url("assets/back.jpg");
background-repeat: repeat-y;
background-position: center;
background-size: cover;
}
I defined another css file and link in index.html but it didn't work well .I have also set directly into body tag in index.html but I got same result.
PS: I don't want to set pixels or percentage in css file.
Thanks in advance
You can achieve it in the following way:
1-Define a router outlet in the root component (probably app.component.html)
<div class="outlet-wrapper">
<router-outlet></router-outlet>
</div>
2- In the relative style file (app.component.css/scss), define:
.outlet-wrapper {
background-image: url("assets/back.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Related
I'm finding it difficult to insert my background image only on the home page. I have 6 pages but I only want the background image to be on the home page. Annoyingly the background image is on all of my 6 pages. Any help would be appreciated , thank you.
header {
background-image: url(img/markus-spiske-PIJwPMtzBI0-unsplash.jpg);
background-size: cover;
background-position: center;
margin-top: 200px;
height: 100vh;
background-attachment: fixed;
}
That is because your header tag in the CSS file will always get called on the no matter the page it is.
To solve this, you need to give your header an extra "name" so to speak. In this case giving it an "id" is enough.
#homepage-header{
background-image: url('path/to/image')
}
//As you can see here, instead of calling the <header> im now calling the #homepage-header
<header id="homepage-header">
</header>
//I added a unique ID to <header> tag allowing me to target this header specificly on the homepage.
For sake of completeness, I will add this alternative solution.
If this is just for one or two exceptions, you could also inline the CSS code on the specific page where you want this image to display. Like this:
<div></div> <!-- this is the image div -->
<style>
header {
background-image: url(img/markus-spiske-PIJwPMtzBI0-unsplash.jpg);
background-size: cover;
background-position: center;
margin-top: 200px;
height: 100vh;
background-attachment: fixed;
}
</style>
This way, you can keep using the header selector for whatever you want, and only on that specific page, the header will use the above CSS code.
i have tried in global.scss as
ion-content{
background-image: url('assets/images/cover.jpg');
-webkit-background-image: url('assets/images/cover.jpg');
background-repeat: no-repeat;
background-size:cover;
}
but this does not render the image. tried path as ./assets/images/cover.jpg as well.
if i put the same image as img tag on the page that shows up ruling out invalid image possibility.
I also tried to put in the homeage.scss as
.myview {
background-image: url('../../assets/images/cover.jpg');
background-repeat: no-repeat;
background-size:cover;
}
and using class="myview" in home.html no luck
You can use the CSS-Variable --background to change the background of ion-content.
Example:
ion-content{
--background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
}
Put this into your components, pages or global scss.
For reference see: https://beta.ionicframework.com/docs/api/content#css-custom-properties
I solved the problem doing the following:
ion-content {
--background: none;
background-image: url('/assets/imgs/page_bg.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
This will disabled background and then set the correct one.
I have encountered the similar situation, having ionic background css property leads to flickering issues on IOS
try the following if you have encountered flickering issue
:host {
ion-content {
--background:none;
background:url(''../../assets/images/cover.jpg');
background-size: cover;
background-position: center center;
}
}
for anyone having keyboard issues (background resizes on keyboard show) install Keyboard plugin
https://ionicframework.com/docs/native/keyboard/
and add the following code on your config.json
<preference name="keyboardResize" value="false" />
<preference name="keyboardResizeMode" value="native" />
Note: this may hide item beneath the keyboard when its shown (I have tested only on iOS)
I tried answer from #rchau, but it did not work in my case. Instead, I put this code in my project and it has done the right thing:
ion-content{
--background:url('../../assets/images/cover.jpg') 0 0/100% 100% no-repeat;
}
This is the working solution for me.
global.scss
ion-content {
--background: url('../assets/img/background/background.png') no-repeat 100% 100%;
}
I am trying to get an image behind a video on a wordpress child theme of twenty sixteen.I tried using the following the file path.
background: url('../images/image.jpg’);
I have the image in a
.wp-block-video.aligncenter {
text-align: center;
border-style: solid;
but the image will not appear behind it
I modified the code but to no avail
background-image: {
url('..images/('alliswell.ie_video_2018.jpg');
width:100px;
height:100px;
};
the website is alliswell.ie
Tag 'video' have attribut 'poster':
A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.
Please try the below code :
.wp-block-video.aligncenter
background-image: url(http://alliswell.ie/wp-content/uploads/2018/09/alliswell_ie_caring-forourwater_2018.jpg-e1536244962710.png);
background-repeat: no-repeat;
background-size: cover;
}
In background-image use complete url. background-image: url(../images/images.jpg) unable to find the image path.
this is the answer or it worked for me
..wp-block-video.aligncenter{ background-image: url(alliswell.ie/wp-content/uploads/2018/09/…); background-repeat: no-repeat; background-size: cover; } –
thank you dineshkashera for the answer and everyone else that offered suggestions.
I have to set background image for my home page and I have used this css code:
<style type="text/css">
body {
background-image: url('/Images/emma-maersk.jpg');
}
</style>
However, it is not working. Can anyone help me.
Try setting its background-position and background-size:
body {
background-image: url('/Images/emma-maersk.jpg');
background-size: cover;
background-position: center center;
}
Check if the image exists. You can open Network tab in your browser's developer tools and check if this image is loaded properly.
Note that /Images/emma-maersk.jpg is not a relative path and means yourdomain.com/Images/emma-maersk.jpg. For relative path, you should use url('./Images/emma-maersk.jpg').
Also Add below lines in body{}
body{
background-size:cover;
background-position: 0 0 ;
}
And also Check Folder Spell and Case Sensitive.
For your addition, please make background-size: 100%
The shorthand method for setting background is
<style>
body{
background: url('Images/emma-maersk.jpg') no-repeat center center;
}
</style>
use it in CSS3
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}
also add ".." before giving url if it exist in folder hierarchy.
Based on this page :
- http://css-tricks.com/perfect-full-page-background-image/
I have used CSS injector to make my home page :
- http://tailored.bike/
I believe I had this code working properly
.front h1.title { display: none; }
body {background: none;}
html {
background: url(/sites/default/files/u44/framed_home_2013_10_19.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then for some reasons I had to change the domain name and I can't have it work back.
Does any one have an idea ?
Regards
Julien
edits:
Does nok work neither with full http://... image url.
It works if I uncheck "Preprocess CSS"... I let it this way for now.
Just tested in Chrome and your background image reference is still mapped to your old domain. Your CSS should read:
html {
background:url(http://tailored.bike/sites/default/files/u44/framed_home_2013_10_19.jpg) no-repeat center center fixed;
/* Other CSS stuff */
}
Fix that reference and the image loads fine.