I am having trouble getting the hero image and the background to show up. The files are in the same folder, with images, css, and javascript folders for those files. HTML is in main folder, others are sub-folders. I am using code I found at w3schools that looks like it should work, but I cannot get the images to show. The backup background color does show up.
I read several threads that suggested removing the ", adding a / or .../ to path name, I checked the file name and extension and nothing has worked.
What did I do wrong?
Here is my code:
html {
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
background-image: url("/images/funky-lines.png");
background-color: #cccccc;
}
.hero-image {
background-image: url("/images/the-road.jpg");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
article,
aside,
footer,
header,
nav,
section {
display: block
}
nav {
font-family: 'Source Sans Pro', sans-serif;
font-size: 36px;
}
h1 {
font-size: 2em;
margin: .67em 0
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
b,
strong {
font-weight: inherit
}
b,
strong {
font-weight: bolder
}
small {
font-size: 80%
}
img {
border-style: none
}
button,
input,
optgroup,
select,
textarea {
margin: 0
}
menu {
display: block
}
[hidden] {
display: none
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dorcraft Industries | Fallout 4</title>
<meta name="description" content="Discussion of Fallout 4">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?
family=Indie+Flower|Rokkitt|Source+Sans+Pro:700" rel="stylesheet">
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Dorcraft Industries</h1>
<h3>in Fallout 4</h3>
</div>
</div>
<!-- <header><img src="images/banner.jpg" alt="Dorcraft Industries banner
image">
</header> -->
<nav>Home | The Game | Characters | About Us</nav>
<div>
<p>Is anything working?</p>
</div>
</body>
</html>
Ok, I changed the links to add two dots (..) in front of the URL and that seems to work. The examples I saw on W3Schools and in answers here showed three dots (...) and that did NOT work.
Thanks, that seems to have solved it.
Reading your post, your current folder structure is as below.
folder/
index.html
css/
style.css
images/
image1.jpg
image2.jpg
etc
js/
main.js
So when you try to use any image in your css you should add ../ in front of any url directing to an image. This ensures that the file will start looking from one folder up, instead of the current folder.
i.e.
background-image: url("../images/image1.jpg")
Related
Hi I'm making a website but I'm having two problems
My HTML file doesn't see my CSS file. My Html file is Website/html/index.html and my CSS file is Website/css/index.css
Even though i do text-align: center;(CSS file line:22) my list doesn't become straight line
My Html code
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KK Kiralama</title>
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk_nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
My Css code
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;}
html{
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
}
.kk-nav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Thanks for any help!
Also, I'm open to any advice on making this code more smooth.
First of all, try adding two dots to your CSS path. href="../css/index.css"
Then for the alignment, add display: flex; to the kk-nav shown below.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;}
html{
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
display: flex;
}
.kk-nav li a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk-nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
In CSS you are using class .kk-nav but you have defined the class="kk_nav"
please replace the hyphen(-) sign with underscore sign(_) then your CSS with work.
The corrected code is here
.kk_nav{ /* using underscore */
overflow: hidden;
background-color: #191970;
}
.kk_nav a{ /* using underscore */
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
and if you want to make nav text in the center use li in CSS not a
like
.kk_nav li{ /* using li not a */
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Your HTML file doesn't see your CSS file because you haven't given him the good path to the CSS file. Both your files are inside Website folder, but in two different separate folders. So you need to tell HTML to return to its root/parent folder (Website) and from there to enter css folder where he'll find CSS file. You do that with ".."
<link rel="stylesheet" href="../css/index.css">
You made an error. In HTML you named your class "kk_nav" with an underscore and in CSS you called that class with a hyphen insted of underscore. Change it and it should work. And if it doesn't, then call li instead of a in CSS:
.kk_nav li {}
I'm seeing your CSS file just fine when I load it on my machine. Alternatively, in your case, if your current path isn't working for you can set the path like this for example <link rel="stylesheet" href="./css/index.css">. I will mention this is the same method as your current path except you're just adding '.' in front of your current file path. This will tell your HTML file to look for the file you need in the 'CSS' folder in the same directory level as your HTML file (assuming you have your HTML file in the root of your working directory).
In your CSS file you have kk-nav as your class name but in your current HTML file, you set the class as kk_nav. The only other note I really have is I see that you're defining your font size in the 'HTML' tag of your CSS, by default that is set to 16px, if I recall correctly. If you want a bigger font for your code I would suggest the using body element as the best practice. for example: body {font-size: 20px;}
I hope this helps.
This is the updated HTML code I used on my machine
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
}
.kk-nav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KK Kiralama</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk-nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="nav">
Ana Sayfa
abc
Araçlar
İletişim
Giriş
</nav>
</div>
</header>
</body>
</html>
I just switched from VSC to Adobe Dreamweaver and i don't know if I should keep it or not; but that's besides the point.
When I try to add a background to some text, it fills the whole screen with the background with the background, and if I try to change the width it only adds on to the background which is filling the whole screen.
I don't know if it's user error, something changed in HTML/CSS overnight or if it's because of the Dreamweaver display box thing on the top of my screen
#charset "utf-8";
* {
margin: 0;
padding: 0;
}
.Container {
padding: 25%;
padding-left: 50%;
padding-right: 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
margin: 0;
}
body {
background-image: url(http://www.incomeactivator.com/images/freebg5.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="file:///C|/Users/REDACTED/Documents/style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/comfortaa:n3:default.js" type="text/javascript"></script>
</head>
<body>
<div class="Container">
<h1>Hello</h1>
</div>
</body>
</html>
p.s: let me know if you need a ss of the results I get.
Instead of using the class, you can change the texts background color by adding
background-color: rgb(255, 236, 139)
in the h1 tag
Demo:
YOURTEXT
It should work as expected if you apply the css to the H1 tag:
.Container h1{}
You have used padding property incorrectly. Reference
Correct syntax: padding: top right bottom left
padding:0 50% 0 50%;
So the css should be:
.Container{ margin: 0; }
.Container h1{
padding:0 50% 0 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
}
I'm not even sure how to link to show the problem since webpack and React combine all the CSS into one thing.
Here is a codepen of what the site shows: https://codepen.io/livebacteria/pen/bJpRxq
Code:
<html lang="en"><head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json">
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<style type="text/css">body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
</style><style type="text/css">.App {
text-align: center;
}
.roomContent {
width: 85%;
}
.roomId {
width: 85%;
background-color: darkgray;
top: 0;
float: top;
text-align: center;
overflow: hidden;
}
.messageList {
margin-left: 15%;
}
#sign-in-button {
position: fixed;
left: 0;
bottom: 0;
height: 2%;
width: 5%;
background-color: red;
overflow-x: hidden;
}</style><style type="text/css">#room-list {
left: 0;
height: 100%;
width: 15%;
background-color: #797979;
overflow-x: hidden;
}
#rooms {
background-color: darkgray;
margin: .2em;
border: .2em solid black;
border-radius: .5em;
}
.active {
transition: background-color 0.2s ease-in-out;
background-color: white;
color: black;
}</style><style type="text/css">.message {
background-color: lightgrey;
}
.alter {
background-color: teal;
color: white;
}
ul {
list-style: none;
}
.username {
left: 0;
font-weight: bold
}
.msgContent {
text-align: justify;
}
.timestamp {
right: 100%;
}
li {
display: -webkit-flex;
display: flex;
}</style><script charset="utf-8" src="/main.301d260d2d5d7cc6e354.hot-update.js"></script><script charset="utf-8" src="/main.1b967c31a26f143b4c18.hot-update.js"></script><script charset="utf-8" src="/main.71fa75690276c3793425.hot-update.js"></script><script charset="utf-8" src="/main.bd4f9c2dd0d0d73a5767.hot-update.js"></script><script charset="utf-8" src="/main.674bf126f112209cc501.hot-update.js"></script><script charset="utf-8" src="/main.d51f6dd5d844ba3b041f.hot-update.js"></script><script charset="utf-8" src="/main.3b7da7fe7854caba082b.hot-update.js"></script><script charset="utf-8" src="/main.83cd193b84cfa377dad0.hot-update.js"></script><script charset="utf-8" src="/main.2a3407b574c86757e486.hot-update.js"></script><script charset="utf-8" src="/main.593394f8893e7c304918.hot-update.js"></script><script charset="utf-8" src="/main.ca86c32b9f61b8f0bb0b.hot-update.js"></script><script charset="utf-8" src="/main.8bbf712997dd0b0cc98c.hot-update.js"></script><script charset="utf-8" src="/main.8dc8d68395e79c2c6dbd.hot-update.js"></script><script charset="utf-8" src="/main.8f1d3411148d4555e4db.hot-update.js"></script><script charset="utf-8" src="/main.03f056389193af93776c.hot-update.js"></script><script charset="utf-8" src="/main.9cac50b16b883a71fef4.hot-update.js"></script></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"><div class="App"><div class="roomListInfo"><div id="room-list"><section id="informationalHeader"><div><h1>Bloc Chat</h1></div></section><section id="rooms"><div><div class="active">room_1</div><div class="">room_2</div><div class="">room_3</div><div class="">Additional Information</div><div class=""></div><div class="">Mentor chat</div><div class="">retest</div><div class=""></div></div></section><section id="createRooms"><div><form><input type="text" id="nameEntry" value=""><input type="submit" disabled="" value="Create Room"></form></div></section></div></div><div class="roomContent"><h1 class="roomId">room_1</h1><div class="messageList"><div><div><ul><li class="username">LiveBactera</li><li class="msgContent">Testing</li><li class="timestamp">No Data</li></ul></div></div></div></div><div class="userInfo"><div><div><button>Sign Out</button><p>Tyler Poore</p></div></div></div></div></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script><script src="/main.937734484660ad27272f.hot-update.js"></script>
</body></html>
But, my problem is that I'm trying to build a chat application / website that you know, looks like one. Perhaps like Slack of all things. I'm having major overlapping issues with different components. I want a top header bar to stay stuck to the top, a nav bar on the left side that is stuck as well and, finally, the content should be scrollable.
I don't even know where to start for CSS. I've done loads of tutorials but nothing makes sense. There feels like there is more to CSS than there is in JS. The only code that works to achieve the sidebar look I'd like to have is the position: fixed style in CSS. I've read that this can cause major issues with other /fixed/ elements and sure enough it has.
The more I mess with the CSS the worse it gets, I had to restart almost the whole project because it got so bad.
I am guessing you want roomListInfo on the left, and roomContent on the right?
Some quick fixes:
you need them to be side-by-side instead of stacked on top of each other. You could do this by making them both display: inline-block, and make roomListInfo have width: 15% to match the width: 85% on roomContent. It looks like you tried adding it on room-list instead, so you should undo that.
Next, to get roomContent to cling to the top of the "line" (cause both are now on a line, like a line of text) that both elements now exist on, instead of sitting on the bottom of it, add vertical-align: top to it.
There are different ways to solve this problem. CSS can be confusing to start out with but once you get the core concepts down (classes, Id, declarations) then this will become a lot easier.
A good tip is to separate your CSS into it's own file and then load it using
<head>
<link rel="stylesheet" type="text/css" href="YOUR_CSS_FILE_NAME.css">
</head>
I would definitely start one-by-by with this page. Don't try to do too many things at once and don't get overwhelmed.
Go through each section thoroughly before moving onto the next.
For the sample below I simulated putting the CSS into a different file, I moved it to the CSS Window and removed the Style Tags.
Then I went through and changes some of the HTML and added the appropriate styles based on what I think you are asking for.
This is just one way to solve this problem, it doesn't mean it's the best.
https://codepen.io/anon/pen/ROaZGo
I'm facing a weird issue here. My full screen background image WORKS PERFECTLY WITH online images url BUT NOT WHEN it is located in the images folder (here named: img) and it has to be.
This site has an "img" folder with bkg.png image inside.
I've also put the image in the root folder just in case that would work with the following url(bkg.png); but it didn't work either. So finaly I've post the image on flickr and it is working. But I need to understand the issue and have it located in my img folder.
Thanks for your help.
Corinne.
/*into folder : root/css/mob_pss.css */
* {
margin: 0;
padding; 0;
font-family: 'Lato', sans-serif;
font-size: 14px;
}
*::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*into folder : root/css/mob_bkg.css */
html {
/*I've tried those*/
/*background-image: url(css/bkg.png);*/
/*background-image: url(bkg.png);*/
/*they didn't work*/
/*but this works*/
background-image: url(http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-14.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-clip: border-box;
background-color: #464646;
}
#media only screen and (max-width: 767px) {
html {
/*I've tried the following*/
/*background-image: url(css/bkg.png);*/
/*background-image: url(bkg.png);*/
/*they didn't work*/
/*but this works*/
background-image:vb url(http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-14.jpg);
}
}
body {
background-color: transparent;
}
<!DOCTYPE html>
<html lang=""> <!--language here-->
<head>
<!--DEVICE MATTERS-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FULL SCREEN BACKGROUND</title>
<link href="css/mob_bkg.css" rel="stylesheet">
<link href="css/mob_pss.css" rel="stylesheet">
<style></style>
</head>
<body>
<!---->
</body>
</html>
consider below is your structure
index.html
css
-- style.css
img
-- pic1.jpg
if you write your css in style.css file
so I would write below code in style.css
body{
background: url(../img/pic1.jpg);
}
url() in CSS is relative to the location of your css file
Check whether the path for that images are all correct?
try using single quotes,
background-image: url('css/bkg.png');
background-image: url('bkg.png');
EDIT: Fixed it, I am daft. It was because h1 is below the div.
So I was making some web page for a school project and I keep running into this annoying problem, I am trying to make an image gallery on the page with multiple thumbnails all in ordered categories on a page. e.g. since it is video game themed it should be like heroes and maps. Problem is when I place an image, the image pushes the text I had at the top of the screen under it, probably a really simple solution to this just need a bit of help. thanks. here is the link
CSS:
#font-face {
font-family: bigNoodle;
src: url(Font/big_noodle_titling_oblique.ttf);
}
#splash {
z-index: 100;
position: absolute;
background: white url('Pictures/logo.png') center no-repeat;
top: 0;
right: 0;
left: 0;
bottom: 0;
font-family: bigNoodle;
color: #939393;
padding: 10px;
font-size: 40px;
}
body {
background: url('Pictures/bg.jpg') center fixed no-repeat;
}
h1 {
z-index: 1;
font-family: bigNoodle;
text-align: center;
text-transform: uppercase;
font-size: 60px;
color: #F99E1A;
padding-top: 10px;
margin: 0;
padding: 0;
}
div.picture img {
height: 200px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript' src='anim.js'></script>
<title>Wiki</title>
<link rel="icon" type="image/x-icon" href="Pictures/logo.png" />
</head>
<body>
<div id="splash">Click to continue...</div>
<div class="picture">
<img src="Pictures/Heroes.jpg">
</div>
<h1>Welcome</h1>
</body>
</html>
You can achieve it in multiple ways
Way 1:
You can apply z-index for text
for instance text 'welcome' is there inside h1
h1
{
z-index:999;
}
way 2:
take your image as background of div
https://jsfiddle.net/ogyk1914/