I have this code in HTML:
.body { background: url('bg.png'); }
I have the HTML file in the same folder as the image, and the image has exactly the same name. I don't have a separate CSS folder, this code is inside in my HTML file.
I have looked at other people with the same problem and none of the responses work.
Any response will be appreciated, even if it does not work. Thank you for your time!
The body tag is a tag, not a class. Remove your dot:
body { background: url('bg.png'); }
Apply to this:
<body>
.body refers to an element with a class body, to refer to the body tag just get rid of the dot...unless that was a typo.
Related
I've been trying to add a background image to the 'header' tag for a while now. I'm sure the problem is probably really simple and I have checked the names of my files and path, but I still can't find a solution
Does anyone know what the problem is?
Here is the html:
<link rel="stylesheet" type="text/css" href="main.css">
Here is the css:
header{
width: 100%; height: 100vh;
background-image: url('../img/sciencecool.jpeg');
}
I would really appreciate a response, thank you.
Are you using a class .header or the html header tag? Have you checked if the image and Css path are correct?
in html at first write :
in css write :
.header {
background-image : url
}
CSS
.content {
background-image: url("Pics/GameLogoBackground.jpg");
width: 100%;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
}
HTML
<div class="content" style="display:block;width:100%;height:600px">
I can't see the div background img, please help!
I have tried to solve the problem, with no success.
To reference a class, use the '.' prefix before "content" in the CSS.
So it would become:
.content {
...
}
EDIT:
As you now say the '.' was mistakenly missing from your CSS, some things to try:
Ensure that the file exists in the specified location.
Check that the div isn't behind anything else.
Check if file is present.Go to Your index page and try putting path to image into url. JPG and JPEG are not the same thing
Do not use just background-image , instead of that use for example : https://www.w3schools.com/cssref/css3_pr_background.asp
Also if you are not doing some CSS dark magic there is not reason to put CSS in tag and in style.
I checked Your code and it should be working. Problem is with Your picture. Try to pass more HTML code. There is a chance that some other DIV is covering it
I have one page and I have applied style.css to it and in that body has given by default one background Image which will set automatically by adding css file to that page.
But in that I want all formatting same but I want to change body background image.
So what I will have to do to override the css formatting ?
In style.css I have given :
body
{
background: url(images/bg.jpg) repeat-x #e4e9ec top;
}
But I want bg.png as it's background So I have used :
<body background="images/noise-bg.png">
Is there any way ?
Something like this should work:
<body style="background-image: url(images/noise-bg.png)">
In terms of specificity, the style attribute should be more specific than styles defined in a stylesheet.
You can read more about CSS specificity here: http://css-tricks.com/specifics-on-css-specificity/
Set the background-image property.
You can give a different id attribute to the body tag for pages in your site.
For example for the home page you can use:
<body id="home">
And for another page you can use:
<body id="other">
Obviously these id names are just examples, use the ones that make most sense for your site.
Then in the CSS you can target specific pages like:
body#home {
background: url(images/bg.jpg) repeat-x #e4e9ec top;
}
And for another page you could use:
body#other {
background: url(images/another-bg.jpg) repeat-x #e4e9ec top;
}
Hope that helps.
I am redesigning a wordpress blog.There are 5 different pages and i want to use different background images on each of them. Is there any way to do this?
And,i don't want to change the background element. I want to change the background image of the #main element in my css..
I already have a css file so will overwriting the same elements using php affect anything?
Any help will be appreciated...Thanks
Each page or post will have a different class on the body, ie.
page-id-1234
post-id-4567
You can use this to your leverage inside your CSS file:
body {
background: url('home.jpg');
}
body.page-id-1234 {
background: url('page-1234.jpg');
}
body.post-id-4567 {
background: url('page-4567.jpg');
}
You could give each div#main (I assume it's a div) another class. So
<div id="main" class="pageOneBackground">...
<div id="main" class="pageTwoBackground">...
etc...
Then remove the background-img from the div#main and apply individual background-imgs to each new class.
This won't affect the php.
You can change the background with CSS/URL of image to apply to only the background of the post, only on the background of the home/main page, or both pages. http://wordpress.org/plugins/custom-post-background/screenshots/
If only only need to do it for 5 pages, set the main items of the body in your main CSS, for example:
body {
background-repeat:none;
background-position: center top;
etc...
Then on each page just add:
<style type="text/css">
body {
background-image:url(/images/background1.png);
}
</style>
You can also see this on the source of this page.
I'm writing an external user stylesheet for an old HTML page that specifies the background colour in the body tag: <BODY BGCOLOR="#808000"> (note: I can't edit the HTML).
I've tried writing the obvious stylesheet:
body {
background-color: #ffffff !important;
}
but it has no effect: the original colour remains.
Can it be done with CSS? If so, how?
FIX:
I've checked it in my place it works
body
{
background-color: white;
}
You can also do
<body style="background-color:red"></body>
It works fine here (I tested it). Are you sure the stylesheet is being imported properly?