enter image description here
I am getting a background image from external CSS to display. When I check in the element inspector it shows me invalid property used.
body {
font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;
background-image: url(../img/background.jpg);
background-size: cover;
overflow: hidden;
}
What am I doing wrong here?
Use 'background', not 'background-image'. I.e.
background: url(../img/background.jpg);
You have written background-image:url(..img/background.jpg) this is correct,may be you have inserted a wrong path or may you have leave a space in "background.jpg" file like this.."backgroung .jpg" While crating th image name.. Check it out..i have leave a large space in image file for ur understanding,there may be one space only
Related
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.
I have a simple html and css website which was working fine until i updated some content.
The main background is a colour with one image in the top right corner which is in the 'body' div properties. the font family is also in the 'body' properties.
everything else in my website (div layouts, menu bar background image and div back colours etc.) are all displaying ok, but i have no main background and all font is displaying at a small size and as serif when my set font family is san-serif.
body{
min-height:700px;
min-width:900px;
margin: 0;
padding: 0;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #666;
background-image: url(Images/backleave4.png);
background-repeat: no-repeat;
background-position: right top;
}
As its was working just fine before, i assume the issue is that for some reason its not reading all the body properties correctly.If anyone can give me some advice that would be awesome!
Thanks
EDIT:
Over night it somehow fixed itself, for the most part. I don't know what was wrong. Gahh technology!
Your posted CSS is fine. Can you post a link to the website?
Upgrade your #rightwrap to-
background: rgba(255, 255, 255, 0.6);
I think you want to show your background image all over the page.
I have a background image set for the web app first time its working good but when i refresh browser its not loading.Another behaviour i noticed chrome its working good but IE is having issue.Any idea why its happening ?
body {
/*background: #fafafa;*/
background: url('../images/home.gif') no-repeat 0 0;
background-attachment: fixed;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
}
From comments I could understand browser is caching image, HTTP status 304 confirms it.
Use backgroud image url appended with some query param with version (random)number. This prevents browser from aggressive caching
url('../images/home.gif?v=0')
<body style="background-image: url('https://*****/images/bg-01.jpg'); background-size: 100%;">
Try this
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 on the body tag:
body{
font-family: 'Helvetica', Arial, Lucida Grande, sans-serif !important;
font-size: 12px;
line-height: 1.4;
min-width: 1050px;
min-height: 500px;
color: #333333;
}
Works perfect, however it doesn't seem to work on input fields :S For some reason (while those input fields have NO styling) it uses Lucida Grande for input fields text and rest is just Helvetica, I am 100% sure there is no other font-family tag else where.
What is causing this and why?
Input fields usually have their own style set in browser’s default style sheet. This typically means a browser-dependent font family and a font size of about 90%.
To set their font, you need to use a selector that refers to them, e.g. using
body, input {
font-family: 'Helvetica', Arial, Lucida Grande, sans-serif;
font-size: 12px; /* if that’s what you want... */
line-height: 1.4; /* somewhat excessive */
color: #333333; /* if that’s what you want, but it reduces legibility */
background: white; /* always set background when you set color */
}
body {
min-width: 1050px; /* if you really want this... */
min-height: 500px;
}
(but note that this also affects submit buttons).
Try to use following :
input {
font-family: inherit;
}
Or set any other font, and let see does this change issue.