Help please How do i put image in css?


#1
#banner

{

position: relative;
background-color:#666;
display:block;

}

#banner .image 

{
background-image: url("logo.jpg");
background-repeat: no-repeat center bottom;
background-attachment: fixed;

}

.imageresp

{

width:100%;

}

html

<div id="banner">

	<div class="image"> </div>

	

</div>

My image file is in my css folder it just called 'logo.jpg'


#2

simple use <img> element and give it a src attribute with a value of your image name (if they files are in same folder)


#3

so why does my imagae appear at the bottom?


#4

oops, you use a background image, my mistake, let me check again

Can you give me the code in such a way i can work with it? The image currently doesn't display

and what exactly is your question? The image seems to display fine?

it seems you give wrong values to background-repeat, look at the background repeat docs


#5

i don't know why it apears at the bottom or cover.
i want it to apear just under my nav with that size fit.
(div id cover is close.)

		    <div class="navigation">

				<ul>
					<li><a href="index.html">Homepage</a></li>
					
					<li><a href="url">About IT Helpzone</a></li>
					
					<li><a href="url">How To</a></li>
					
					<li><a href="url">Services</a></li>
					
					<li><a href="url">Contact</a> </li>
					
				</ul>
  
			</div>

<div id="cover" 

</div

#cover {
  background: url("ithelpzone.JPG.jpg") ;
   min-height: 350px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
	margin: auto;


}

.navigation {
  background-color: rgba(255, 255, 255, 0.9);
  overflow-y: auto;
  position: fixed;
  top: 0;
  text-align: center;
  width: 80%;

 }


.navigation li {
  color: #14213D;
  display: inline-block;
  font-family: 'Abel', sans-serif;
  font-size: 16px;
  font-weight: 300;
  margin: 16px 20px;
  text-transform: lowerercase;
}

	@media only screen and (max-width : 640px)

 	{

.navigation  ul li 

	{ 
	
	display:inline-block;
	
    	}

#6

can you upload the image and use that url? so i actually have an image to work with. Preferable, put your whole code online, that is easier


#7

<!DOCTYPE html>	

<head>

	<title>Template for Website</title>

	<meta name="description" content="Free Web tutorials"/>

	<meta name="keywords" content="HTML,CSS,XML,JavaScript"/>

	<link type="text/css" rel="stylesheet" href="css/style2.css"/>

</head>	
	
<body>
	<div id="wrapper">

		
	

		

	

		    <div class="navigation">

				<ul>
					<li><a href="index.html">Homepage</a></li>
					
					<li><a href="url">About IT Helpzone</a></li>
					
					<li><a href="url">How To</a></li>
					
					<li><a href="url">Services</a></li>
					
					<li><a href="url">Contact</a> </li>
					
				</ul>
  
			</div>
		


	

	
  <div id="cover">
    <div class="cover-content">
      
    </div>
  </div>


	

	<div id="content">

		<div id="one">

				<p> Add Text here </p>

				<br />
				<br />
				
	
				
				<p> Add Text here </p>
		
				<br /> 
				<br />

				
				<p> Add Text here </p>		
				<br /> 
				<br />
		

		</div>

		<div id="two">	

				<p> Add Text here </p>
		
				<br />
				<br />
	
				
				<p> Add Text here </p>
		
				<br /> 
				<br />

				
				<p> Add Text here </p>
				<br /> 
				<br />
		
		</div>

	</div>

		<div id="footer">


				

	



				<h6> Saran khongmek Copyright 2016 </h6>
				
				<ul>
				 
				
					<li class="facebook"><a  href="https://nescollegeithelpzone.tumblr.com"><img src="Media_libery/tumblr.png" alt="tumblr" width="35" height="35"/></a></li>	
				
					<li class="twitter"><a href="https://nescollegeithelpzone.tumblr.com"><img src="Media_libery/twitter.png" alt="twitter" width="35" height="35"/></a></li>	
				
					<li class="tumblr"><a href="https://nescollegeithelpzone.tumblr.com"><img src="Media_libery/facebook.png" alt="facebook" width="35" height="35"/></a></li>	
				
					<li class="googleplus"><a href="https://nescollegeithelpzone.tumblr.com"><img src="Media_libery/googleplus.png" alt="youtube" width="35" height="35"/></a></li>

					<li class="youtube"><a href="https://nescollegeithelpzone.tumblr.com"><img src="Media_libery/youtube.png" alt="youtube" width="35" height="35"/></a></li>
					
				</ul>
						
			
							<div class="col">
							
								<h2>Number</h2>
								
								<p>01224612510</p>
									
							</div>
							
							<div class="col">
							
								<h2>Email</h2>
								
								<p>studenthelpdesk@nescol.ac.uk</p>
								
							</div>
							
							<div class="col">
							
								<h2>Location</h2>
							
								<p> Aberdeen City Campus Gallowgate Aberdeen AB25 1BN</p>
							
							</div>
							
        			




				
		</div>

		

	

	

</div>

</body>

</html>
  • CSS Document */

body

	{
	margin:0;
	padding:0;
	font-family:Verdana, Geneva, sans-serif;
	background-color: rgb(196,196,196);
	color:#CCC;
	}

#wrapper

	{
	width:80%;
	margin:auto;
	position:relative;
	background-color:#333;
	min-width:521px;
	}

#cover {
  background: url("ithelpzone.JPG.jpg") ;
   min-height: 350px;
   
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
	margin: auto;


}

