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!
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'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.
This is my first question (and first post) on Stackoverflow. Hope to contribute more once I become skilled enough.
Anyway, I'm having trouble understanding why my background image appears when I reference it using css that's inline with my html, but not when I put it in a separate css stylesheet that the html links to.
Here's what my inline css looks like, which works fine:
<style>
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
</style>
My styles.css file is shown below, which contains the exact same code:
<style>
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
p {
font-family: 'Helvetica Neue' Helvetica;
font-color: white;
}
h1 {
color: white;
font-family: 'Helvetica Neue';
font-size: 3.5em;
text-align: center
}
.textbox {
background-color: beige;
height: 100px;
width: 100px;
padding: 10px;
margin: 50px auto;
text-align: center;
font-family: 'Helvetica Neue' Helvetica;
font-weight: 200;
}
</style>
...but it no longer shows the background image. Everything else from the css file (paragraph formatting, text size/color, etc.) shows up in the browser just fine.
Also, the html file, css file, and background image are all in the same directory. So I figured I don't need to use "/background.jpg", "../background.jpg", etc. which I've seen suggested in other cases in other posts on Stackoverflow.
I tried to find an answer to this but couldn't find one. Any help is greatly appreciated!
But, in a separate .css file, I typed the exact same code as above, linking to it in the html file by using:
Did you remove the <style> & </style> tags from the CSS file ? For example, like:
body {
background: url('background.jpg') center center fixed;
background-size: cover;
}
These HTML tags are only required around your CSS rules if you're including CSS directly into your HTML.
i need to see your file and folder structure.. makes sure the the stylesheet you are referring is in the same folder where the html is, if so the same code will do.. if you css is in another folder like in css/styles.css than you have to change the link as well as the href of stylesheet to something like ../image.png
the folder structure matters here
Take the style tags out of your .css file.
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.
I've used the following code for background image of body tag.
background-image: url(images/taling.gif);
background-repeat:repeat-x;
background-color: #2E2E2E;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
it works in IE,Opera and chrome but doesn't work in FireFox.
I've tried also :
background-image: url("images/taling.gif");
and
background-image: url('images/taling.gif');
but it doesnt work on FireFox
your document body is height=0, and width=0, if you try to give it some height or width the image should be displayed
There is no problem with your CSS. What the problem is most likely the result of is either you are not assigning a width and height to the body tag, you are naming your image incorrectly, using the incorrect extension for your image, or the path to your image is incorrect, but there is also a possibility that you need to add a width and height.
If you use Firefox, you can test what is going on by using Firebug. You right click, and choose inspect element. Once done, in the right column of Firebug, you can see your declaration for background-image. If it says image not loaded or cannot be found, then one of the three things I pointed out above is the problem.
I know you said that the image does show up in other browsers, just not in Firefox. So, consider some modifications to the rest of your CSS. You may not be specifying a browser reset.
Just FYI, you can condense your CSS by doing the following:
background-image: url(images/taling.gif);
background-repeat:repeat-x;
background-color: #2E2E2E;
to
background: #2e2e2e url(images/taling.gif) repeat-x;
As for the body tag, you may want to add these properties and values:
margin: 0;
padding: 0;
width: 100%;
height: 100%;
Google "CSS browser reset"
One example of a browser reset is the following:
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
The above is the most simple browser reset you can have. It does not take into account ul,ol,li,h1,h2,h3,h4,h5,h6,li,p,a,img,blockquote, etc.
Also, look into using a clearfix.
I could ramble on and on as to why you may be having this problem.
I hope that helps.
Try:
background: url('yourimage.ext') repeat-x;
It works for me.
Edit: to match what you're doing, it should in fact be:
background: #2E2E2E url('images/taling.gif') repeat-x;