I'm trying to repeat an image I have by x and y, using repeat-all. The image isn't displaying.
Here is the CSS code:
body
{
background-image: url('Content/images/test.png') repeat-all;
}
I'm sure the CSS file is linked correctly, here is the Content folder of my application:
Any help?
That's actually not being linked correctly, if that code is in your Site.css file. It should be:
background-image: url('images/test.png') repeat-all;
Related
I'm trying to load my image which is inside src/images/hero.svg through css using background-image:url('./images/hero.svg') in codesandbox.folder structure.
Works fine when I try to access it inside function component with but with css it's not loadingcode
So you want to add images in the css:
so for adding images in css with the use of the url specified as follows :
code for adding background image in CSS:
background-image: linear-gradient(rgba (4,2,54,0.7),rgba(4,9,30,0.7)),url(url of the image);
In my style file, I have a background with a url that links to my image. But the image doesn't display on screen..
So, I have my image saved in:
public/img/coding.jpeg
And my Sass file saved in:
resources/assets/sass/style.scss
I have tried this code in my Sass file:
background: url("/public/img/coding.jpeg");
But that doesn't work. Why not..
did you apply it to the body in your CSS? :)
body {
background: url("/public/img/coding.jpeg");
}
you can also just apply it directly to your body tag...
<body background="/public/img/coding.jpeg">
</body>
I am trying to set my site's background image to a local img through CSS. But the code will not let me use a local image, but a non-local internet image is fine. Why is that?
Code:
html {
/* background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); */
background-image: url("img/diamondPlate_bg.jpg");
}
The bottom image is the one that should show, but it doesn't. but the top image does work. Why?
You have to provide the full image path, as the browser can't determine where to search for.
According to your CSS file path, I will suppose it is at the img directory with your HTML page, you have to change the url as follows:
body {
background: url("../img/diamondPlate_bg.jpg") repeat 0 0;
}
This is like going back one folder and entering the img folder to fetch images.
I am working on an app using Bootstrap as the framework in Rails (bootstrap-sass). What I want to do is add a sweet background image but I can't seem to override the white background of the body no matter what I try.
Has anyone had success with this? What do I have to change or add to get this to happen?
In addition to trying other things, I have even tried wrapping all the contents in the body in a div with an id, then calling that class in the custom css.scss file where I have successfully customized other aspects of Bootstrap.
The code I added using the id:
html body #bgimage {
background-image: image-url('/images/cityscape.jpg');
}
Edit:
I just checked the errors in the development local server and I have this: ActionController::RoutingError (No route matches [GET] "/assets/images/cityscape.jpg"):
/Edit
Thanks!
There was a similar discusion recently, the problem was that background-image oddly does not work with bootstrap. Try:
html body #bgimage {
background: url('cityscape.jpg');
}
Notice, that asset-pipeline does its work for finding the proper location of your file, so you don't have to mention the path.
If your cityscape.png is in assets/images/ directory, please use the following:
html body #bgimage {
background-image: url(image_path('cityscape.jpg'));
}
And to use your original source, you have to remove /images/ from your image-url as:
html body #bgimage {
background-image: image-url('cityscape.jpg');
}
can some on help me on how i can reference images i have all my images stored in an image folder which is located in the root folder (..\images) in my css class i have the the following
#image
{ background-position: left;
background-repeat: no-repeat;}
.background
{
background-image: url(..\images\image.gif);
}
and in my .cs file i have
image.Attributes.Add("class", "background");
image is a div tag which is in my aspx code !!
when i run this code i image doesnt show, any ideas what i might be doing wrong
You should turn those slashes in your paths around from \ to /
Also, I usually put an url keyword before the parenthesis in CSS, but I am not sure if this is required:
background-image: url(../images/image.gif);
UPDATE: If the image field in your C# code is some kind of webcontrol, say an Image control, you should use the setts on its CssClass property rather than explicitly adding a class attribute. What you are doing now might yield two class attributes in the markup, which might not get handled well. You can do a quick "view source" on your page to test if this is the problem.
If this does not help, see Nick Cravers answers. The path from your CSS to the image is wrong, or the image file is not where you believe it is.
URL references in a CSS file must be relative to the CSS file.
Make sure that compared to the CSS file the image is in ..\images, if not, adjust it to be in relation to the CSS.
Also your background declaration should be like this:
background-image: url(..\images\image.gif);
Example:
CSS = \CSS\styles.css
IMG = \Images\image.gif
Style = url(../Images/image.gif);
CSS = \styles.css
IMG = \Images\image.gif
Style = url(Images/image.gif);
The style definition:
background-image: url(../images/image.gif);
is saying "go up one directory and into the images folder". Try:
background-image: url(/images/image.gif);
This assumes that the images directory is in the root of your website.