when import image in css noting happen but I check (address) and everything on code
for example I write this on my style :
* { background-image: url('img/download.jpg') ; background-repeat: no-repeat ; }
and then add background color but not happen again
my url direction is true and file exist
and no where in my code this work
I use external style code and link it in head and other property work clean(work with vs code)
somebody help me with this
Try to use it this way body {background-image: url(img/download.jpg);background-repeat: no-repeat ; } and no need to use quotes.
body
{
background-image: url(https://i.stack.imgur.com/AnJVo.png?s=256&g=1);
background-repeat: no-repeat ;
}
<body></body>
You must set background-size to show background-image
body
{
background-image: url(https://i.stack.imgur.com/AnJVo.png?s=256&g=1);
background-size : 100px;
background-repeat: no-repeat ;
}
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;
}
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.
I need repeat as background image gried.png image in welcome.blade.php in My app. I need create class selector file in css folder for this.
this is My welcome.css file in public/css folder
.background-image{
background-image:transparent url("/imgs/grid.png");
background-repeat:repeat;
}
This is my welcomeblade.php file
<link rel="stylesheet" href="/css/welcome.css" />
<div class="background-image"></div>
But this code did not generate any result, how can I fix this?
transparent is not a valid value for background-image. It's a value for background-color.
.background-image {
background-color: transparent;
background-image: url("/imgs/grid.png");
background-repeat: repeat;
}
should work.
See it here (with a different url for the image): https://jsfiddle.net/h0revzu5/
Just try background-attachment:repeat;
Example of background-repeat:
body {
background-image: url("https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png");
background-repeat: repeat;
}
OR
Also by default it repeats when you set background,
body {
background: url("https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png");
}
Default background-color is background-color:transparent;
The image displays when I use this code:
body {
background-image: url("iuerghreugh.jpg")
}
but when I use the code below, the image I use for my background simply disappears. I'm very new to HTML and CSS so I feel I could be missing something very basic.
body {
background-image: url("iuerghreugh.jpg")
background-size: 100% 50%;
background-repeat: no-repeat;
}
Thanks.
There's no semicolon after the first rule:
background-image: url("iuerghreugh.jpg")
//--------------------------------------^ Add a semicolon ; here.
Solution
body {
background-image: url("iuerghreugh.jpg");
background-size: 100% 50%;
background-repeat: no-repeat;
}
You're missing the semicolon after the url line
missing semicolon at the end of background image property
Semicolon is missing after url for background-image. You can also consider combining everything, as in the following:
body { background: url("iuerghreugh.jpg") 0 0 / 100% 50% no-repeat; }
In the above, 0 0 before the / is for position, and after / is for size.
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