Help with linking an image from CSS into HTML


#1


Hey guys,

I've just finished this lesson on adding images into HTML, however it doesn't really discuss how to include images into my CSS that are part of my local folder.

I have written my HTML which so far i'm happy with, and i'm trying to add in a background image. The problem i'm having is that i can't seem to pull in my image. I think it's to do with my folder structure, however i'm not sure. I've dropped both my HTML code and CSS code for you to explore. To help, heres how my folder is set up.

index.html
resources (folder)
- styles (folder)
-- style.css
- img (folder)
-- header.jpg

Hope someone can help with this!

Thanks :slight_smile:


<!DOCTYPE html>
<html>
	<head>
  		<title>My first webpage</title>
  		<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  		<link href="resources/styles/style.css" type=text/css rel="stylesheet">
 	</head>
  	<body>
		<div class="image-header">
	  		<div class="heading">
	  			<div id="top-subheading">
	  				<h2>Welcome</h2>
	  			</div>
	  			<h1>24VISION</h1>
	  			<div id="bottom-subheading">
	  				<h3>Our vision is your future</h3>
	  			</div>
			</div>
  	</body>

   
</html>



----------

CSS 

.image-header {
	background-image: url("img/header.jpg");
}

.heading {
	border: solid;
	border-color: #0089CF;
	width: 80%;
	margin: auto;
	padding-top: 5px;
	text-transform: uppercase;
}

#top-subheading {
	padding-top: 30px;
}

#bottom-subheading {
	padding-bottom: 30px;
}

h1 {
	font-family: 'Gotham Medium','Oswald', sans-serif;
	letter-spacing: 50px; 
	font-size: 38px;
	text-align: center;
	width: 100%;
	color: #0089CF;
}

h2 {
	font-family: 'Gotham Bold','Oswald', sans-serif;
	text-align: center;
	width: 100%;
	font-size: 14px;
	letter-spacing: 16px; 
	color: #000;
}
 
 h3 {
	font-family: 'Gotham Thin','Oswald', sans-serif;
	text-align: center;
	width: 100%;
	color: #0089CF;
	letter-spacing: 10px;
	font-size: 14px;
 }


#2

Hi! @alex.mee :smiley:

I have dealt with this type of problem before. And if you want your image to be included in the style.css folder (assuming you coded a rule like:

image_header {
   background-image: url(image_path_here)

}

Now, proceeding that step, you can simply move the image to the "resources/style" folder and add that to the url in the background-image value. As shown here -> resources/styles/name_of_photo.jpg

I hope this helps!!


#3

== the BOOK ==
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Try this code,
-integrated your CSS in the HTML document
-added on extra closing-DIV

<!DOCTYPE html>
<html>
	<head>
  		<title>My first webpage</title>
  		<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  	<!-- <link href="resources/styles/style.css" type=text/css rel="stylesheet"> --></link>
	<style>
	.image-header {
	/*just for test
	height: auto;
	width: 100%;*/
	background-image: url("img/header.jpg");
	/* gif file in same directory as the HTML document
	background-image: url("seaside.gif"); */
	/* get the gif from my =Pictures= directory
	background-image: url("../../../Pictures/seaside.gif"); */
	background-repeat: no-repeat;
	background-size: cover;
	/*background-size: contain;*/

}

.heading {
	border: solid;
	border-color: #0089CF;
	width: 80%;
	margin: auto;
	padding-top: 5px;
	text-transform: uppercase;
}

#top-subheading {
	padding-top: 30px;
}

#bottom-subheading {
	padding-bottom: 30px;
}

h1 {
	font-family: 'Gotham Medium','Oswald', sans-serif;
	letter-spacing: 50px; 
	font-size: 38px;
	text-align: center;
	width: 100%;
	color: #0089CF;
}

h2 {
	font-family: 'Gotham Bold','Oswald', sans-serif;
	text-align: center;
	width: 100%;
	font-size: 14px;
	letter-spacing: 16px; 
	color: #000;
}
 
 h3 {
	font-family: 'Gotham Thin','Oswald', sans-serif;
	text-align: center;
	width: 100%;
	color: #0089CF;
	letter-spacing: 10px;
	font-size: 14px;
 }
	</style>
 	</head>
  	<body>
		<div class="image-header">
	  		<div class="heading">
	  			<div id="top-subheading">
	  				<h2>Welcome</h2>
	  			</div>
	  			<h1>24VISION</h1>
	  			<div id="bottom-subheading">
	  				<h3>Our vision is your future</h3>
	  			</div>
			</div>
		</div>
  	</body>
</html>

#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.