Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS CSS bg-image wont work

J

JJ5422

Coder
My css code on visual studio to use a background image from the file


file://C:\Users\jjwil\OneDrive\Desktop\OceanClientWebsite\hypixle.jpg (hypixle.jpg is a picture)

won't work as when i do CNTRL+Rclick to open it in visual studio it pops up with a message saying unable to open 'hypixle.jpg' file is a directory. and when i run the website the image is not there but when i go onto file explorer and find hypixle.jpg and say open with visual studio it opens the picture in a new tab with no problem

here is the css code:
CSS: 
* {
margin: 0 ;
padding: 0 ;
}
.header{
    background-image: url(file://C:\Users\jjwil\OneDrive\Desktop\OceanClientWebsite\hypixle.jpg);
    height: 100vh;
    width: 100%;
}
 
Sort by date Sort by votes
That OneDrive folder in Windows 10, is it actually a folder on your PC or is it online? I don't really know how that works. Have you tried moving the image to another directory?
 
Upvote -1 Downvote
OneDrive is local folder on your PC. The OneDrive program syncs this with a OneDrive online folder under your Microsoft account.
So if you type C:\Users\jjwil\OneDrive\Desktop\OceanClientWebsite\hypixle.jpg in a command prompt, it shows the image ?
Have you tried forward slashes instead of backslashes in the CSS ?
 
Upvote 0 Downvote
i can now do CNTRL+Rclick and it shows the picture but when i load my website it will not show up as the background

{
margin: 0 ;
padding: 0 ;
}
.background-image {
background-image: url("./hypixle.jpg");
height: 100vh;
width: 100%;
}
 
Upvote 0 Downvote
With this code, the jpg should now be in the root folder of your web page. Did you copy it there ? You can also press F12 to bring up the debugger, click the Network tab, then refresh the page and see where it's trying to load the image from.
 
Upvote 0 Downvote
it is here is the css:
* {
margin: 0 ;
padding: 0 ;
}
.background-image {
background-image: url("./hypixle.jpg");
height: 100vh;
width: 100%;
}

here is HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Here you can download the latest scripts for hypixle some payed some Free">
<title>OceanClient scripts</title>
<link rel="stylesheet" herf="Style.css">
</head>
<body>
<h1 align="center">
<a href="Home.html">Home</a>
<a href="aboutus.html" >About us</a>
<a href="download.html" >Download</a>
</h1>
<h1 align="center">The scripts</h1>
<div class="header">
</div>
<hr>
<br/><br/>
<h2>
<p align="center">This script has many features some inclued:</p>
<p align="center">Sugarcane</p>
<P align="center">Neather Wart</P>
<p align="center">Mithril</p>
<p align="center">And much more! with extra safe Failsafes.</p>
</h2>

<h3>
<p style="font-size:40px" align="center">Here are some examples of use of the script</p>
<hr>
<li style="font-size:28px" align="leaft">INSERT VIDEO</li>
<li style="font-size:28px" align="center">INSERT VIDEO</li>
<li style="font-size:28px" align="right">INSERT VIDEO</li>
<br/><br/><br/><br/><br/><br/>
<li style="font-size:28px" align="leaft">INSERT VIDEO</li>
<li style="font-size:28px" align="center">INSERT VIDEO</li>
<li style="font-size:28px" align="right">INSERT VIDEO</li>
<br/><br/><br/><br/><br/><br/><br/><hr>
</h3>

<h4 align="center">

<font color="#333333">
<li style="font-size:18px" align="center">Contact</li>
<a href=mailto:[email protected] subject="HTML link" >Click here to send us an email for help!</a>
</h4>
</body>
<

</body>

</html>

it might be the link between them but idk

because i have already got it in the file with my website
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom