Contents on .html page and vscode live-server page appears differently - html

I am using html and css to create a website for my school project.
I was writing my script by using vscode and everything was fine on the live-server page.
Live Server
However, when I ran the actual .html file through my browser, it appeared differently from my live-server page.
.html file
I think some wrong with {background-image: url("/images/banner.jpeg");} this tag but I'm not sure. Please help!
<div class="banner"></div>
.banner {
background-image: url("/images/banner.jpeg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
padding: 200px 1px;
min-height: 20%;
}

Use a relative and not absolute file path: background-image: url("images/banner.jpeg");
More info: Discrepancy between VS Code live server output and opening the index.html file by itself

Related

CSS "Background-image: url(...)" doesn't work on my website

I created my portfolio on Gitlab Pages. My style.CSS work partially. background-image: url(..) doesn't display in navigator. However, everything else seems to be working.
My content is in public/img/.png
I tried :
url(/img/.png);
url(public/img/.png);
url(/public/img/.png);
You can check my code here : https://medjaherirany.gitlab.io/resume/
Edit: I went into your code on the inspector, use background-image: url("../img/portrait0.png"); and it works. I will include a screenshot. This is used to go backwards in the directory.
I hope this helps.
As I can see in your CSS file you have used
figure {
background: url(/img/portrait0.png);
background-repeat: no-repeat;
background-position: 80% 111px;
height: 727px;
background-size: 690px;
background-color: #f2f2f2;
}
Change it to
figure {
background: url("img/portrait0.png");
background-repeat: no-repeat;
background-position: 80% 111px;
height: 727px;
background-size: 690px;
background-color: #f2f2f2;
}
Here actually your CSS says to look for img directory in the parent directory of "https://medjaherirany.gitlab.io/"
But your code is in https://medjaherirany.gitlab.io/resume That's why the browser was searching for "https://medjaherirany.gitlab.io/img/portrait0.png"
But actually it is in "https://medjaherirany.gitlab.io/resume/img/portrait0.png"
Here I changed the URL of background image and I got the image working.
Hope this helped you. Feel free to ask any further doubts.
Happy Coding

my CSS background will not show on github pages

I created a page on GitHub, however the background I coded through CSS will not appear on my page. The CSS code is shown below.
header {
background-image: url("resources/img/antelope.JPG");
background-size: cover;
background-position: center;
height: 100vh;
}
My github repo is: https://github.com/person/person.github.io
The CSS file is stored here:
https://github.com/person/person.github.io/blob/master/resources/css/style.css
Any help to why my background will not appear will be greatly appreciated.
Your image is not inside the resources folder.... it is at the same level as the index.html page - your URL should be url("antelope.JPG");
UPDATE
Looking at your changes, the URL should be as below now:
If you do not do anything, the URL should be: resources/img/antelope.jpg
if you package resources into the root folder then: ./img/antelope.jpg
but, the final URL will depend on how you build your page and beware that the server might be case-sensitive.
Make sure you indicate the correct filename (including case-sensitive extension)
Something along the lines of
header {
background-image: url(./img/antelope.jpg); /* may need to be adjusted depending on how you build your page */
background-size: cover;
background-position: center;
height: 100vh;
}
<header>
<nav>
Some navigation here
</nav>
</header>
To use one from the root directory (https://github.com/anhthyngo/anhthyngo.github.io) use next CSS:
header {
background-image: url('../../antelope.JPG');
background-size: cover;
background-position: center;
height: 100vh;
}
to use from img directory use next CSS:
header {
background-image: url(../img/antelope.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}

BackgroundImage in css

how to put backgound image with help of css.
When an image file is stored locally on a desktop, CSS file and image are in the same folder. \Desktop\New folder\image:- image destination
\Desktop\New folder\css:- css file destination
You can provide just the local image name, assuming it is in the same folder and your css is applying then this should help you:
background-image: url("image_name.png")
use background: url() in css for this
body {
background: url("https://www.w3schools.com/howto/img_fjords.jpg");
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
Technically, local files are not accessible from CSS. All the file you want to access should be accessible using URI.

Image won't appear as background when site is live

I am trying to get a background image to show properly when my site is live. It only works when in the development environment. Once uploaded, it defaults to background color. I have checked several times to ensure the proper file name is being used and all other aspects work as required. The following is the code in my main.css file.
body {
background-color: #f2f2f2;
font-family: "Lato";
font-weight: 300;
font-size: 16px;
color: #555;
padding-top: 150px;
background-image: url(../img/IMG_0234.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
When I use Devtools on Google Chrome I get the following response :
Failed to load resource: the server responded with a status of 404 (Not Found) http://josejrvazquez.com/assets/img/IMG_0234.jpg
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
The file can be found at
http://josejrvazquez.com/assets/img/IMG_0234.JPG
You need capital .JPG
background-image: url(../img/IMG_0234.JPG);
You live environment is case sensitive. Most *nix systems that run websites are case sensitive in file and folder names. Windows file structure is not case sensitive. This leads to a lot of confusion similar to yours.
Try
background-image: url(../img/IMG_0234.JPG);

Rails 3 application background-image and color pushed to bottom of page

I have build a standard Rails 3 application (using Ruby 1.9.2).
I placed all the links to my css files in the stylesheet_link_tag in the app/views/layouts/application.html.erb file. When I run the application all the styles in the css files work except that the background-image and color are pushed below the content from the view content from the model views in the app/views folders instead of laying on top of the image and color. In my css file I have the background-image attached to the html tag (code below).
html {
background-color:#ccdbce;
background-image: url('images/bg-body.png');
background-repeat: repeat;
background-position: top;
color:#444;
}
Please let me know what I am doing wrong?
Try the following small modification to the background-position:
html {
background-color:#ccdbce;
background-image: url('images/bg-body.png');
background-repeat: repeat;
background-position: left top;
color:#444;
}