I want to add a background image on my webpage but when I add in my code it doesn't show the image. The page is linked to the home page but how would I get my background image to appear when the user selects the help guide tab, which it then takes them to another page.
<html>
<head>
<meta charset="utf-8" />
<style>
h1 { text-align: center; font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: 50; }
p.p-stage { text-align: center; font-family: Arial; font-size: 150%; }
p.p-help { text-align: center; font-family: Arial; font-size: 100%; }
body {
background-image: url("assets/images/Festival.jpg");
background-height: 100%;
backgroud-width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
#rcorners2 {
margin: auto;
text-align:left;
border-radius: 25px;
border: 2px solid #000000;
padding: 20px;
width: 1000px;
height: 750px;
overflow: auto;
}
</style>
</head>
<body>
<h1>Help Guide</h1>
<p class ="p-stage" id="rcorners2">Stages:<br><br>1. How to add a stage?<br><br>
To create a stage please do this.................<br><br>
2. How to delete a stage?<br><br>
To delet a stage please do this.................<br><br>
3. Add a help guide with a questions users may come up with and then com up with answers.
</p>
</body>
</html>
Here is my webpage
I fixed the problem. it is due to path of the root directory. To go back in the root directory where the image file might be in use:
background: url("../../assets/images/Wallpaper4.jpg");
the 2 dots go back one folder so two .. means you have gone back 2 folders
Related
Using a header tag with an h1, the h1 is showing with all the font modifications. The background image will not show. I have verified the image location is valid by using the same code for an img tag. The header will also not push down the lower elements when the screen reduced. Below is the html and css:
<!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.0">
<title>Dasmoto's Arts & Crafts</title>
<link rel="stylesheet" href="./resources/css/index.css">
</head>
<body>
<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<section id="brushes">
<h2>Brushes</h2>
<img src="./resources/images/hacksaw.webp" alt="">
<h3>Hacksaw Brushes</h3>
<p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes.</p>
<p class="links">Starting at $3.00 / brush.</p>
</section>
<section id="frames">
<h2>Frames</h2>
<img src="./resources/images/frames.webp" alt="">
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.</p>
<span class="links">Starting at $2.00 / frame.</span>
</section>
<section id="paint">
<h2>Paint</h2>
<img src="./resources/images/finnish.jpeg" alt="">
<h3>Clean Finnish Paint</h3>
<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.</p>
<span class="links">Starting at $5.00 / tube.</span>
</section>
</body>
</html>
header {
position: relative;
width: 100%;
height: 130px;
background-image: url('./resources/images/pattern.jpeg');
background-size: cover;
background-position: center;
}
header h1 {
position: absolute;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
}
section img {
display: block;
height: 150px;
width: 150px;
}
section p {
display: inline;
font-family: Arial, Helvetica, sans-serif;
}
#brushes h2 {
background-color: mediumspringgreen;
}
#frames h2 {
background-color: lightcoral;
}
#paint h2 {
background-color: skyblue;
}
.links {
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: blue;
}
Missing Background Image
The problem here is the relative path ./resources/images/pattern.jpeg, relative means, relative to the file where you call it.
In your case, the css is in your CSS file, so the relative path to your image will end up like ./resources/css/resources/images/pattern.jpeg
The dot slash ./ means "Look for the file in current directory" where your current directory for the css file is the css folder.
So either use the correct relative path like ../images/pattern.jpeg or an absolute path like https://www.your-domain.com/resources/images/pattern.png
Header not pushing down content
Two problems here
First, you set a fixed height for the header element
Second, your h1 has position: absolute and therefore doesn't give and "height" on it's own to the header element.
Removing both should give the expected result.
See below example, also note that I've change the background pattern so you see it's working just fine when setting a correct file path.
header {
position: relative;
width: 100%;
background-image: url('https://img.freepik.com/vektoren-kostenlos/zufaelliges-quadratisches-halbtonmuster_1409-1062.jpg?w=2000');
background-size: cover;
background-position: center;
}
header h1 {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
}
section img {
display: block;
height: 150px;
width: 150px;
}
section p {
display: inline;
font-family: Arial, Helvetica, sans-serif;
}
#brushes h2 {
background-color: mediumspringgreen;
}
#frames h2 {
background-color: lightcoral;
}
#paint h2 {
background-color: skyblue;
}
.links {
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: blue;
}
<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<section id="brushes">
<h2>Brushes</h2>
<img src="./resources/images/hacksaw.webp" alt="">
<h3>Hacksaw Brushes</h3>
<p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes.</p>
<p class="links">Starting at $3.00 / brush.</p>
</section>
<section id="frames">
<h2>Frames</h2>
<img src="./resources/images/frames.webp" alt="">
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.</p>
<span class="links">Starting at $2.00 / frame.</span>
</section>
<section id="paint">
<h2>Paint</h2>
<img src="./resources/images/finnish.jpeg" alt="">
<h3>Clean Finnish Paint</h3>
<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.</p>
<span class="links">Starting at $5.00 / tube.</span>
</section>
Your index.html is probably in the root of your project, whereas your CSS stylesheet is in /resources/css/index.css.
You are using relative paths to include the images.
A relative file path points to a file relative to the current page.
Because your index.html and index.css are not in the same directory, they have different relative paths. That's why the image can be loaded from your HTML file, but not from your stylesheet.
You can now rather use everywhere the same absolute path, or you adjust the relative path in your CSS stylesheet.
This should be the correct relative path from your CSS file to your pattern.jpeg.
background-image: url('../images/pattern.jpeg');
I am self-teaching myself how to code HTML and I am super new to this (this is my first project.) There are lots of resources online that I am using and I've managed to figure things out as I go. However, I am encountering an issue: I have an .svg border around my page and then some text that I have added. Somehow the text has a white background that goes over the border and I want to eliminate this text background but I can't seem to figure out how. I have attached an image showing what it looks like and my code.
I'd appreciate any help or direction on how to resolve this. And as I am very very new to this, please explain it step by step as I am not familiar with any of the terminologies (for example, I still don't understand what div is lol)
Thanks in advance! :D
<!DOCTYPE html>
<html>
<head>
<title>PDF</title>
</head>
<style>
html {
background-image: url("border\ cleaned.svg");
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgb(255, 255, 255);
}
.title {
padding-left: 160px;
padding-top: 100px;
text-align: left;
font-family: sans-serif;
font-size: 30px;
color: rgb(0, 0, 0);
background-color: transparent;
}
.intro {
padding-top: 40px;
text-align: center;
font-family: sans-serif;
font-size: 20px;
color: black;
background-color: transparent;
}
</style>
<body>
<h1 class="title">Portable
<br>Digital
<br>Format</h1>
<p class="intro">Portable Digital Format is a curated virtual space
<br>founded by Ahmad Saleh to showcasing creative
talent
<br>within the SWANA region.
</p>
</body>
</html>
I'm trying to replicate a webpage template solely for the purpose of becoming more familiar with the works of HTML/CSS. I want to use an image in my documents as a background for a DIV, but for some odd reason, it will not import. Keep in mind, I'm still pretty new to coding.
I pulled a random stock photo address off of Google as a test, and that would work. So, I'm thinking either I have the photo located in the wrong folder (It's in the same exact folder as the document I'm calling it from), or there's something else in my code that is conflicting with the called image/file. I'm still not sure, though.
HTML file:
<html>
<head>
<title>conquer</title>
<link rel="stylesheet" type="text/css" href="conquer.css" />
</head>
<body>
<div class="navbar">
Homepage
About Us
Services
Contact
External
</div>
<div class="topbanner"></div>
</body>
</html>
CSS file:
body {
background-color: #fff;
margin: 0;
}
/** Navigation Bar **/
.navbar {
background-color: #383E4C;
height: 100px;
width: 100%;
position: fixed;
text-align: center;
margin-top: 0px;
}
.navbar a {
color: #F6F6F7;
text-decoration: none;
font-size: 22px;
font-family: "Helvetica", sans-serif;
border: 1px solid #646D7C;
padding: 15px;
margin-top: 20px;
margin-right: 20px;
display:inline-block;
}
.navbar a:hover {
background-color: #49505F;
}
/** Top Banner **/
.topbanner {
height: 500px;
width: 300px;
background-image: url('/city.jpg');
background-repeat: no-repeat;
}
I want the image to display in the DIV, but when I open the console elements, it's just a huge invisible block.
In paths, the leading slash /, tells the browser to goto the ROOT folder.
So you will want to change this:
background-image: url('/city.jpg');
to
background-image: url('city.jpg');
I'm new to SVG and have been putting numbers in text tags for a week or two with no issues. It seemed straightforward. Now, strangely, I'm having an issue in which, no matter what numbers I put in, there is a dip in the second number.
Here is a pic to show you what is happening. The number "63" is supposed to be all on the same plane with itself, though a bit below the "This Week" designation. Instead, the '3' is dipping down lower. Pic of my problem.
My code:
<div class = "chartbox">
<div class = "svgcontainer" >
<svg class = "chart" width="590" height="440" role="img">
<g class = "bigbox">
<text x="346" y = "35" class = "blurbhed">This Week </text>
<text x ="491" y ="44" class = "blurbdeck"><?php echo round($kms_for_table[0]);?></text><text x ="540" y ="48" class = "blurbkm"><?php echo "km";?></text>
</g>
</svg>
</div>
</div>
The CSS:
body { background-color: #1C1816;
font-family: Raleway, Gotham-Rounded, Arial , sans-serif;}
.blurbhed {
font-size: 1.5em;
font-weight: 600;
fill: #650a5d;
letter-spacing: .3px;
}
.blurbdeck {
font-size: 2.7em;
font-weight: 600;
fill: #08292e;
letter-spacing: .4px;
}
.blurbkm {
font-size: 1.3em;
font-weight: 600;
fill: #08292e;
letter-spacing: .4px;
}
.svgcontainer {
display: block;
position: relative;
border: 10px solid purple;
background-color: lightyellow;
margin-left: 10px;
height: 453px;
width: 630px;
margin-top: 0px;
margin-bottom: 20px;
text-align: center;
margin-right: 50px;
}
.chartbox {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
width: 800px;
margin-bottom: 10px;
padding-top: 20px;
}
The same problem happens wherever I move the text around the svg element. It occurs with a variety of fonts, and with different numbers. It happens whether I just have it echo the number or have it generated by the code from my model. I also tried making a completely new text element in a different spot, and the same weird dip in the second number occurs.
I'm sure this is really simple, but I've been fiddling with it far too long and am hoping someone can help me out. Thank you!
This is definitely down to the design of the font being used.."Raleway".
h1 {
font-family: 'Raleway', sans-serif;
font-size: 72px;
text-align: center;
}
h2 {
font-family: 'Open Sans', sans-serif;
font-size: 72px;
text-align: center;
}
* {
margin:0;
}
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<h1>0123456789</h1>
<h2>0123456789</h2>
I can only suggest using a different font..but you'd have to test each for the right look.
There's a proper solution for this that allows you to continue using Raleway:
You need to do two things:
Add CSS instructing the browser to use the lining-figures
Avoid pre-optimised font files (as served by Google Fonts.)
The CSS:
body {
font-variant-numeric: lining-nums;
font-feature-settings: "lnum";
}
Alternative CDN (Brick):
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Raleway:400">
The problem with Google Fonts is that it minimises font download size by removing 'unnecessary' glyphs and meta-data. In particular in this case, it removes the lining-nums variation of figures from Raleway. (You can try adding &subset=all to a Google Font URL to circumvent this, but this doesn't appear to be reliable.)
I have built a landing page for an external client all is working fine, I have a background image which fits the hole screen, I modified the existing body tag within the bootstrap.css class as follows
body {
margin: 0;
background-image: url('/Content/Images/Danone-Background-New.png');
background-size: 1440px 800px;
background-repeat: no-repeat;
background-size: cover;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
z-index: 9999;
}
Again this works perfectly when running locally, I then publish this site to the hosting environment, and when I navigate to the site all the content is displayed minus the background image, so I first assumed I have the wrong path so I checked the body style using firebug and this is what I see
body {
background-color: #fff;
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857;
}
So for first glance I assumed "Oh that's strange it hasn't copied over my body styles!" so I repeat the process again and low and behold the body style remains as above, So i login to the server navigate through the files to the bootstrap.css find the body tag and again it looks as I expected
body {
margin: 0;
background-image: url('/Content/Images/Danone-Background-New.png');
background-size: 1440px 800px;
background-repeat: no-repeat;
background-size: cover;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
z-index: 9999;
}
Yet the image does not render.
What is wrong with this? I have tried ctrl f5, looked in the development tool bar checked for any 404 erros nothing displayed ? I'm baffled?!
Link to check www.danoneultimate.com.au
In the <head> section of your website, you load a different stylesheet.
<link href="/Content/css?v=WY2Ybti5pBJYm0QfqiFBL2b5U_cKoeAWQC9DALv4mnw1" rel="stylesheet">
Change it so that it loads bootstrap.css:
<link href="/Content/bootstrap.css" rel="stylesheet">
You have edited bootstrap.css but you're loading bootstrap.min.css.
Your code works just fine :)