I just have a simple .shtml page:
<html>
<head>
<meta charset='utf-8'>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="Stylesheets/main.css" rel="stylesheet">
<link href="Stylesheets/glicons.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<title>
Codepixl
</title>
</head>
<body>
<!--#include file="nav.html"-->
asdsd
<div id="Scripts">
<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="Scripts/jquery.cookie.js"></script> <script src="Scripts/jquery-ui.min.js"></script> <script src="scripts/typed.js"></script> <script src="//codepixl.net/scripts/secret.js"></script>
</div>
</body>
</html>
and the stylesheet:
body{
background-color: #32CD32;
}
.loader {
position: fixed;
top: 50%;
left: 50%;
margin-top: -115px;
margin-left: -115px;
z-index: 9999;
}
But the background color isn't showing up? I've tried using html,body{} and using a doctype but nothing works! What's happening?
EDIT: I removed bootstrap and it started working... Also here's the page: http://codepixl.net/indesx.shtml
EDIT:I just had to put the bootstrap before my stylesheet -_-
Override style from Bootstrap by adding `!important``
body{
background-color: #32CD32 !important;
}
Comment your Bootstrap include and see if the body is applied. You should try to test with the minimal amount of code first and then add in things.
If that doesn't work, you can use an inspector in Firefox or Chrome to see what CSS effects are applied.
You also may want to use the network inspector in Chrome to determine if your stylesheet is actually even getting downloaded or if the link is incorrect.
html {
height: 100%;
}
body {
background-color:#cccccc;
}
This worked for me. Without setting the height in html, the background-color property of body wouldn't work at all.
Its possible that your body has a height of 0px. Add height:100% to your body styles and see if that works.
Try
<body BGCOLOR=#E8FFE8>
this sets the html tag to a mint-y green
You're using the bootstrap when this problem will be occur....
Avoid this problem to user !important keyword in css....
(Example):-
body{
background-color : #333 !important;
}`
Related
This question already has answers here:
Adding external CSS in an HTML file
(5 answers)
Closed 2 years ago.
So I tried displaying an image by making a selector class with a background-image attribute then calling it using the <div> tag. The first time the selector class was between the <head> tags. Everything seems to work fine:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
}
.bg {
/* The image used */
background-image: url("images.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
But when I put the selector class inside a separate CSS file, it doesn’t seem to work. Here is the code for the HTML file:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
Here’s for the CSS:
.bg {
/* The image used */
background-image: url("images.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-size: cover;
}
Could someone please kindly tell me what I did wrong? I thank you in advance!
Don't forget to import your separate css file on your html page :
<link rel="stylesheet" href="style.css">
And be careful for the right path.
Add a link tag inside of head in your HTML to connect your styles to the HTML.
<head>
<link rel="stylesheet" href="xxx.css">
</head>
Replace xxx.css with the path to your css file.
Check the Mozilla docs for details.
I'm a veteran to CSS and HTML, but never before have I seen this problem. I have the background image, CSS, and HTML files placed properly. I believe I have all the code right too since I checked it against a site I already made, but my image will not appear for anything.
CSS
body {
background-image: url(am-stage.png);
background-repeat: no-repeat;
background-color: black;
background-size: 100% 100%;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> AM </title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
</body>
</html>
EDIT: Chrome is giving an error saying that the CSS file can't be found. Not sure why though. The CSS is in the same directory as the HTML and the image.
I figured it out, Sublime wasn't saving the CSS as a CSS file. I told it to save as a CSS, but it wasn't adding the extension this time for some reason. I just chose CSS and manually put in the .css at the end and now it's working.
I have a laravel 5 project where I want to set and custom an image as background, but I simply can't. I can set the background to a color - that works fine, but not when I'm using an image...
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<style>
body{
background: url("/resources/assets/images/anders.png") no-repeat;
}
</style>
</head>
<body>
#yield('content')
</body>
</html>
Root the url to the site using . before the resource.
body{
background: url("./resources/assets/images/anders.png") no-repeat;
}
This is the first time I am making a mobile application. I am using Dreamweaver. The background image is not being displayed.
HTML
<!doctype html>
<html>
<head>
<style type="text/css">
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body class="main-page">
</body>
</html>
CSS file
#charset "utf-8";
/* CSS Document */
body.main-page
{
background-attachment: fixed;
background-image: url (images/home_main.jpg);
background-repeat: no-repeat;
}
Delete the space between the url value and the parenthesis:
background: url("Your url");
Here's a DEMO with the above CSS rule: Fiddle.
Instead of:
background: url ("Your url");
And here's a DEMO with this other CSS rule: Fiddle.
Here's what I did:
.bodyimage {
background-image: url('px_by_Gre3g.png');
background-repeat: repeat;
}
However, if I try to put any element such as p, h1, h2, h3 etc. it doesn't show at all.
here is my code:
<!DOCTYPE HTML>
<html>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css">
<meta charset="UTF-8">
<head>
<title>Dave's Website</title>
</head>
<body class="bodyimage">
<p><b>test</b></p>
</body>
It's nothing much, just a simple website. I'm not sure why it won't show at all. Can someone help?
Your link and meta is out of the head, which isn't valid. Try like this:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css">
<meta charset="UTF-8">
<title>Dave's Website</title>
</head>
<body class="bodyimage">
<p><b>test</b></p>
</body>
</html>
Use validator to check your markup.
JSBin with a different background-image.
Is your image transparent or partial transparent which caused the text not visible?
Try to change the font color to white or to black, and work from there.
Refer the following site for more information on images and font.
http://www.w3.org/wiki/CSS_background_images
To add body background in Twitter Boostrap I add background: url(../img/bg.png) repeat 0 0; to
body {
margin:0;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
line-height:20px;
color:#333;
background-color:#fff;
background: url(../img/bg.png) repeat 0 0;
}