.navigation {
  background-color: rgba(255, 255, 255, 0.9);
  overflow-y: auto;
  position: fixed;
  top: 0;
  text-align: center;
  width: 80%;
  z-index: 10000;
}

.navigation ul {
  padding: 0;
}

.navigation li {
  color: #14213D;
  display: inline-block;
  font-family: 'Abel', sans-serif;
  font-size: 16px;
  font-weight: 300;
  margin: 16px 20px;
  text-transform: lowerercase;
}

	@media only screen and (max-width : 640px)

 	{

.navigation  ul li 

	{ 
	
	display:inline-block;
	
    	}

	}
	
.navigation  ul
	
	{
		
	list-style: none;
	margin: 0 auto; 
	padding: 0;
	text-align: center; 
}

.navigation  ul li 
	
	{
		
	color: #fff;
	display: inline-block;
	height: 80px;
	line-height: 80px;
	list-style: none;
	padding: 0 10px;
	font-weight: 100;
	text-transform: lowerercase;

}

.navigation  ul li:hover 
	
	{
		
	background: #117bff;
	cursor: pointer; 
	transition: background .5s;  
	
	}

	
	
	
.navigation  li>a

	{
	
	
	text-decoration:none;
	text-align:center;
	display:block;
	color:#CCC;
	


	}
	
	
		

	

	



	#content2

	{

	display:block;
	background-color:#666;
	margin-top:10px;

	}

	#one 

	{

 	background-color:#666;
  	float:left; 
  	margin-right:2%;
  	width:49%;

	}
		
	#two 

	{ 

  	background-color:#666;
  	overflow:hidden;
  	margin-top:10px;
  	min-height:170px;
	width:49%;

	}

	@media screen and (max-width: 640px) 

	{

   	#one 

	{ 

    	float:none;
    	margin-right:0;
    	width:100%;
    	border:0;
   
  	}
	
	#two 

	{ 

    	float:none;
    	margin-right:0;
    	width:100%;
    	border:0;

   
  	}

	}

	p

	{

	font-size:14px;
	color:#CCC;
	padding-left:15px;
	padding-right:15px;
	padding-bottom:15px;

	}

	
	
	



	
	
#footer 
	
	{
	
	height:150px;
	background-color: #ffffff;
	display:block;
	margin-top:10px;
	margin-bottom:10px;
	
	}

	
 #footer li>a 
  
	{
  
  	display: flex;
  	justify-content: flex-end;
	
	
	
	}
	
#footer li 
	
	{
	
	display:inline-block;
	
	}
	

#footer ul 

	{
	
  float: right;
  
	}
	
	
.col {

  text-align: center;
}

.col {
  float: left;
  padding: 10px;
  width: 23%;
}

.col h2 {
  color: #9631A3;
  font-size: 20px;
  margin-bottom: 10px;
}


.col p {
  color: #000000;
  font-size: 12px;
  line-height: 20px;
  margin-bottom: 20px;
}


#8

i put your code in a bin, that is easier, now i will look at it


#9

it's also not mobile friendly as my nav crush.


#10

simple get rid of background-attachment: fixed; to achieve what you want to achieve

if you want to prevent this, use col-xs and col-sm for smaller screen (see botstrap website)