I just want a background image

FruhDude · Jan 3, 2020

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.

independent · Jan 3, 2020

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.)

sunfighter · Jan 3, 2020

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.

FruhDude · Jan 7, 2020

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.

independent · Jan 7, 2020

Can you quote your full html document here?

sunfighter · Jan 7, 2020

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.

How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
Im having trouble containing a title an image and a button	2	Oct 26, 2022
Flip-Cards with Local Images	1	Mar 27, 2023
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Help with my responsive home page	2	Dec 14, 2022
I need help in understanding these files on my phone, Could someone help me understand these files? Urgent help needed. Please help.	1	Jun 4, 2023
setting background image in Page_Load	0	May 1, 2009

I just want a background image

FruhDude

independent

sunfighter

FruhDude

independent

sunfighter

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads