I try to use jpg files for the background in my project but I can't do this via .css files.
First of all - it seems all settings are right, since the setting from the HTML file works fine:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Home page</title>
</head>
<style>
body {
background-image: url("img/mainpage.jpg");
}
</style>
...
And when I include my CSS file and use background-color, it also works fine:
main.css:
body {
background-color: #193340;
}
But not for background-image. Even when I use both options, only color option is applied:
main.css:
body {
background-color: #193340;
background-image: url("img/mainpage.jpg");
}
how to correctly set the image file exactly in .css file?
Pretty sure you are not refering to image path right inside the main.css file.
background-image: url("img/mainpage.jpg");
Try to write down correct relative path to your image.
if let's say your file structure is like this
index.html
img/mainpage.jpg
css/main.css
then correct way to your refer to image file will be
background-image: url("../img/mainpage.jpg")
Related
For some reason, my SCSS code does not work on my html file live server. I simply input background color to red but it does not show the correct color on live server. The script in html file for linking css file should be correct.. The post does not allow me to put too much code. Please let me know if I need to provide more code.
Someone please help!
Thanks!
Here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The 2021 Frontend Developer Crash Course</title>
<link rel="stylesheet" href="css/main.css"/>
Here is my scss file code:
#import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,700;1,700&display=swap");
ody {
background: #d81c1c;
margin: 0;
font-family: "Poppins";
}
.navbar {
background: rgb(173, 25, 25);
}
So, you have a few issues here.
Firstly, as Akshay pointed out, your first tag in the css file is 'ody'. I'm assuming this should be 'body'.
Secondly, when setting a colour to the background you should use background-color rather than background. The background css is for assigning an image.
Finally, you havent mentioned, but scss needs to be compiled down to css. I'm assuming this scss file is main.scss and you're compiling down to main.css using visual studio?
To make sure your css is right, I would use the developer tools in Chrome. press F12 in chrome, select the correct element and then under 'Styles' add the css you're looking to use. It lets you che
I have a problem with setting up a background image. My html below works perfectly when I use a url to a picture online, however I can't use a picture from my computer. Can I use a picture on my computer as my website's background?
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("Downloads/jpic.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<p>first paragraph</p>
</body>
</html>
the problem is with your path you need to specify the path like this if your image is not in the same directory as your project :
'C:\Users\user1\Downloads\jpic.jpg'
try it this way it will work
Yes you may use background-image from your computer. Just put the image(which you want to use) in the same folder in which your coding file is located.
After pasting your image file to the same folder, just use the code below:
background-image: url("jpic.jpg");
Use relative path (without C:\, Documents or whatever) just where the image is from all the other files included in the project. For example if its in the same path it would be:
body {
background-image: url("jpic.jpg");
background-color: #cccccc;
}
And in the images path:
body {
background-image: url("images/jpic.jpg");
background-color: #cccccc;
}
And please avoid inline CSS, import external *.css file
my css is in assets/css/style.css and my image is in assets/img/bg.png But when i try to link the background image:
background: url(../img/bg.png);
it instead uses assets/css/../img/bg.png as the url. Why is it?
Html file (/index.html)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" media="screen" href="assets/css/style.css" />
</head>
<body>
<h1>Background Image</h1>
</body>
</html>
Css file (/assets/css/style.css)
body{
background:url(../img/bg.jpg);
}
For mac OS you should use this :
body {
background: url(../../img/bg.png);
}
you can use this
body{
background-image: url('../img/bg.png');
}
I tried this on my project where I need to set the background image of a div so I used this and it worked!
I had a similar problem but solved changing the direction of the slash sign:
For some reason when Atom copies Paths from the project folder it does so like background-image: url(img\image.jpg\)instead of (img/image.jpeg)
While i can see it's not the case for OP may be useful for other people (I just wasted half the morning wondering why my stylesheet wasn´t loading)
Since you are providing a relative pathway to the image, the image location is looked for from the location in which you have the css file. So if you have the image in a different location to the css file you could either try giving the absolute URL(pathway starting from the root folder) or give the relative file location path. In your case since img and css are in the folder assets to move from location of css file to the img file, you can use '..' operator to refer that the browser has to move 1 folder back and then follow the pathway you have after the '..' operator.
This is basically how relative pathway works and you can use it to access resoures in different folders. Hope it helps.
body
{
background-image: url('../images/bg.jpeg');
}
You are using cache system.. you can modify the original file and clear cache to show updates
You are using a relative path. You should use the absolute path, url(/assets/css/style.css).
I'm pretty new to CSS and have found a nuance that I don't understand.
I'm trying to set the viewport background color, and using the color red in this example.
If I use the following code in an external .css file then add it to my html file in the 'head' section, the viewport color is NOT changing at all -- it is the standard white background:
==== my-external-css-file.css ===
root
{
display: block;
background-color:RGB(255,0,0);
}
==== my index.html file ====
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>theRed</title>
<meta name="viewport" content="user-scalable=no, width=device-width"/>
<link rel="stylesheet" href="my-external-css-file.css"
</head>
I am learning CSS using a book and the book uses the external .CSS file approach that does not work. So I took upon myself to abandon the external CSS file and put the root's color change directly in the "head" section of my index.html file -- if I instead put the root color I want directly inside index.html, the entire viewport background is red as expected:
==== my index.html file ====
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>theRed</title>
<meta name="viewport" content="user-scalable=no, width=device-width"/>
<style type="text/css">
:root
{
background-color:RGB(255,0,0);
}
</style>
</head>
Since both times I'm setting the root's "background-color" to red, and in both cases I'm doing so in the correct part of the html file, in the "head" section -- why is the external .css file's attempt to set the background color NOT working?
I'm new to CSS so I'm thinking there is some nuance here I'm not aware of? I'm using Netbeans for my development IDE and when I create a new .CSS file, Netbeans is automatically putting the "display: block" statement in the new .css file so I assumed it was needed and left that alone.
The root node of HTML is the <html> element, so the selector should be html not root.
In your external CSS, you have forgotten the : for the :root pseudo-selector. In HTML it will always be html so there is no reason to use :root AFAIK.
There is no such thing as root you can either use elements like html or body for color.
I think in your example you would set your body to:
body {
background-color:RGB(255,0,0);
}
My image is saved in the same folder tree or whatever that is called as my webpage, and it won't load. It's probably something really simple but I can't figure it out. Any hint would be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>website</title>
<style type="text/css" media="screen, print, projection">
body{
background-image:url('C:\Users\blah\Desktop\webdesign\randompicture.png');
}
</style>
</head>
<body>
</body>
</html>
instead of C:\Users\blah\Desktop\webdesign\randompicture.png'
use relative path if your htm file is in webdesign folder randompicture.png
use background-image: url(randompicture.png);
if the html file is on desktop
use background-image: url('./webdesign/randompicture.png');
Try using relative paths, if your picture is in the same directory as your html file, simply write:
background-image: url(randompicture.png);
Also, you don't need apostrophes in the url() notation of CSS.
If you put your rules into a separate CSS file, the path should be relative to the CSS file, not the HTML.
if the image is in the same folder, use:
body
{
background-image: url('randompicture.png');
}