Background image coding issues CSS and HTML

**hbjr7** · 04-11-2016, 02:30 PM

Hi I am having some coding issues getting my background image to cover and take up all the space even though I'm coding for it to cover as well as getting it underneath everything. I'm also having issues centering items even though I'm putting the code in for it. If anyone has suggestions I would greatly appreciate it.

**sunfighter** · 04-11-2016, 07:52 PM

We need to see your code. Post here or link to your site.

Or use the search bar above top right for hundreds of answers.

**hbjr7** · 04-11-2016, 08:56 PM

HTML

Code:

<!doctype html>
    
    <html>
        
        <head>
    
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--Prevents IE from going into compatibility mode-->
        <meta name="viewport" content="width=device-width, initial-scale=1"><!--Ensures proper rendering / touch zooming on mobile devices-->
        
        <title>Llama Farm</title>
        
        <!-- Reset and Responsive Styles -->
        <link href="css/normalize-reset.css" rel="stylesheet"><!-- Makes elements dislpay more consistently cross-browser--> 
        <link href="css/responsive.css" rel="stylesheet"><!-- Defines all of the responsive styling -->
        
        <!-- Main Stylesheet -->
        <link href="css/styles.css" rel="stylesheet"><!-- All of YOUR CSS styles -->
        <!-- Linked stylesheets -->
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        
            
             <!--linked fonts -->
    <link href='https://fonts.googleapis.com/css?family=Overlock:400,700|Architects+Daughter|Gochi+Hand' rel='stylesheet' type='text/css'>
            
    </head>

 <body>
     
      
     
     <!--Header Section -->
       <div class="container">
           
           <header class="col-medium-4">
           
               <h1><a href="index.html"><img src= "css/images/llama-logo.png" alt="logo" ></a>
            </h1>
               
   
         </header>
            <!-- Navigation area -->
    
            <nav>
            
            <ul>
                <li><a href="index.html">About</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Classes</a></li>
                <li><a href="#">Llamas</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Contact</a></li>
                </ul>
                
            
        </nav>
           
           <div id="main-content">
           <h2>Welcome to Leaping Llama Farms</h2>
           <p><strong>there are lots of llamas to see, feed, interact with and even ride! Come with family, for birthday parties, school field trips, or just a regular fun outing. The llamas love people and love showing off even more. The farm was establish in 1996, and is home to 80 llamas with 20 acres to roam. Llama shows and competitions will be a part of the farm in the near future, but for now come visit and learn about our llamas!</strong></p>
           
               <div id="info-boxes">
               
                   <p class="box1"><a href="#"><h3>Ride the Llamas!</h3></a></p>
                   
                   
                   <p class="box2"><a href="2nd.html"><h3>Meet the Llamas!</h3></a></p>
                   
                   <p class="box3"><a href="#"><h3>Shop Llama Products!</h3></a></p>
               
               
               </div>
           
           
           </div>
           
     
           
           
   </div> 
     
       
    
     
     <div style="background-image"><img src="css/images/yarnbackground.png">
     
     </div>

**sunfighter** · 04-12-2016, 05:58 PM

Looking at your code I assume (and one has to assume because you don't tell us) that this is what your having problems with:

Code:

<div style="background-image">
	<img src="css/images/yarnbackground.png">
</div>

It's just tacked on the end of your HTML. And your inline style is incomplete.

My next assumption is that you want a background image behind your main content :
<div id="main-content">

This might work. Don't know, because you still haven't given us enough information.

Code:

<style type="text/css">
#main-content {
	background: url(css/images/yarnbackground.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
</style>

**rcsofttech** · 04-14-2016, 06:18 AM

please provide complete information.

**deathshadow** · 04-14-2016, 07:54 PM

Uhg, there's so much wrong there where to even START.. like what makes numbered headings be paragraphs? What's with the X-UA are you using outdated code that for some reason it tripping legacy compatibility settings?!? All those separate stylesheets (likely just to make the page take longer to load) and there's no media targets?

... and if that's a background image -- aka presenation -- what is it even doing in the markup in the first place?!?

Thread: Background image coding issues CSS and HTML

Thread Tools

Rate This Thread

Background image coding issues CSS and HTML

Tags for this Thread

Posting Permissions