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; }
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 have the code bellow in the html file and the problem is the background picture is not showing, nor when I try doing it from the css file. Can somebody help me out what am I doing wrong? Thanks in advance!
<head>
<style>
body{
background-image: url("trees.jpg");
}
</style>
</head>
try using !important
<head>
<style>
body{
background-image: url("trees.jpg") !important;
}
</style>
</head>
First of all you need to set height of your body if their is no-content in the body then the image will not show
secondly, this code will only work if your html file and image are both in same folder
<head>
<style>
body{
background-image: url("trees.jpg");
}
</style>
</head>
if the image is in say img folder then you need to do this
body{
background-image: url("img/trees.jpg");
}
but if the img folder is not in the same directory as html but is in it's parent directory. you need to do this
body{
background-image: url("../img/trees.jpg");
}
Most likely it can't find the file destination, try to check if you typed the file name right, even the file extension. Sometimes is the file extension in uppercase, like ".JPG".
I have simple code with a text inside body tag for html and one css stylesheet just to have a background image, and I am not sure why background image doesn't show up at all.
Here's my html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
Test
</body>
</html>
and the CSS is just this :
#body {
background-image: url(images/ninja.jpg);
}
I have "ninja.jpg" inside the images folder. and still background image doesn't show up. I have tried putting images/ninja.jpg within quotes as well(ie: "images/ninja.jpg") but it doesn't work.
Don't use #body
Use bodytry
body { background-image: url(images/ninja.jpg); }
for css
#body refers to the element with attribute id="body"
body {background-color: green;} /*this is the actual body*/
#body{background-color: red;} /*this is the paragraph*/
This is green
<p id="body">This is red</p>
no # required to html tag selectors:
body { background-image: url(images/ninja.jpg); }
You are using a # hash it not needed until you are work with element id for css
Just remove # and it work.
body {
background-image: url(images/ninja.jpg);
}
body is not an ID...we use # for only id selectors,
body is just a tag,
so you can simply use below...it works fine
body { background-image: url(images/ninja.jpg); }
I'm setting a landing page for My new website
I've created an image, and I'm setting it as the background image. Unfortunately, I can't seem to figure out at all how to get it to be full screen, and scrollable - so you can just scroll up/down to see the full image - but without having any white spaces or anything.
<!DOCTYPE html>
<html>
<title>On The Ropes Boxing! Coming Soon!</title>
<body>
<style>
html {
height: 100%;
margin:0px;
background: url(comingsoon.jpg) no-repeat top center;
background-size: cover;
background-attachment: scroll;
}
body {
min-height: 100%;
margin:0px;
}
#appcontainer {
position: relative
background-color: rgba(255, 255, 255, 0.7);
width:560px; height:2220px;
left:20px; top:20px;
}
<img src="comingsoon.jpg" style="minwidth:100%;height:100%;" alt="" />
</style>
</body>
</html>
That is what I have so far. I'm completely new to HTML and CSS, so I'm basically just learning on the job and going through trial and error. I fully expect to be told I'm doing this completely the wrong way. Any advice is appreciated - just be aware that I may need to be told as if I'm an idiot :)
Thanks so much.
Replace the img tag in your code with this:
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" style="width:100%;position:absolute;z-index:-1" alt="" />
And move it out of the style tags.
Before I get into the answer, allow me to correct your code first.
The basic format for a webpage is this:
<!doctype HTML>
<html>
<head>
//Titles, scripts, styles, etc.
</head>
<body>
//Everything else, can also hold scripts and styles.
</body>
</html>
You're missing a head in your code.
Second, don't place html tags inside style tags (referring to your img).
As for your question,
<!DOCTYPE html>
<html>
<head>
<title>On The Ropes Boxing! Coming Soon!</title>
<style>
html, body {
height: 100%;
width: 100%;
margin:0px;
border: 0;
}
.splash {
width: 100%;
z-index: 0;
}
//Rest of styles
</style>
</head>
<body>
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" class="splash" />
</body>
</html>
Putting the image as the background won't work, as the page won't have anything to scroll to. Putting the background as an image will allow the page to scroll.
When I put this code in my html file, it is working without issue:
<style type="text/css" media="screen">
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
</style>
but when I move it to my css file as this:
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
This is my html:
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg" />
I am assuming it's due to the image location but I'm not sure since I've tried variations of the path and never got it to work.
Any suggestions?
EDIT
Sorry, you can't read my mind, I know.
When I place the css in the html file, the image displays fine. When I move it to the css file (site.css) it is not displaying at all. I've tried several different paths and it isn't being displayed no matter what I put in there.
UPDATE #2
When I change my html to this:
<div class="page">
<div id="header">
<div id="headerimg">test</div>
I am getting the image behind the text as 1 line that says test but not the full size of the image.
So it is apparently not displaying the image due to the size of the div? I changed the css to this:
height:130px;
but that did not change the height at all.
The two bits of CSS are not equivalent.
In one, you have #headerimg (id selector) which is a very different selector to .headerimg (class selector).
#imgplacement is also missing from the second sample.
As for the image issue - you need to ensure the correct path to the image directory.
This will be relative to where the CSS is - if in a CSS file, the image needs to be relative to the CSS file. If it is embedded in the HTML, it needs to be relative to the HTML file.
Since the path is rooted (starts with /), it should work everywhere. Use the developer tools to determine where it is looking for the image.
Include your css like this on the home page:
<link rel="stylesheet" type="text/css" href="route_to_your_style.css" media="all" />
And then be careful on routes for your image.
include the CSS file between the <head></head> section of your HTML like this:
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/cssfile.css" />