So I am trying to use a stylesheet for the background-image of my html page. And it just isn't linking or just isn't working. (Yes html and css files are all within the same directory/folder).
This is my code that I have used
<html>
<head>
<link href="stylesheet1.css" rel="stylesheet" type="text/css">
<body>
<center> <p style="border:1px solid white; padding:15px; color:blue; font-family:courier; font-size:200%;"> Welcome
</body>
</head>
</html>
and then the stylesheet code itself contains this. and even in the link type, i have tried using /png/image.
body {
background-image: url("image-name-here.png");
backgound-repeat: no-repeat;
background-position: center top;
}
and yes i have tried replacing the tag body with head.
You had a spelling mistake in background-repeat, you spelled it as backgound-repeat. Also, if you haven't already, there needs to be a <body></body> tag in the HTML.
Update the HTML,
<!DOCTYPE html>
<html>
<head>
<link href="stylesheet1.css" rel="stylesheet" type="text/css">
...
</head>
<body>
...
</body>
</html>
CSS,
Fix the mistake in your stylesheet,
body {
background-image: url("image-name-here.png");
background-repeat: no-repeat;
background-position: center top;
}
Related
which tag and css we will use for adding background image and how remake it's size full length
I have tried by using external css in html of head section background-image: url() ;
You have two options: either create it in your in CSS or read the documentation in w3school.
example :
<html>
<head>
<style>
body {
background: url(https://cdn.urldecoder.org/assets/images/url-fb.png);
background-repeat: no-repeat;
background-size: 100% 100vh;
</body>
</head>
<body>
<p>hello</p>
</body>
<html>
<body>
<style>
body {
background: url(# write the address of image);
background-size: 100%;
}
</style>
<p>HOPE IT HELPS !</p>
</body>
I'm trying to add a background color to my header but it's not adding it when i have it written in the css file.
HTML Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="CSSPage.css">
</head>
<!--
<style media="screen">
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
</style>
-->
<header id="background-color">
<hr>
<p>Sample</p>
<hr>
</header>
</html>
CSS Code: CSSPage.css
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
It only works when it's on HTML but not when it's on the css file.
I've also tried adding !important but it didn't do anything.
The rest of the styles for other id works except this one.
Just change style class(#background-color{...}) as well as id to some other name if possible (other than background-color) and try.
I'm an idiot. Apparently the CSS file doesn't get applied even if you add new things to it if you don't manually save. I'm sorry for wasting everyone's time. It works now. Thank you for pointing me into JsFiddle's direction. Since it worked perfectly there.
I have looked at lots of different answers to similar questions and cant seem to find the answer anywhere. The question is simple, why are my #body styles not being applied. Basically I just want a background color to be applied. Interestingly, none of the styles are actually being passed to from the CSS to the body. The code is simple but not working.
When i use "inspect element" i can see that all my other styles are working fin but nothing is being passed to the body element and I cant figure it out!
I'm sure its something really simple but would appreciate your help on this one. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="contact_bar">
CSS is:
#body{
background-color:red;
}
#header{
background-color: #3862C6;
height:500px;
}
#contact_bar{
background-color: #020731;
height:150px;
}
It's not #body{... , but body{... (without the "#")
What an idiot.... as soon as I poseted i notice the "#" infront of body....
You should know that in CSS # is used to style id elements, but body is HTML tag and it should be styled as per the CSS given in this answer.
Your HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="contact_bar">
CSS should be:
body{
background-color:red;
}
#header{
background-color: #3862C6;
height:500px;
}
#contact_bar{
background-color: #020731;
height:150px;
}
So this is a weird one, I'm getting a small margin at the very top of my page even though I've applied the standard CSS reset. If I open the inspector in Chrome / Firefox / or even gasp IE, I see that the body is reading my margin:0 reset, but still adding a gap regardless.
Gap:
Chrome Web Inspector that shows margin:0 is being honord:
So, the super duper weird part here is that if throw an important like margin: 0 !important; , the gap goes away. I've used this exact template set up many many times without issue. Hopefully someone sees something that is eluding me right now.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/css/Reset.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/Site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.9.0.js"></script>
<link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500' rel='stylesheet' type='text/css'>
<script type="text/javascript">var base_url = 'http://localhost:64789/';</script>
</head>
<body>
<div id="wrap">
<h2>Index</h2>
</div>
</body>
</html>
CSS
Note: Site.css is an empty file at this point, as I just started this project.
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form {
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
}
a {
text-decoration: none;
}
* {
font-family: 'Ubuntu', sans-serif;
}
body {
background: #f0f6e8 url(../images/gradbackground.jpg) repeat-x 0 top;
}
#wrap {
width: 100%;
background: transparent url(../images/leaves.jpg) no-repeat center top;
}
The margin is on the <h2>, not the <body>. There must be some other selector for h2 that is adding the additional top margin. In your own Site.css styles, include margin-top: 0 for the h2
Bootstrap is probably overriding it from another element. Check the elements it is nested in for margin being set in main.css.
I would like to use stylesheet to set background image in my DIV on html page.
My css file:
#MyDiv {
background-image: url('Images/prechod.png');
background-repeat: repeat-x;
height: 400px;
}
And my page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="Css/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div id="MyDiv">
</div>
</body>
</html>
I tried also this and it works.
<body>
<div style="height: 400px; background-image: url('Images/prechod.png'); background-repeat: repeat-x">
</div>
</body>
But I would like to have everything in the css file. I hope it's simple and somebody will help me.
Paths in your css file are relative to the location of the CSS file, not the HTML file.
You probably just need to change your CSS accordingly - for example if your css file is in Css/StyleSheet1.css relative to the HTML file, just change it to this:
#MyDiv {
background-image: url('../Images/prechod.png');
background-repeat: repeat-x;
height: 400px;
}
If it isn't a path issue, most likely you have some other style of higher specificity overriding the #myDiv declaration in your CSS file (for example something like body #myDiv { background: none } or similar). That would explain why it works as an inline style (as these are of the highest specificity) but not in your stylesheet. However based on the fact that your path was incorrect to begin with I would suspect that is the culprit.
background-image: url('../Images/prechod.png');
The Path has to be set relative to the css
Relative paths in the CSS and then adding those in there:
/** CSS **/
#MyDiv { url('../Images/prechod.png') repeat-x; height: 400px; }