• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

background image

Question

hbjr7    1

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) */
 

 

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
DevTech    1,518

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.

 

Share this post


Link to post
Share on other sites
  • 0
Xendrome    5,582

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

 

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.