Alright, so I am trying to challenge myself in my html/css class by adding a custom cursor to all pages.
I have it working, but it seems to randomly stop being the custom cursor, and become the default instead?
The css I'm using for it:
* {
cursor: url("image.gif") 33 33, auto;
}
I have also tried using <span> for entire html documents, and that is not fixing it either for me.
I have also tried setting the cursor in
body{} and it didn't fix it.
Any help would be appreciated! I googled and searched the site for over 2 hours trying to find an answer that would work.
Posting the site below so you can see what I mean. (IE won't show the cursor, not sure about safari or opera yet)
http://www.rvertbleu.com/2014fa/dbrown/index.html
EDIT:
Made a shorter version of my index.html and my main.css that recreates the problem. Here it is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Gundam Base</title>
</head>
<body bgcolor="#000000">
<h1><center>Gundam Base</center></h1>
</body>
</html>
main.css
* {
cursor: url("gundam.gif") 33 33, auto;
}
body {
font-family: Impact;
font-size:1.5vw;
text-align: center;
color: #CC3300;
background-image:url('bg.jpg');
background-repeat:no-repeat;
background-size: cover;
position: relative;
top: 0;
left: 0;
z-index: -5000;
background-attachment: scroll
background-color: black;
}
add a div after the body tag with the following styles position: relative; width: 100%; min-height: 600px;cursor: url("gundam.gif"), auto;:
place all your other content in the above div. let me know if it works.
Related
In my HTML, I wrote
<link href ="project.css" rel ="stylesheet">
<style>
body, html {
height: 100%;
margin: 0;
}
</style>
<title>Page1</title>
</head>
<body>
<div class="bg"></div>
</body>
In my CSS, I wrote:
.bg {
/* The image used is edited from original World Table Tennis logo */
background-image: url("WTT.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
However, I'm not sure how to insert the image that I uploaded to my VS Code into my page, which is why I used CSS. Unfortunately, when I use Flask run, I get GET /project.css HTTP/1.0" 404.
I originally had my.bg on my HTML page, but I received GET /WTT.jpeg HTTP/1.1" 404. So I moved it to my CSS file. I haven't done the curse in a couple of months, so I'm a bit lost, especially when using images.
file structure
Befor
href ="project.css" rel ="stylesheet"
After
href="project.css" rel="stylesheet"
remove spaces on both sides and check
I have been creating a webpage teaching about Mars, and I wanted to see if I could make the background of an HTML5 page an image instead of a boring white colour. I do want this with a link, so teaching with a .jpg will not be useful. Here is some code I have tried:
<!DOCTYPE HTML>
<html>
<head>
<title>My Webpage</title>
<style>
body {
background: url(https://phys.org/news/2020-05-astrobiologists-mars-rover-life-detecting-equipment.html);
}
</style>
</head>
<body>
My text here...
</body>
</html>
I am not the most experienced programmer, as you can see from this, but any help (even if it is just a little) will be much appreciated. Thank you for your time and have a great rest of your day.
--
isharief
use the link to the jpg file in the src attribute instead of the html link, for this case,
<style>
body {
background: url(https://scx1.b-cdn.net/csz/news/800/2020/astrobiologi.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
overflow: hidden
}
</style>
So, I ran my web page with Flask. It worked fine, but once I run my web page through Flask, I cannot seem to apply new styling to it.
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
At first, my stylesheet contained the following code;
html,body{
padding: 0%;
margin: 0%;
background-color: #67030d;
}
.main{
background-color: #67030d;
box-sizing: border-box;
}
The next changes that I did were;
html,body{
padding: 0%;
margin: 0%;
}
.main{
background-color: #67030d;
box-sizing: border-box;
}
After running with the newly made changes, I still had the color applied to my entire HTML and body tag.
When I inspect the webpage, it shows that the color has been applied to the HTML and body tag.
This is the issue I am facing in Google Chrome but not in Firefox. How do I solve this?
My apologies if I am not clear.
Thank you in advance!
I'm building a new website and i have been testing my current code in multiple browsers where i have found the background images i placed in the header tag via css work in Chrome but no other browser. I would like the images to work across all browsers.
I have read through a few threads which cover the topic but none of the solutions work.
HTML
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<title>Bazaar Ceramics - Home</title>
</head>
<header>
<a class="logo" href="/Home.html"><span>logo</span></a>
</header>
<!--navigation, body and footer below-->
CSS
body, html{
min-height:100%;
min-width:100%;
}
header{
background: url(/Images/banner.jpg) no-repeat center 0;
background-size: cover;
margin-bottom: 0px;
position: relative;
height: 296px;
}
header a.logo {
position: absolute;
display: block;
width: 200px;
height: 136px;
background: url(/Images/logo.png) no-repeat 0 0;
background-size: contain;
z-index: 1;
top: 160px;
left: 50px;
}
header a.logo span {
display: none;
}
#media screen and (max-width: 750px) {
header a.logo { width: 150px; height 100px; }
nav { padding: 0px 0px 0px 10px; }
}
The Chrome browser shows the banner and logo correctly, when the browser size changes the images change size to match the browser size or nominated CSS size. i can hover my mouse over the logo and see the arrow change and it is selectable in all browsers.
Look at your css file. You're path is CSS/styles.css which is a relative file path.
For your images, you're using /Images/image.jpg which is an absolute file path.
If you use /Images on a hosting account online, it will go to whatever your root directory is which is what you intend. If you use /Images on your local device... it will go as far back to get to the root as you can go.
So if my computer structure is:
my-computer
-desktop
--my-project
---index.html
---Images
----image.jpg
---CSS
----styles.css
/Images is going all the way back to the my-computer folder and looking for it there. It wont find it there though.
What you want to do is ../Images to move back one level outside of the css folder and look for the images folder.
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 */
}