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
Related
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 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");
}
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/
I'm new to CSS and was hoping someone could help me understand what I'm doing wrong. I'm trying to get an image to show up but it seems that no matter what I do it refuses to display on my page. Can someone please explain to me what I'm doing wrong?
Image saved in: Users/NenaH77/assignment/images/sitebg.jpg.
Css file is saved under: Users/NenaH77/assignment/css/style.css
body{
background: url('../images/sitebg.jpg') no-repeat top top #31b8ea;
}
By having ../images I thought the image saved in the folder was suppose to go up 2 levels and into my css folder so I don't understand why my image isn't showing up :(
Your CSS background declaration is invalid:
top top should be top or top left or some other valid combination of positions.
Try :
body {
background: url('../images/sitebg.jpg') no-repeat 0 0 #31b8ea scroll;
}
You need should probably put the background color first.
body { background: #31b8ea url('../images/sitebg.jpg') no-repeat top }
Mr. Slayer gave you the right answer though.
To go up 2 levels do this
background: url('../../images/sitebg.jpg') no-repeat top top #31b8ea;
This will work. You can see the fiddle here.
body { background: url(../../img/image.jpg) no-repeat center center; background-size: cover;}
This will also take you up two levels...
I just ran into this same problem. What worked for me was putting the full path of the image from my pc, instead of from just inside the project folder.
So in this case use
body { background: url('C:/Users/NenaH77/assignment/images/sitebg.jpg')}
Instead of
body { background: url('../images/sitebg.jpg')}
I am getting problems on using multiple images in the background of my web pages. I used the following codes for it:
body{
background-image: url(images/img1.png), url(images/img2.png); }
The code I used gives me two images on background but I want to keep one of the image exactly on the center. How can it do so using CSS?
Yeah, you can do it like this
body {
background-image: url(images/img1.png), url(images/img2.png);
background-repeat: no-repeat, repeat-x;
background-position: center, top left;
}
Check a demo here.