Don't know what's going on, but for some reason my background image is not showing when linked in external style sheet.
Example1: (working)
<html>
<head>
...
</head>
<body style="background: url(images/image.jpg);">
...
</body>
</html>
Example2: (non-working - external css file)
body {
background: url(images/image.jpg);
}
The image is displays when/if I use the first example, but no image is displayed when I use the second one.
Any suggestions? Thank you in advanced...
The directory your external CSS file is stored in may be different from the directory of the page you are putting the inline styles on. You may need to start your path with a slash.
url(/images/image.jpg)
or perhaps go back a directory like
url(../images/image.jpg)
Related
I have attached the link to the site files(zip), I just want to attach the css to the html so that I will not have a call for a file that wastes my time and slows the site down. Thanks in advance!
You have a broken css style syntax at this line( #370)
input[type='checkbox']:checked{
....
background-image: url(...)
}
Here i see a nested style tag which is causing the problem, where an svg file using as background contains a style tag.
All error is in the code:
background-image: url('data:image/svg+xml .................
There are three of them, remove them from your code then it will work.
Download the index.html file code: https://send.firefox.com/download/db2db4d53aa9f186/#yK1lwyKPBiwOrPwt73fzwQ
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'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 am currently working on a Rails App, and am able to get an image as the background of the home page. However, I placed the code in the homepage css file, but it is being applied to the application css file also. This is resulting in the image being the background for all pages in the app.
In a Rails 3.1+ app, how do I get the background image to only appear on the homepage?
I have tried to move the background image css block to a different css file, but it still applied across all pages.
Declare styles inline for the page you want, if you declare in CSS file and you link those files in several documents than obviously it will take the background image for the respective element
Suppose it is like index.html
<style>
body {
background-image: url('#');
}
</style>
Or simply declare a class and apply on that particular page
.unique { /* In Your CSS File */
background-image: url('#');
}
<body class="unique"></body>
Use a class name on the body tag for that page only. Create a corresponding CSS declaration for that class.
I'm not sure if this is the best way to do this but I solved this problem in one of my apps by making two application layouts, one for the home page (home_application.html.erb) and one for all other pages (application.html.erb). Put an id tag in your CSS file:
#home {
background: url(example.jpg);
}
Make the application.html.erb:
<!DOCTYPE html>
<html>
<head>
header
</head>
<body>
stuff
</body>
</html>
Make the home_application.html.erb:
<body id="home">
stuff
</body>
Then in your static_pages_controller (or whatever controller you use for your home page) put:
def home
render 'layouts/home_application.html.erb'
end
This will render the layout with the background image for the home page and the layout for everything else for all other pages by only changing the id of the <body> tag.
Is it possible to enter a base tag/declaration in CSS, something like in HTML?
I need one because I use mod_rewrite and the url looks like that: domain.com/path/to/something/
So my background images aren't loading right (just index/home-page). All I can think of is to add the whole domain (which I have to change every time I update CSS on my webspace) but that I won't like to do.
If you put the CSS in a style sheet, the paths are relative to the location of the style sheet file, not relative to the page.
For example, if you have a style sheet at /css/global.css and an image at /images/logo.gif, you would reference the style sheet from the page like this:
<link rel="stylesheet" type="text/css" href="/css/global.css" />
(Note that you use a path relative to the root, so that it doesn't matter what URL was used to request the page.)
In the style sheet you would use the image like this:
#Logo { background: url(../images/logo.gif); }
Set up a structure something like:
/index.html
/img
/image1.png
/image2.png
/css
/styles.css
Move all your CSS rules into the external styles.css stylesheet.
Now, within the CSS, your image references are relative to the location of the stylesheet - so you can use relative URLs like background-image: url(../img/image1.png);
Finally, make sure that in your HTML code, you use an absolute URL to link your stylesheet - like:
<link type="text/css" rel="stylesheet" href="/css/styles.css" />
Using relative URLs within your CSS means you're free to move your stylesheets and background images into different folders - or even to a different domain or server - whilst the absolute URL /css/styles.css in your HTML LINK tag won't be affected by mod_rewrite or anything else that affects your pages' apparent location on your server.
If you can, you should anchor your URL's so they become root relative:
For instance, change:
background-image: url(images/image.png);
To this:
background-image: url(/images/image.png);
Secondly, even if your CSS was setup as a pure relative path, it is relative to the CSS file not the page (unless you are embedding the CSS in the page).
The CSS is in a file and looks for example like this:
.ui-widget-content { background: black url(images/content.png) repeat-x; }
Structure:
domain.com/folderone/
domain.com/folderone/style/
domain.com/folderone/style/css/
domain.com/folderone/style/css/general.css
And a look on Firebug says that it's trying to load from:
http://domain.com/style/css/images/content.png