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); }
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 color in the body property of my CSS in Codepen. Have not added anything but the title to the webpage, but it does not changes color regardless of where I put the tag. Tried to place the <body> html tag before <head>, erased <main>, still no change.
<!DOCTYPE html>
<html>
<head>
<title>Project Survey Form</title>
</head>
<body id="body">
<main>
<h1 id="title">Survey Form</h1>
</main>
</body>
</html>
<style>
body {
background-color: blue;
}
</style>
It keeps displaying the white background. Do you know of any workaround for this?
Codepen at CSS section, you don't need style tag
<style>
body {
background-color: blue;
}
</style>
to
body {
background-color: blue;
}
I have an img inside the a tag. When hovering on a, I want to change the image url. Is it possible with CSS?
<img src="img/takipet.png" alt="">
To directly answer your question, here’s one CSS-only approach:
HTML:
<div id="the-image-wrapper">
<img id="image-main" src="some/src">
<img id="image-alternate" src="some/other/src">
</div>
CSS:
#image-alternate {display: none;}
#the-image-wrapper:hover #image-main {display: none;}
#the-image-wrapper:hover #image-alternate {display: inline;}
You’re probably better off trying an alternate approach however, such as using a background image instead. Of course, it really depends on the application.
If you’re going the background-image route, you should take a look at using sprites.
You have few ways to do this.
If you prefer to use css you should replace with background-image property
a.some_class{
background-image:url(your_image_url);
background-repeat: no-repeat;
display: block;
height:image_height;
width:image_width;
}
a.some_class:hover{
background-image:url(your_image_url2);
}
Also you can use two images wrapped with Div. And show/hide needed on div hover.
With jQuery
$('a img.your_img_class').mouseover(function () {
$(this).attr("src", "hover_1_src");
})
.mouseout(function () {
$(this).attr("src", "old_src");
});
If it's a background image, you can do this:
.element:hover{
background-image:url(bg.jpg);
}
or even
.element:hover a{
background-image:url(bg.jpg);
}
If the a tag is within something else.
Change src="" attribute is can't change by Using CSS . Just Change with Javascript Or Jquery.
you can Just Control Styles By css .
Create Div Element And set background-image for it.
HTML Css:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#MyDiv{
width:100%;
height:100%;
background-image: url('Image.jpg');
}
#MyDiv:hover{
background-image: url('NewImage.jpg');
}
</style>
</head>
<body>
<div id="MyDiv" > </div>
</body>
</html>
Html Javascript:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="http://codeorigin.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" onmouseover="this.src='http://www.google.com/images/srpr/logo11w.png';" >
</body>
</html>
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; }
Okay here's my file structure:
+WWW
index.html
style.css
map.jpg
CSS:
body {
background: #000 url('map.jpg') repeat/repeat-x/repeat-y/no-repeat scroll/fixed top/center/bottom/x-%/x-pos left/center/right/y-%/y-pos;
}
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
</body>
</html>
PROBLEM: map.jpg does not display in any browser (Firefox, Safari) Or TextMate Preview!
You have two issues here, first is your CSS being off, it shouldn't have that laundry list of options for each argument left in there:
body {
background: #000 url('map.jpg');
}
Then your <body> doesn't have any content, so it has no dimensions, you'll need to put something in there to see much if any of the image, otherwise the <body> element's height is going to be very small if not 0, depending on the browser.
Try adding overflow:hidden;. This worked for me.
body {
background: #000 url('map.jpg') no-repeat top left;
}
The example you used showed all possible option values.
That doesn't look like valid CSS, did you forget to remove the sections you didn't need?
Try something like this:
body {
background:#000 url('map.jpg');
}
I was working on wamp... and it works fine with relative url.
body{
background:url(../image/circle.png) no-repeat;
}
This should definitely work.
Try getting rid of all the extra junk in your css:
body {
background: #000 url('map.jpg');
}
Make sure the image is in the same folder that your css file is in.