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>
Related
I have a file structure of:
home.html
img/bg_damask1.jpg
css/style.css
When I set my body background image I can't get it to load. I've tried:
background-image: url('../img/bg_damask1.jpg');
background-image: url('/img/bg_damask1.jpg');
background-image: url('img/bg_damask1.jpg');
But none are working. How do I get my css to reference the background image?
ETA: In browser dev tools I see that no matter what file path I put in, the browser is only referencing 'bg_damask1.jpg' without the file path. If I edit it in dev tools the image shows up using option #1. Now I'm stumped as to what's causing the breakdown.
If you try to use for this body.
Your css must be like this
body {
background-image: url(../img/bg_damsk1.jpg);
}
Also for you example is
body {
background-image: url(http://www.radioviva.fm.br/images/backgrounds/bg-squares-3d.jpg);
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
</body>
</html>
That example you must just change url path to yours.
Third option should be working, check the source code in your webbrowser and check if the image is actually found. If not try reuploading the image, renaming it or placing it in another folder.
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'm trying to create a webpage using a "central" CSS external sheet that is called by THREE HTML files. The problem that I have is to do with background color; each HTML file should have a different colour. I start off by adding the line
<link rel="stylesheet" TYPE="text/css" href="EuropeanCountries.css" />
within the and of my HTML file called "France.html". I add exactly the same line within the and of my other two HTML files called "Italy.html" and "Germany.html". I then add the line inside "France.html" and inside "Italy.html" and inside "Germany.html". Then, I go to my css file called "EuropeanCountries.css" and I add the lines
body#page1{background-color:rgb(255,0,0);}
body#page2{background-color:rgb(0,255,0);}
body#page3{background-color:rgb(0,0,255);}
I then save ALL the HTML files and css external sheet inside the same directory. I then try to open "France.html" with the Opera browser and the background color is WHITE, which is what it should NOT be. The background color for the other two HTML files are ALSO white! So something is wrong. When I link ONE HTML file with the css file, eg. "France.html" with "EuropeanCountries.css" (and there are no other HTML files in my directory), the background color works just fine. But when I try to link multiple files with one CSS file, things go awry. Can anyone please point out to me exactly where I've gone wrong?
according the css, your body should have tags:
<body id="page1">...</body>
etc,
but I'd go with
.red { background: red; }
.green { background: green; }
.blue { background: blue; }
and
<body class="red">...</body>
correspondingly
I have been trying to change the background image of the wordpress theme but i am unable to change it.
I tried:
body {
background : url('images/squad.jpg');
}
I placed this code under design-settings in custom css styles. But i do not see any changes
in wordperss stylesheet file, search for body and html selectors and check if any background applied to them.
in html selector add this property:
backbround: #fff url(imagePath) no-repaet top left;
you can change #fff to the color that is more related to your background image. it's not necessary, but it's best practice.
if your background image is a pattern and you want it to be repeated, change no-repeat to repeat this should work.
Is your css file is in separate folder?
try this
body {background : url('../images/squad.jpg');}
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;