SO I'm trying to recreate this webpage and am working on the style of the div that I will be using 7 times to span the nav bar and am having trouble getting the referenced image to load in.
I will now post my code. I am using style in the page for quick access but will use an external style sheet when I am done.
<!DOCTYPE html>
<html>
<header class="header" id="header" align="middle">
<img src="https://s21.postimg.org/luvg05cjb/header.jpg">
</header>
<style>
.Home {
position: absolute;
background-image: url("https://postimg.org/image/vg652px3f/");
background-size: 99px 30px;
left: 290px;
top: 234px;
text-align: center;
line-height: 30px;
width: 99px;
height: 30px;
color: black;
}
</style>
<body>
<div class="Home">Home</div>
<h1></h1>
<p></p>
</body>
</html>
There are several things wrong with your code:
There is no head tag in the document.
You can't simply put <header> tags outside of <body> element. (http://www.w3schools.com/tags/tag_header.asp)
Style tags should be placed inside <head> or <body> tag.
This is not an image URL >> https://postimg.org/image/vg652px3f/
Firstly you are using a website address in the background image style, not an actual image.
The image that you may be referring to is actually at the link:
https://s9.postimg.org/mxwoydqkv/menubg.jpg
Edit: If your goal is to show a website inside your website, you should be using an iframe.
<iframe src="https://postimg.org/image/vg652px3f/"></iframe>
Related
I'm using Vs code with live server extension But When I open the HTML file or on GitHub pages The out does not show the background image
Overall Every Style I applied is working,
but only the background image of the
.left
div inside
.home
section
I have tried using CSS instead of SCSS
I have this snippet
Snippet won't work
as the image is local and if I add external URL then It works
.home .left {
width: 100%;
height: 100vh;
background: url("media/bgH.png") no-repeat center fixed;
}
<HTML>
<head>
</head>
<body>
<section id="home" class="home">
<div class="left">
<div class="container">
</body>
<HTML>
I tired swapping
background: url("media/bgH.png") no-repeat center fixed
for
background: url("./../../media/bgH.png")
and also to
background: url("../../media/bgH.png")
This link is for the GitHub Page
maybe this link will help
HERE!
This The folder structure
HERE!
At first, the problem seemed to be that only my CSS file, which was linked into my HTML document, wasn't loading in the browser when opened, but then when integrating an image into the HTML document I found it also wasn't appearing in the browser when the document was opened (and I used Microsoft Edge, Chrome, and Firefox to open the document. All files are located in the same folder on my computer, and yet using relative paths to locate the files also seem to be doing nothing. The code looks as such. (Worth noting that I was messing around with both the background-image property in CSS and the tag in HTML to load the same file since neither seemed to work)
HTML Code:
<head>
<title>Quad Game Schedule</title>
<link type="stylesheet" rel="text/css" href="displaylayout.css">
</head>
<body>
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
<div class="F1">
<h2>Full Field Games</h2>
<ul>
<li>12:00 - TSPro vs Wings</li>
<li>12:45 - Team Evanston vs Bosnia</li>
</ul>
</div>
CSS Code (displaylayout.css):
body {
background-color: rgb(242, 242, 242);
color: red;
}
p {
color: red;
}
img {
align-self: center;
vertical-align: top;
}
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
.F1 {
align-self: center;
float: left;
clear: none;
width: auto;
}
In the browser developer side bar, it says that there are no style properties for the webpage, which can't be true. I can always write the CSS into the HTML document, but the image is also an integral part of the end product and that won't load either. (Also maybe worth noting, with text-color for the p element and body used in CSS was merely for testing purposes)
Edit: this is the exact code for the test files I made that still don't work.
HTML:
<html>
<head>
<title>Test Webpage</title>
<link type="stylesheet" rel="text/css" href="test.css">
</head>
<body>
<h1>This is a test heading</h1>
<p>This is a test paragraph</p>
<img src="test.png" alt="Test Picture">
</body>
</html>
CSS:
h1 {
color: red;
font-size: 24pt;
}
p {
color: blue;
font-size: 12pt;
}
The image in the new folder for these test files was renamed as test.png.
Edit 2: I just found out that older files of mine that linked to external files still work, so the problem lies with the new files I make.
In your code you are trying to load the image twice, once as a background image for the div with class fieldimg, and once inside it in an ` tag:
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
1.) The background image needs to have be defined like background-image: url(field.png), not like you did it ("image(field.png)")
2.) The height setting for .fieldimg (30%) won't work, because there is no container around it that has a height setting to which the 30% could relate. So this becomes 0px high and therefore won't be visible. To avoid this you can apply height: 100% to the body
If you fix both, you'll have to erase either the background image or the image tag, otherwise you'll get your image twice...
Your CSS contains an error that might be the cause:
.fieldimg {
height: 300px; /* set an absolute amount of pixels here instead of a relative number (which is relative to nothing) */
width: 45%;
background-image: url('field.png'); /* this is how you place images by setting a background image */
background-size: cover;
}
Reference
Also, remember that when not using relative paths in your CSS it is relative to the location of the .css file! So if using an image as a background image in a specific CSS folder, be sure the image is relative to that CSS file location.
I cannot get this background image to appear. It is supposed to appear in the background with the header overlapping it. I'm using an id selector. I literally copied this straight from the book i have for my class and it's not working at all.
Here is my code. I'm very new to css
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fall Nature Hikes</title>
<style>
#content { background-image: url(fall.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
width: 640px;
height: 480px;
padding-top: 20px; }
h1 { background-color: #FFFFFF;
opacity: 0.6;
font-size: 4em;
padding: 10 px; }
</style>
</head>
<body>
<div id="content">
<h1>Fall Nature Hikes</h1>
</div>
</body>
</html>
In my browser it works right for another image, you can check the url(fall.jpg) path is right？
I checked, your code can show the image, you can see this sample:
> https://jsfiddle.net/a9qm1j2t/
It's just copy all your html and css source code.
I think you should check image path and image type again, and make sure it's right.
May be your image path is not proper.
First check where is your css file and image file.You can verify your image path by inspecting your code on browser and in style check your image path.
I have a quick question, I'm making a simple html document, with an image that I want to fill the entire page.
For some reason, it wants to create a border around the image. I've tried border="0"; and padding 0px 0px 0px 0px;
Here is the code in which I have: (You can also check it out live if you prefer www.kidbomb.com/chefwannabe)
<!DOCTYPE html>
<html>
<head>
<title>Pre-Order Now!</title>
</head>
<body>
<img style="width: 100%; overflow:hidden;" src="http://www.kidbomb.com/chefwannabe/chefwannabepreview.png" />
</body>
</html>
Add the following CSS in your code. Default body will give some margin and padding. So better whenever you start new work, add this style in your css for getting the proper result.
body
{
padding:0;
margin:0;
}
Instead of using the img tag, set the background-image property of the body tag so it encompasses the entirety of the page.
body {
background-image: url("path/to/image.jpg");
height: 100%;
width: 100%;
}
I'm setting a landing page for My new website
I've created an image, and I'm setting it as the background image. Unfortunately, I can't seem to figure out at all how to get it to be full screen, and scrollable - so you can just scroll up/down to see the full image - but without having any white spaces or anything.
<!DOCTYPE html>
<html>
<title>On The Ropes Boxing! Coming Soon!</title>
<body>
<style>
html {
height: 100%;
margin:0px;
background: url(comingsoon.jpg) no-repeat top center;
background-size: cover;
background-attachment: scroll;
}
body {
min-height: 100%;
margin:0px;
}
#appcontainer {
position: relative
background-color: rgba(255, 255, 255, 0.7);
width:560px; height:2220px;
left:20px; top:20px;
}
<img src="comingsoon.jpg" style="minwidth:100%;height:100%;" alt="" />
</style>
</body>
</html>
That is what I have so far. I'm completely new to HTML and CSS, so I'm basically just learning on the job and going through trial and error. I fully expect to be told I'm doing this completely the wrong way. Any advice is appreciated - just be aware that I may need to be told as if I'm an idiot :)
Thanks so much.
Replace the img tag in your code with this:
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" style="width:100%;position:absolute;z-index:-1" alt="" />
And move it out of the style tags.
Before I get into the answer, allow me to correct your code first.
The basic format for a webpage is this:
<!doctype HTML>
<html>
<head>
//Titles, scripts, styles, etc.
</head>
<body>
//Everything else, can also hold scripts and styles.
</body>
</html>
You're missing a head in your code.
Second, don't place html tags inside style tags (referring to your img).
As for your question,
<!DOCTYPE html>
<html>
<head>
<title>On The Ropes Boxing! Coming Soon!</title>
<style>
html, body {
height: 100%;
width: 100%;
margin:0px;
border: 0;
}
.splash {
width: 100%;
z-index: 0;
}
//Rest of styles
</style>
</head>
<body>
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" class="splash" />
</body>
</html>
Putting the image as the background won't work, as the page won't have anything to scroll to. Putting the background as an image will allow the page to scroll.