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.
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.
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;
}`
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;
}