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.
Related
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'm trying to get my background image to show up only once at the top of the page. When i open live preview (in Brackets) it load correctly, that is, only once. When i reload the page though it repeats as if there was no no-repeat tag used. If I delete a line and put it back the live preview goes back to showing the correct non repeating background but as soon as i hit reload in the preview window it goes back to repeating. please help.
Here is the code:
body {
background: no-repeat url('/Users/username/Documents/topatopa.jpg') ;
background-size:120%;
}
I have also tried the forms:
body{
background: url('/Users/username/Documents/topatopa.jpg') no-repeat;
background-size 120%;
}
And
body{
background-image: url('/Users/username/Documents/topatopa.jpg');
background-size 120%;
background-repeat: no-repeat;
}
And
body{
background-repeat: no-repeat
background-image: url('/Users/username/Documents/topatopa.jpg');
background-size 120%;
;
}
Any ideas???
I am new to CSS and am tinkering with a few options. I want a pic called 'toplayer.jpg' to be repeated horizontally at the bottom of my webpage. I have used this code in an external style sheet. The pattern repeats horizontally...however it floats to the top of the page.
body {
background-image: url("../Images/toplayer.jpg");
background-position: bottom;
background-repeat: repeat-x;
}
Any suggestions for this noob would be appreciated. Thank you.
Your background declarations should work, I guess the issue is that the body tag has no height :
html,body {
height: 100%;
}
body {
background-image: url("https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg");
background-position: bottom;
background-repeat: repeat-x;
}
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.