this is the hmtl of the page and i m not seeing where s the error and the img doesn't show in notepad++.thanyou to answer me
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
</body>
</html>
/* this line doesn't show the img*/
body {
background-image: url("C:\Users\zineelabidine\Desktop\fayss.jpg");
}
For an img tag, you don't use a fixed path like C:\Users\zineelabidine\Desktop\fayss.jpg. Use a relative path like url('fayss.jpg'). (That path was assuming that the image and the html file are in the same folder)
Keep your Image and html file in same folder and use this code, Hope it helps you:
body {
background-image: url("fayss.jpg");
}
Related
I am trying the code in the link shown below for responsive layout design.
1) As it it, if the CSS code is included in the html code displays perfectly as expected
2) But if I move the exact CSS code as a different file and link to it from the html code, visually the boxes layout don't work so well. The result seems similar in different browsers.
Would someone know the reason for that? I was expecting to get more similar visual results
Also would it be good in general for a website html code to include the css in the html code as in (1) or as a different file as in (2)
https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_blog
Here is the code I used to link to css file
<!DOCTYPE html>
<html lang="en-US">
<body>
<head>
<title>My page</title>
<link rel="stylesheet" href="styles.css">
</head>
here is the top code of the CSS sheet
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
And here is a screenshot of the result
edit
reviewed css sheet code after Lunex answer (top part)
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
Create a css file. Let's say you name it "style.css".
In this file you put all the content which is in the < style > tag.
In your html file inside the head tag you add:
<link rel="stylesheet" href="style.css">
This should be working, considering you've done everything right.
Edit for your edit:
You don't need html tags in your css file.
The content of the html file should be:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the body content here -->
</body>
</html>
The content of your css file should be:
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
// ...
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
I am taking a couple of classes about HTML and CSS but I am really having a difficult time understanding how to make a background image with external css. I am successful at external css in other ways, just not a background image.
This is my code for the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="/CSS/forms.css">
</head>
<body>
<div id="Pictures"</div>
</body>
</html>
And this is my code for the CSS:
#Pictures {
background-image:url(../home/brian/Desktop/Becky.JPG);
}
I can get it to work using the <style> tag but not external CSS.
File structure is key. Where is your .html file located in relation to your .jpg file?
I suggest that you use another folder (call it 'assets' or 'images', something like that) to put your images into, instead of putting them on your Desktop.
So, in your case your file structure would look like this:
index.html
css/forms.css
assets/Becky.jpg
The path in your external css file would then be:
#Pictures {
background-image: url(../assets/Becky.jpg);
}
#pictures {
background: url("http://www.w3schools.com/cssref/img_flwr.gif");
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="/home/red/Desktop/Web Projects/Test/style.css">
</head>
<body>
<div id="pictures"></div>
</body>
</html>
everything in my style sheet will work apart from divs. Kinda strange. I created a test page to try and see why it won't work but no joy.
If I include the div in a tag at the top of the page it will work. Just not if I link the css file itself. I will put my code below.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="boxed">
This should be in a box
</div>
And a clean stylesheet. With just the information for the div class.
#charset "utf-8";
/* CSS Document */
.boxed {
border: 1px solid green;
}
Hopefully, someone can point me in the right direction.
Instead of this, try just typing the full URL , so instead of "style.css" ,
type "http://yourWebsite.com/style.css" instead of "style.css"
<link type="text/css" rel="stylesheet" href="style.css" />
edit: also add type="text/css"
2nd edit:
you also need to have a title in your head, that is required. maybe it's causing this issue, maybe not
<head>
<title>This is my Title! </title>
</head>
Try this in your Style.css file:
.boxed {
border: 1px solid #008000;
display: inline;
}
check to see if you haven't misplaced any '}' or semi columns and i don't think you need the
#charset "utf-8" in your stylesheet since you already specified it in your head
I'm a beginner programmer and have looked at several resources, but I can't figure out why location of a external css stylesheet matters. For example, changing the link to the file and the location of the file, respectively, will determine if a picture loads or not:
A simple line in the css:
body {
background: url(./images/test.jpg) center center fixed no-repeat;
}
This will load a picture:
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
This will not:
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
Why?
Its because there is no images folder inside your css folder. It's relative to the css file, not the html file.
You can fix it like so:
body {
background: url(../images/test.jpg) center center fixed no-repeat;
}
This goes up to the root directory first, then into the images folder.
Then you can use your css line:
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
The image location is relative to the CSS file's location, not the HTML file's location.
I am very new to css so this maybe a simple answer. I have 2 scenarios and 1 works the other doesn't. I hope someone can help me out.
WORKS:
<head>
<style type="text/css">
body {
background-image:url('views/default/images/home.jpg');
;}
</style>
</head>
DOESN'T WORK:
<head>
<link rel="stylesheet" type="text/css" href="views/default/home_style.css" />
</head>
In home_style.css>
body{
background-image:url('views/default/images/home.jpg');
margin-top: 0px !important;
padding-top: 0px !important;
}
It looks like your CSS file is in the views/default/ folder, while the image is in the views/default/images/ folder.
Define image paths in your CSS relative to the CSS file, not the HTML file that displays everything:
background-image:url('images/home.jpg');
In my case:
I had a CSS folder. So, inside my CSS folder I had my style.css so I was typing inside my style.css the following:
background: url('img/mybgimg.jpg')
instead of
background: url('../img/mybgimg.jpg')
...I hope this can help to anyone who is having the same issue.