• 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
https://www.neowin.net/forum/topic/1294512-background-image/
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.

 

  • 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

 

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Windows 11 gets new audio improvements in the latest builds

      By wingliston · Posted

      Each of the devices displayed on this page now has a little volume meter next to it to show if there is audio actively playing. About time.
    • Windows 11 version 26H2 is now available for testing in the latest preview build

      By LiLmEgZ · Posted

      Owing to the nature of Windows feature enablement updates, it was distributed over Windows Update services as a complete system upgrade rather than as an ordinary cumulative update
    • Politically funny images of the World

      By +primortal · Posted

    • Microsoft confirms Windows 11 26H2, urges IT admins to prepare for release

      By Usama Jawad96 · Posted

      Microsoft confirms Windows 11 26H2, urges IT admins to prepare for release by Usama Jawad Windows 11 typically follows an annual update cycle, but Microsoft recently broke that tradition a bit by releasing a "26H1" version in the first half of this year as a "scoped" build for select new silicon PCs only. This version was not available for customers using 24H2 and 25H2 builds, as Microsoft is busy preparing version 26H2 for them, confirmed officially for the first time. In a Windows IT Pro blog, Microsoft has urged IT admins to prepare for the upcoming release of Windows 11 version 26H2. The company has confirmed that this will be a small enablement package (eKB) that will simply light up certain disabled features that are already present in the operating system's code base. This means that the "refined" Windows update and deployment experience will be simpler and quicker, with minimal disruptions, as the feature update will simply toggle a few flags rather than performing a complete replacement. Microsoft has explained that this is all possible because the standard Windows 11 releases share the same servicing branch and hence, the same source code. However, this also means that Windows 11 26H1 users won't be able to upgrade to 26H2 as that is a different branch, but this is something we have known for a while now. Similar to previous annual feature updates, Windows 11 26H2 will offer the following support cycles: 24 months of support for Home, Pro, Pro EDU, and Pro for Workstations editions 36 months of support for Enterprise, Education, IoT Enterprise, and Enterprise Multi-session editions Microsoft has not confirmed a concrete release date for Windows 11 26H2, but noted that it is "coming soon". If we go by the ongoing release cadence, we can expect it to begin rolling out in early October 2026. As such, IT admins have been encouraged to begin validating Windows Insider releases in the Experimental Channel, plan rollout rings, and strategize the utilization of their existing deployment tools.
    • Windows 11 gets new audio improvements in the latest builds

      By TarasBuria · Posted

      Windows 11 gets new audio improvements in the latest builds by Taras Buria Today's Experimental builds (26H1 and Future Platforms, formerly Canary) pack several audio-related improvements. If your device is enrolled in the Experimental Channel (26H1), you can download build 28120.2315, while those in the Future Platforms version have build 29613.1000 to try. Here is what is new in build 29613.1000: [Audio] Following up on our previous improvements, we’re making some more adjustments to Settings > System > Sounds based on your feedback. Namely, we’ve updated the “All sound devices” page so: You now have the ability to change default devices from this page. Each of the devices displayed on this page now has a little volume meter next to it to show if there is audio actively playing. We’ve adjusted the page design slightly so now you can filter whether you’re viewing input or output devices. We’ve added toggles so you can choose if you want to hide or show disabled, disconnected, and unplugged devices on this page. We’ve also updated the input and output audio properties page for devices in Settings to now include jack information for those that need it. And here is the changelog for build 28120.2315: This update includes a small number of minor bug fixes and improvements. [Accessibility] This update improves caption style responsiveness by redrawing captions immediately for caption style changes. If no current caption is visible, a sample caption string is displayed. [Audio] This update improves the reliability of the inbox HD Audio driver. You can find the official release notes for build 28120.2315 here and for build 29613.1000 here.

  • Recent Achievements

    • Collaborator
      ryansurfer98 went up a rank
      Collaborator
    • Week One Done
      Eurosoft10 earned a badge
      Week One Done
    • One Month Later
      Eurosoft10 earned a badge
      One Month Later
    • One Year In
      Skeet Campbell earned a badge
      One Year In
    • One Month Later
      Sharbel earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      576
    2. 2
      +Edouard
      189
    3. 3
      Michael Scrip
      79
    4. 4
      PsYcHoKiLLa
      78
    5. 5
      neufuse
      72
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!