Path for my HTML-file: C:\Users\Name\Documents\Coding\Battleship\index.html
Path for the picture: C:\Users\Name\Documents\Coding\Battleship\Water.jpg
I tried to add it as follows:
body {
background-image: url("file://C:\Users\Name\Documents\Coding\Battleship\Water.jpg") no-repeat center center;
background-size: cover;
}
However, it is not working. Does anyone know how to solve this issue?
You can't do like this
background-image: url("file://C:\Users\Name\Documents\Coding\Battleship\Water.jpg") no-repeat center center;
You can place the image is project root(or subfolder) and use as below
Assume your project folder is Battleship
If you place Water.jpg in root(as below)
Battleship
-index.html
-Water.jpg
then use this
body {
background-image: url("./Water.jpg") no-repeat center center;
background-size: cover;
}
If you place Water.jpg in subfolder (as below)
Battleship
-index.html
-images
-Water.jpg
then use this
body {
background-image: url("./images/Water.jpg") no-repeat center center;
background-size: cover;
}
Check this w3schools.com source
Please refer the below tested code.
The problem was you were using background-image which only accepts one parameter, you were supposed to use background which is a shorthand for writing all the background properties into one.
Refer: CSS background [last section]
You need to change the below CSS
body {
background: url("Water.jpg") no-repeat center center;
background-size: cover;
}
Code example:
html, body{
width:100%;
height:100%;
margin:0px;
}
body {
background: url("http://lorempixel.com/400/200/") no-repeat center center;
background-size: cover;
}
<html>
<body>
</body>
</html>
Not sure if this is too late to answer but I think the problem is very simple. You have done the right thing with the URL, here is the tricky bit: the link to your URL has a backward slash(there's no need for using CSS to correct this) ie:
Yours:
Path for my HTML-
file: C:\Users\Name\Documents\Coding\Battleship\index.html
Correct Answer: should have a forward slash
Path for my HTML-file:
C:/Users/Name/Documents/Coding/Battleship/index.html
just make a folder & put both files into it and link your image path simply.
Related
This question already has answers here:
Fallback background-image if default doesn't exist
(5 answers)
Closed 3 years ago.
Actually I have a css snipped like this:
.item1 {
background-image: url("../img/myimage1.jpg");
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
I will replace this background image with an CDN image url:
background-image: url("https://cdn.com/img/myimage1.jpg");
I would like to make sure that if there is a problem with the CDN provider that an image is loaded anyway. How can I now specify an alternative local image path in addition to the defined CDN url?
It can be done using javascript. But using your provided CSS codes just add the second to your url something like this:
background-image: url("https://cdn.com/img/myimage1.jpg"), url("https://otherdomain/img/myimage1.jpg");
#JustAce answer would do the job.
but it can be done with JS way if your interested in:
HTML:
<test onerror="changeImg()" >sdf</test>
JS:
function changeImg(){
$('.item1').css('backgroud-image','src(".....")')
}
Just copy the path from the Image from ur Devise in your CSS
Like:
.item1 {
background-image: url("C:\Useer\Images\my_Image.jpg");
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.item1 {
background-image: url("../img/myimage1.jpg"), url("https://cdn.com/img/myimage1.jpg");
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
I created a page on GitHub, however the background I coded through CSS will not appear on my page. The CSS code is shown below.
header {
background-image: url("resources/img/antelope.JPG");
background-size: cover;
background-position: center;
height: 100vh;
}
My github repo is: https://github.com/person/person.github.io
The CSS file is stored here:
https://github.com/person/person.github.io/blob/master/resources/css/style.css
Any help to why my background will not appear will be greatly appreciated.
Your image is not inside the resources folder.... it is at the same level as the index.html page - your URL should be url("antelope.JPG");
UPDATE
Looking at your changes, the URL should be as below now:
If you do not do anything, the URL should be: resources/img/antelope.jpg
if you package resources into the root folder then: ./img/antelope.jpg
but, the final URL will depend on how you build your page and beware that the server might be case-sensitive.
Make sure you indicate the correct filename (including case-sensitive extension)
Something along the lines of
header {
background-image: url(./img/antelope.jpg); /* may need to be adjusted depending on how you build your page */
background-size: cover;
background-position: center;
height: 100vh;
}
<header>
<nav>
Some navigation here
</nav>
</header>
To use one from the root directory (https://github.com/anhthyngo/anhthyngo.github.io) use next CSS:
header {
background-image: url('../../antelope.JPG');
background-size: cover;
background-position: center;
height: 100vh;
}
to use from img directory use next CSS:
header {
background-image: url(../img/antelope.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
I have checked and double checked the syntax, but I'm unsure why my CSS background won't load:
body {
font-family: cursive,serif;
background: url("../images/background.jpeg") no-repeat center center;
background-attachment: fixed;
background-size: cover;
}
Folder Structure
--index.html
--style.css
--images
|____ background.jpeg
There are two issues in your CSS:
.body is used to select elements with body class (e.g. <div class="body"></div>). If you actually want to add the CSS to the <body>, remove the dot at the beginning.
The image is in the image subfolder of your HTML file, and the CSS file is in the root folder. You can use url("images/background.jpeg").
Here is the CSS with the above suggestions:
body {
font-family: cursive, serif;
background: url("images/background.jpeg") no-repeat center center;
background-attachment: fixed;
background-size: cover;
}
I have custom Galauness template on blogger (http://nethoroskop.blogspot.com) but I would like to upload my own image...Can you tell me how? In html code there is NOT
body{ background
There a lot of other backgrounds (like post background,total-wrapper background, lightbox-container-image-data-box background,etc) but not body.background at all!
You need to find and edit this section to add your own background image:
body {
background: #ffffff;
background-image: url(http://i1273.photobucket.com/albums/y417/trynitezoo/winterpaper_zps5a2f39a3.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
margin: 0;
}
or you can override the background image. You only need to copy and paste the following code in the header tag section and replace the YOUR NEW IMAGE PATH to the image url you needed:
<style>
body {
background-image: url('http://YOUR NEW IMAGE PATH') !important;
}
</style>
If you want to change the background of the body to an image this would be the best way. Change the <body> to this:
<body background="image.jpg">
Tutorial from : http://www.w3schools.com/tags/att_body_background.asp
I'm using Bootstrap with Rails and can't get the brackground color and image to show up together. I have a custom CSS stylesheet where I'm trying to edit the body to have a dark background with a small image in the bottom right corner, like this:
body {
padding-top: 55px;
background-color: #2e2e2e;
background-attachment: fixed;
background-image: url('waves.png');
background-repeat: no-repeat;
background-position: right bottom;
}
Problem is that the image doesn't show up, just the background. If I remove the 'background-color' it shows up and looks perfect, but I can't get them together. I know I'm missing something small (probably stupid too). Appreciate the help.
Have you tried this way?
body {
padding-top: 55px;
background: #2e2e2e url(waves.png) right bottom no-repeat;
background-attachment: fixed;
}
make sure the file extension is .css.erb
body {
padding-top: 55px;
background: #2e2e2e url('<%= asset_path('waves.png') %>') fixed no-repeat right bottom;
}
Not sure about the environment you're in, but have you tried !important ? It adds priority in case there are styles with different values applied somewhere later in code.
body {
...
background-color: #2e2e2e !important;
background-image: url('waves.png') !important;
...
}
Try to put the waves.png file in /assets/images and replace url('waves.png') with this:
background-image: image-url('waves.png');
I'm assuming you're using assets pipeline and your CSS file is preprocessed by Sass (the stylesheet filename ends with .css.scss), for more information I suggest you to read the Asset Pipeline Rails Guide.