CSS' body background-image doesn't work - html

The image file (a1.jpg) exists and in the same folder. But it doesn't show up, only the font's color become white.
Anyone can explain me why and how to fix it?
<style type="text/css">
p,h1,h2,h3,h4 {
font-family: Verdana, Geneva, sans-serif;
color: white;
}
a {
text-decoration: none;
}
body {
background-image: url('a1.jpg');
}
th,td {
font-family:Arial, Helvetica, sans-serif;
color:white;
}
</style>

If your title is right, you need to set a background color before the image.
It's very unclear what you are asking... Do you want to have a backrgound color and an image?
background: #ffffff;
background-image: url('a1.jpg');

the value of the background-image should be like this form and should be in the same folder:
background-image:url(../img/1.jpg);

The image file (a1.jpg) is exist and in the same folder ...
In which folder, though? The html page's folder, or the CSS file's folder? The path will only work if the image is in the same folder as the CSS file.

Related

Bootstrap background image appear on every page of my site

This is my code:
html, body {
background: url("media/images/maishahotbgimg.jpg") repeat;
It only appears on the homepage. I want it to appear on every page of my web
You create a main.cs file that you will insert in all your HTML files. This si, you Can get all the html files having the same background image.
You can use a single .css file linked in all your pages and apply the background in the css, for example:
body {
font-family: 'Open Sans', sans-serif;
background-color: #000000;
color: #FFFFFF;
background-image: url(../../imagesfolder/backgroundexample.svg);
background-size: cover;
}
I tend to use a background color in case the img can't load properly (connectivity issues or whatsoever)

CSS Background image only working inline html

This is my first question (and first post) on Stackoverflow. Hope to contribute more once I become skilled enough.
Anyway, I'm having trouble understanding why my background image appears when I reference it using css that's inline with my html, but not when I put it in a separate css stylesheet that the html links to.
Here's what my inline css looks like, which works fine:
<style>
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
</style>
My styles.css file is shown below, which contains the exact same code:
<style>
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
p {
font-family: 'Helvetica Neue' Helvetica;
font-color: white;
}
h1 {
color: white;
font-family: 'Helvetica Neue';
font-size: 3.5em;
text-align: center
}
.textbox {
background-color: beige;
height: 100px;
width: 100px;
padding: 10px;
margin: 50px auto;
text-align: center;
font-family: 'Helvetica Neue' Helvetica;
font-weight: 200;
}
</style>
...but it no longer shows the background image. Everything else from the css file (paragraph formatting, text size/color, etc.) shows up in the browser just fine.
Also, the html file, css file, and background image are all in the same directory. So I figured I don't need to use "/background.jpg", "../background.jpg", etc. which I've seen suggested in other cases in other posts on Stackoverflow.
I tried to find an answer to this but couldn't find one. Any help is greatly appreciated!
But, in a separate .css file, I typed the exact same code as above, linking to it in the html file by using:
Did you remove the <style> & </style> tags from the CSS file ? For example, like:
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
These HTML tags are only required around your CSS rules if you're including CSS directly into your HTML.
i need to see your file and folder structure.. makes sure the the stylesheet you are referring is in the same folder where the html is, if so the same code will do.. if you css is in another folder like in css/styles.css than you have to change the link as well as the href of stylesheet to something like ../image.png
the folder structure matters here
Take the style tags out of your .css file.

How to detect differences between design and site?

I have this site:link
I put an image to understand better
The difference bothers me more background and text size.
Font used in photoshop is "ArchivoNarrow regular", this I put myself in the CSS code below
CODE CSS:
.details-footer{
display: inline-block;
width: auto;
font-size: 9pt;
color: white;
font-family: ArchivoNarrow regular;
}
Can you tell me please from where all these differences and how can I fix?
Thanks in advance!
To add font, insert this in your index.php or whatever file, that containt links to your css files.
<link href='https://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'>
You need to insert this above all other css links.
Then add following line to your css, where you need it:
font-family: 'Archivo Narrow', sans-serif;
For example, to apply this to the footer:
.details-footer {
font-family: 'Archivo Narrow', sans-serif;
}
Done!
P.S.: It's not a good idea to upload the font to your server, you should use Google Fonts when you can.
Have you defined the font? If not you do so like this:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
then you need to upload the .woff font file to your folder.

background-image doesn't render image

I was trying to set my page a background image and yet it didn't seem to work the way I expected it to. Here's the code:
body
{
background-image: url("sf.jpg");
background-repeat: no-repeat;
background-size: 100%;
font-family: "Kozuka Gothic Pro", Avenir, sans-serif;
}
I was wondering what went wrong here. Thanks in advance. Note: the image was in the same folder as the file i'm running.
Demo
Just a small change in your code.
body {
background: url("http://i.stack.imgur.com/DUYP4.jpg?s=128&g=1");
background-repeat: no-repeat;
background-size: 100%;
font-family: "Kozuka Gothic Pro", Avenir, sans-serif;
}
Coz background size cannot be 100 it can be cover or contain, and use background instead of background-image and all, use a background-size:cover it will work
body {
background : url (ur image path);
background-size:cover;
width:100%;
//and other necessary code
}
Looks like you have double tab indent bring it all back on tab.
Change the permission of the image to 777 and the image will show up correctly.

CSS I have a styling.css file but ignores my CSS code...But creating a new one makes it work

So I was having this trouble that my background image was not working at all...
I had the .css file correctly added with element in html. However I never got it to work. The only way it started to show me the background image was when I decided to create a NEW .css file which i called bodystyle.css and it finally did show me the background image.
The code used was the one below... I just pasted it to the new .css file and included the new file and it worked like a charm... why would this happen? Has anybody encounter this?
body {
height: 100%;
font-size: 62.5%;
font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
color: #333;
background: url('http://wilco/includes/img/body-bg.jpg');
padding-top: 0px;
}
a {
color: #4681da;
text-decoration: none;
}
This is modify version of your program
Directory Structure: in windows
D:\MYPROG\wilco\includes\img
in this folder your image body-bg.jpg exist
D:\MYPROG\styles
Your css file NEW .css exist
AND last
D:\MYPROG
your prog.html file exist
Code is as follow
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="styles/NEW .css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>
<p> This is my Background</p>
</div>
</body>
</html>
AND THIS IS YOUR CSS FILE
body {
height: 100%;
font-size: 62.5%;
font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
color: #333; width:970px;height:;background-position: center top;
margin:auto;
background-image: url("../wilco/includes/img/body-bg.jpg");
background-repeat: repeat;
padding-top: 10px;
}
a {
color: #4681da;
text-decoration: none;
}
I tried in my computer its working. you try with your image and tell me if any queries
bye
What I do to "fix" this, is F12 to open the developer console (in most modern browsers), navigate to the head element, then the link element, and open the link to the css file in a new window.
Once it is there, press Ctrl+F5 (or Cmd+R on OSX).
Then go back and refresh your page...
All your files (.html,.css and background image) should be in the same folder.
try checking that..