I just want a background image


Joined
Jan 3, 2020
Messages
2
Reaction score
0
Finally started practicing my building process and currently stumped on how to add a background-image to my webpage:

body {
background-image: url("C:\Users\Henry Harrison II\Desktop\DevProject\Projects\Potiential works\Apartment Rental\Resources\Open.jpeg");
background-repeat: no-repeat;
background-position: center;
}

This is what is currently set-up in my CSS that doesn't put anything on the page. However THE SAME PATH:

<img src="C:\Users\Henry Harrison II\Desktop\DevProject\Projects\Potiential works\Apartment Rental\Resources\Open.jpeg">

Puts an image in on my page through HTML.

No matter how I put it, I can't make a background-image only a regular <img> tag.

If anyone could provide assistance that would be bomb.
 
Ad

Advertisements

Joined
Nov 23, 2019
Messages
67
Reaction score
1
hi @FruhDude try first the same without quotation
like this

body { background-image: url(images.jpeg);
}

(if this does not work,then) I think your written pathway to relevant image should be wrong (but both the codes are working on my computer,so I am almost sure that the pathway you selected for that image should be wrong. furthermore,ensure you do other things right,too)

one clue: if you ensure your that .html document and .jpeg document under the same directory then there should be no problem with pathway and your code will be like above (you will NOT to write the whole of address for image, only its name and extension.)
 
Last edited:
Joined
Nov 27, 2019
Messages
128
Reaction score
19
Because the IMG tag works the CSS should work.
This is code from someone else - the HTML is not important. The CSS is it should work:
Code:
<!doctype html>
<html>
<head>
<title>my webpage </title>
<style>
body, html {
  height: 100%;
  margin: 0;
  color:white;
}

#cover {
  background-image: url("C:\Users\Henry Harrison II\Desktop\DevProject\Projects\Potiential works\Apartment Rental\Resources\Open.jpeg");
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>

<body>
  <div id="cover">
<h1>big</h1>
<p>
  this is <strong>bold</strong>
  this is <em>italic</em>
</p>
<p>
  this is <strong>bold</strong>
  this is <em>italic</em>
</p>
<a href="http://www.google.com">google.com</a>
<br> 
<ul>
  <li><a href="page2.html">tshirts</a></li>
  <li><a href="page3.html">Hoodies</a></li>
</ul>
<br>
<div></div>
<span></span>
</div>
</body>
</html>

FYI - The word is spelled Potential in the URL address.
 
Joined
Jan 3, 2020
Messages
2
Reaction score
0
Neither is working. Literally copy pasted sunfighter's code into my editor (Visual Studio) and only
google.com

hoodies
t-shirts

Show on the webpage.
 
Ad

Advertisements

Joined
Nov 27, 2019
Messages
128
Reaction score
19
Yes paste the entire code with the code I gave you added. And please again check and see where your image is located. And see if moving the picture into the same place your index.html file is and just call it with
background-image: url("Open.jpeg");
and check the name of the image.
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top