• 0

background image

Asked by hbjr7,

 Share

Question

Rookie

hbjr7

Posted
Posted (edited)

Hi,

I'm having issues coding a background image as the main background. I can't get it to center or cover the entire page even though I did coding for it. My header is a background image and is nested with the logo. I can't seem to get the header to sit over the background image so that it's directly underneath it and there are no white spaces. Not sure what to do, any help is appreciated. 

 

HTML

 </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> 
     
     <div style="background-image"><img src="css/images/yarnbackground.png">
     
     </div>
     
     
     
   
            
    
         
         <div id="footer">Copyright ©2016 Leaping Llama Farm</div>
    
         
     
     
     </body>
       </html>

 

 

 

 

 

CSS

 

/***** MD (Medium) - Medium Desktop Size AND ABOVE! (992px) */
@media (min-width: 992px) {
     h1 {
    background-image: url(images/llama-logo.png);
    background-position: left;
    background-repeat: no-repeat;
    margin-left: auto;
    padding: 125px 0;
    
    
}

header{
 background-image: url(images/llama-header.jpg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: auto;
 padding-top: 20px;
 
 
}

/* Nav Styles */


nav {
    background-color: #00ff99;
    height: 50px;
    padding: 20px;
    margin-top: 50px;
    margin-bottom: 50px;

    
    
}

nav li {
    float: left;
    font-size: 25px;
    margin-left: 95px;
    font-family: 'Myriad', sans-serif;
    font-weight: 700;
    margin-top: 12px;
    
}

nav ul {
    list-style: none;
    text-align: center;
    padding-bottom: 30px;
    text-decoration: none;
    

}

nav a {
    color: darkslategrey;
    text-decoration: none;
   
    
}

nav a:hover {
    color: white;
    
}

#background-image {
    background: url(images/yarnbackground.png)
    background-repeat: no-repeat; 
    background-position: center;
    background-size: cover;
    
}

#footer {
    background: orange;
    height: 50px;
    width: auto;
    
    
} /***** END MD (Medium) */
 

 

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Grand Master

DevTech

Posted
Posted

If a million monkeys typed for a million years would you get Shakesphere? A classic question for which the answer is "who knows, but you would get HTML"

 

The worst possible way ever to present information and specially do active programming, it is all a garbage pit of special cases on top of special cases.

 

So the answer is what all web programmers do, find a web page that works right and copy it and never get discouraged that you can't make sense of it because it will never ever make any real sense - just a pretend kind of sense that keeps web bloggers blogging endlessly on the "modern web"

 

Not a useful answer, but browsers mangle divs in brain hurting ways so cut everything out that you can to start with.

 

Also, there will be about 100 different ways to do what you are looking for, all of them only intuitive to one person who will then write a blog about it.

 

Link to comment
Share on other sites
  • 0
Grand Master

xendrome

Posted
Posted

I use this, it also rotates the background based on how many jpg files you want to input into the code. It makes the background image responsive and fullscreen

 

  

		<link rel="stylesheet" href="css/supersized.core.css" type="text/css" media="screen" />

            <script type="text/javascript">
			
			jQuery(function($){
				
				$.supersized({
				
					// Functionality
					start_slide             :   ,			// Start slide (0 is random)
					new_window				:	1,			// Image links open in new window/tab
					image_protect			:	1,			// Disables image dragging and right click with Javascript
															   
					// Size & Position						   
					min_width		        :   ,			// Min width allowed (in pixels)
					min_height		        :   ,			// Min height allowed (in pixels)
					vertical_center         :   1,			// Vertically center background
					horizontal_center       :   1,			// Horizontally center background
					fit_always				:	,			// Image will never exceed browser width or height (Ignores min. dimensions)
					fit_portrait         	:   1,			// Portrait images will not exceed browser height
					fit_landscape			:   ,			// Landscape images will not exceed browser width
															   
					// Components
					slides 					:  	[			// Slideshow Images
														{image : '/bgs/bg.jpg', title : ''},
														{image : '/bgs/bg2.jpg', title : ''},  
														{image : '/bgs/bg3.jpg', title : ''},
														{image : '/bgs/bg4.jpg', title : ''},
														{image : '/bgs/bg5.jpg', title : ''},
														{image : '/bgs/bg6.jpg', title : ''},
														
												]
					
				});
		    });
		    
		</script>

Here is the CSS - https://dl.dropboxusercontent.com/u/111413/static/supersized.core.css

 

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.