I want to add background image in my css code but it's not loading.
How to change or add background image in css please help
I'm written css code in notpad++
.Your class name {
background-image: url("your image url");
background-repeat: no-repeat;
background-size: 100% 100%;
float: left;
width: auto;
}
Please try Above type of code in your css section.
you can add that as this.
if you have id
#yourid{
background-image: url("your image url(EX:imge.jpg)");
}
if you have class
.yourclass_name{
background-image: url("your image url(EX:imge.jpg)");
}
you can use background function also...if you add background css function,you should have to change width and height
.yourclass_name {
background: url("img_tree.png") no-repeat;
height:500px or give to precentage(30% like that);
width:1000px or give to precentage (70%);
}
This is the path u should specify, The way to copy the path is to go the directory where the image is present, then copy path there.
body { background-image:url("C:\1.jpg");
If you want to add an image as background-image in CSS, there are two ways of doing it:-
If you want to add an image from the internet then, you can use
background-image: url("your image url");
example:
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQms3mJIPu3jlPy8b8cOmRg69qurCA82EBDofx6jaK11cUM6u4w");
If you want to add an image from your pc, then you should write the image path i.e.,
background-image: url("your image path");
example:
background-image: url("C:\Users\Vimalendu Shekhar\Downloads\image.jpg");
#idname{
background-image: url("your image url");
}
Related
Explanation of what I want to get.
I displayed the problem in the attached picture.
How can I get this result?
Thanks all
This is a CSS issue
.myDiv {
background: url(...) no-repeat;
object-fit: cover;
}
i want to give location of background image inside css file but it is showing invalid
tried but not showing
css file
background: url{{('image/clock-background.jpeg')}}), center no-repeat;
background image should be loaded
you can directly used like that
background: url('image/clock-background.jpeg'), center no-repeat;
or if you want to asset() helper function then you used like that:
background: url("{{ asset('image/clock-background.jpeg') }}")
background: url{{('image/clock-background.jpeg')}}), center no-repeat;
is missing a ( after 'url'. Also get rid of the comma. Replace it with:
background: url({{('image/clock-background.jpeg')}}) center no-repeat;
background: url('/image/clock-background.jpeg');
Should work
I have tried to implement the following code but nothing happens
#masthead {
background: url('data05/mono/public_html/wp/wp-
content/themes/spacious/images/monostaff1024x512.png') no-repeat center;
background-size: cover;
}
I am having no luck. IS my file to path format incorrect?
There is a space in your url after the "wp-"
data05/mono/public_html/wp/wp-
content/themes/spacious/images/monostaff1024x512.png
Also the formatting seems off, see background property.
I am new to web development and I want to display an image for my background.Only problem is that my image will not show, may you please help me. Below is my code
<style type="text/css">
.bgimg {
background-repeat: no-repeat;
background-size: cover;
background-image: url("worldtravlerissue1.jpg");
min-height: 90%;
}
</style>
1)Be sure the div has a concrete width and height, if you're using % be sure the image div is inside another with a height and width declaration on css
2)Be sure you've declared the right class
3)Be sure the img url is right and you're reaching the right path
.img{
width:400px;
height:300px;
background-image: url(https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/RGRIEDX4IU.jpg);
background-size:cover;
}
<div class="img">
</div>
You're image might not be showing because either you have the wrong name for it, wrong extension as in assuming its a .jpg rather than .png or .jpeg or its not in the same directory as your HTML file. Make sure they are in the same folder or directory a.k.a Desktop.
If you have your HTML file on your desktop and the picture is in a different folder, you'd have to do
background-image: url("NAMEOFFOLDER/worldtravlerissue1.jpg");
Hope that helped.
I feel retarted for even having to post something like this but for being a vet in css I have no idea why this time I can't get an image to show in the background of a div. Here is what I have
#leadarea {
background-image:(images/submarines-for-sale-at-seamagine.jpg);
background-repeat: no-repeat;
background-position:center;
height:360px;
width:1160px;
}
<div id="leadarea"></div>
I have triple checked my path to the image and its correct. In the same directory of the file I have an folder called "images" and the file to that image. If I type in the full url to that image in a browser I can see the image. Why is my div not showing that image?
The proper syntax is:
background-image:url('images/submarines-for-sale-at-seamagine.jpg');
Also notice that the path is relative to the .css file placement.
Put the url in your background-image
background-image: url("your-image-path.jpg");
Try this to optimize your background definition in one line:
#leadarea {
background: transparent url("http://1.bp.blogspot.com/-5PauJ-PHxns/UVjwME0X9YI/AAAAAAAAA4s/lsd9ZRsfCnE/s1600/coelho+escolha.jpg") no-repeat center;
// background: color url("your-image-path.jpg") repeat position;
height: 400px;
width: 400px;
}
Check the example here: http://jsfiddle.net/R5cJp/2/