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>
Related
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;
}
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 want to set my background styling in a css stylesheet, but want to select the background image in the html file. Whilst the style is going to be same across the website, the image needs to be different on each page.
Example of code:
==== CSS ====
body {
backgound-position: center;
background-repeat: no-repeat;
background-size:1200px 800px;
background-position-x: center;
background-position-y: 50px;
}
==== HTML ====
<html>
<head>
<link href="../css/custom.css" rel="stylesheet">
</head>
<body style="background:url('../img/Car.jpg');">
</body>
</html>
This does not seem to work. The styling in CSS is being ignored. Please note that the paths are correct, as all other elements work...
Also, I'm using a Bootstrap template.
Please help!
Thank you
D.
You wrote background:url('../img/Car.jpg'); using only background: will set EVERY background property. Simply change background:url(); with background-image:url(); :)
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.
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; }