Background img for a div is not displaying. Using FireFox dev tool and it says the image could not be loaded. But if I link to the image using an img tag it works fine. I would rather display the image in css using the background property. For my file structure I have an img, css and js folder nested inside my project folder. Is there something wrong with the path since i'm in a css folder trying to link to a file in another folder?
#charset "utf-8";
/* CSS Document */
.container {
}
.hero {
background: url('img/15827396293_fc1e0f749d_o%20(2).jpg') 0 0 no-repeat;
text-align: center;
background-size: cover;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style1.css" />
</head>
<body>
<div class="container">
<div class="hero">
<h1> This is a test</h1>
</div>
</div>
</body>
</html>
If you are in your css folder, it is looking for css/img/file.jpg. If you wan't to keep with relative paths, you will need to change your image path to ../img/file.jpg. I would recommend the use of absolute paths, but that is up to you. With an absolute path, you don't have to worry about if you accidentally forgot your ellipses.
Try ".." to move up a document tree
.hero {
background: url('../img/15827396293_fc1e0f749d_o%20(2).jpg') 0 0 no-repeat;
text-align: center;
background-size: cover;
}
Related
I'm new to HTML and CSS, I'm trying to add Full Screen Background Image in CSS, but my code doesn't work. I've tried many tutorials as well. Here it's my code.
HTML file
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\practice.css">
<h1>Welcome to my First CSS page.</h1>
</body>
</html>
and CSS file
body{
background-image: url(""C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\landscape.jpg"");
background-size: cover;
background-attachment: fixed;
}
The problem with your double-quotes in the URL you should remove them. Also, you can use a relative path to get your image from your project path.
Here a working example, you made one mistake & one bad practice:
- You used double """" for your background URL
- The CSS link is recommended to be in the head. You can put it in the body but place it add the end.
body{
background-image: url("C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\landscape.jpg");
background-size: cover;
background-attachment: fixed;
/* DEMO, remove */ background-image: url("https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg");
/* DEMO, remove */ color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<!-- comment out -->
<!--<link rel="stylesheet" type="text/css" href="C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\practice.css">-->
</head>
<body>
<h1>Welcome to my First CSS page.</h1>
</body>
</html>
style="background-image: url('img_shirjeel.jpg'); height: 100%; background-position: center; background-repeat: no-repeat;background-size: cover;"
try this in that tag or body where you want the image.
and do google first.
You need to move your css file to the main folder (the same as the html file).
And create a div(container were background has to come) that contains your h1.
And you shouldn't use the full url you can just use foldername/imagname.jpg.
So this is how it should look.
Folder.
-html.html
-practice.css
-imagefolder
--image.jpg
If you have this you can change the css link to :
<link rel="stylesheet" type="text/css" href="practice.css">
And then in body tag you creat a div with a class:
<div class="body">
<h1>Welcome to my First CSS page.</h1>
</div>
If you have this you can give the body div a background image with in css:
.body{
background-image: url(image/landscape.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 500px;
}
This question already has answers here:
Adding external CSS in an HTML file
(5 answers)
Closed 2 years ago.
So I tried displaying an image by making a selector class with a background-image attribute then calling it using the <div> tag. The first time the selector class was between the <head> tags. Everything seems to work fine:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
}
.bg {
/* The image used */
background-image: url("images.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
But when I put the selector class inside a separate CSS file, it doesn’t seem to work. Here is the code for the HTML file:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
Here’s for the CSS:
.bg {
/* The image used */
background-image: url("images.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-size: cover;
}
Could someone please kindly tell me what I did wrong? I thank you in advance!
Don't forget to import your separate css file on your html page :
<link rel="stylesheet" href="style.css">
And be careful for the right path.
Add a link tag inside of head in your HTML to connect your styles to the HTML.
<head>
<link rel="stylesheet" href="xxx.css">
</head>
Replace xxx.css with the path to your css file.
Check the Mozilla docs for details.
I'm a veteran to CSS and HTML, but never before have I seen this problem. I have the background image, CSS, and HTML files placed properly. I believe I have all the code right too since I checked it against a site I already made, but my image will not appear for anything.
CSS
body {
background-image: url(am-stage.png);
background-repeat: no-repeat;
background-color: black;
background-size: 100% 100%;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> AM </title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
</body>
</html>
EDIT: Chrome is giving an error saying that the CSS file can't be found. Not sure why though. The CSS is in the same directory as the HTML and the image.
I figured it out, Sublime wasn't saving the CSS as a CSS file. I told it to save as a CSS, but it wasn't adding the extension this time for some reason. I just chose CSS and manually put in the .css at the end and now it's working.
I have a laravel 5 project where I want to set and custom an image as background, but I simply can't. I can set the background to a color - that works fine, but not when I'm using an image...
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<style>
body{
background: url("/resources/assets/images/anders.png") no-repeat;
}
</style>
</head>
<body>
#yield('content')
</body>
</html>
Root the url to the site using . before the resource.
body{
background: url("./resources/assets/images/anders.png") no-repeat;
}
I have here my codes for html and css. I dont seem to catch the problem on why my images wont load or show-up. I tried them to load both on firefox and chrome.
My problem is not on jsfiddle.
And here is my folder structure:
localhost/website/img
localhost/website/css
localhost/website
http://jsfiddle.net/p8eS3/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="description" />
<meta name="author" content="author" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<title>Title</title>
</head>
<body>
<div id="container">
<div id="sidebar">
<div id="logo"></div>
</div>
</div>
</body>
</html>
#charset "utf-8";
/* Body */
#body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
background: #ccc;
}
/* Container */
#container {
width: 100%;
background: #000;
}
/* Sidebar */
#sidebar {
background: url(../img/sidebar.png) repeat-y;
width: 40%;
float: left;
position: fixed;
}
/* Logo */
#logo {
background-image: url(../img/logo.png);
}
You have two images, they're added as background images for divs, but those divs do not have layout since the sidebar lacks height and the logo height and width. Which means they do not show up at all. Give them height/width to fix it.
If not the paths to the images are wrong.
The images aren't loading as jsfiddle won't recognise ../img/sidebar.png as this will look locally on their server.
I'm assuming that this is not your initial problem though, and that you are experiencing problems getting the right path on your application.
I would recommend 'rooting' your image url so that it works from the root folder to the location like:
background: url(/img/sidebar.png) repeat-y;
Could be your folder structure. Are the images in a folder the same level as your html file, or a level up. If they're the same level, try replacing ../images with ./images
Your path to the images is most likely off. This will be hard to debug via a js fiddle. Can you post your directory structure?
It's because your divs don't actually take up any space, so you can't see any background. See your modified fiddle for an example of how to fix this.
Alternatively, you might want to consider using HTML img tags.
You have to specify a width and a height to your #logo element so that the BG can appear.
Try,
#sidebar {
background: url(../img/sidebar.png) repeat-y;
width: 40px; /* your background width */
height:60px; /* your background height */
float: left;
position: fixed;
}
/* Logo */
#logo {
background: url(../img/logo.png) 0 0 no-repeat;
width: 40px; /* your logo width */
height:60px; /* your logo height */
}