body {
background-image: url(/images/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
For some reason I'm getting this error:
GET http://localhost/images/background.jpg 404 (Not Found)
And also I'm kind of confused why the link is http://localhost/images/background.jpg instead of http://localhost/[project_name]/images/background.jpg
I found the solution.
I don't need to write '/' at the beginning of the path
I need to go up on 1 level in catalog because I'm in css folder
So the path should look like this:
background-image: url(../images/background.jpg);
Related
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;
}
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.
Can someone tell why this:
.s1{
background:url('../img/backgrounds/new/background1.jpg') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:100%;
}
Work on localhost and background stay in place like for fixed position, but when I upload it on server it's static ? :) There is no more code to show, it's just one DIV
ps. it's not cache I clean it, its not browser I user that same.
ANSWER:
I got IT ... backstretch plugin was turn on and on localhost was turn off :)
Try this:
/**
background:url('../img/backgrounds/new/background1.jpg');
background-size: cover;
min-height:100%;
background-attachment: fixed;
background-repeat: no-repeat;
**/
Your code works... so the most likely cause is that your CSS file has been cached.
You can do a hard refesh (SHIFT + Refresh, or CTRL + F5).
Or you can add a cache-bust to your URL, or a version number:
/assets/site.css?v2
Increasing the version number will ensure everyone gets the new CSS.
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.