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;
}
Related
I have been having this problem for a couple of weeks now. I have this code
div{
margin: 0;
padding: 0;
border: 5px outset black;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>testing</p>
</div>
</body>
</html>
and it is doing this:
I have looked at tutorials, searched on Stack Overflow, and even when I run it in the code snippet, it works. What am I doing wrong!?!?
Edit: I also wanted to add this image to show you that it works perfectly fine in the code snippet.
Try opening it with a different browser.
This piece of code in a file called index.html just sets the background of the page to be light blue.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body
</body>
</html>
When I put it in a file called stylesheet.css in the same directory however, and link it using an href, the background remains white. Here is the html and css files:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body
</body>
</html>
stylesheet.css:
<style type="text/css">
body {
background-color: lightblue;
}
What's going on here? How come it doesn't work the same way?
In an external stylesheet, you don't need the <style> tag. So, the contents of your external stylesheet should simply be
body {
background-color: lightblue;
}
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;
}
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;
}`
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.