• 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

    • The quantum search for Time's origin had an equally mind-boggling conclusion

      By darkrats · Posted

      Why was it necessary to use AI to help write this article? Can we no longer do our own research or our own writing?
    • Waymo recalls self-driving software after cars enter closed freeway work zones

      By +Warwagon · Posted

      The auto industry really needs to update it's terminology so a software update isn't called a recall.
    • We now know when and how the Universe may truly end

      By +pmrd · Posted

      Anybody that thinks flying cars were possible are idiots. Everyone would basically need a pilot licence, can you imagine how insane and dangerous that would be, people can barely handle driving on land safely right now.
    • Microsoft Edge 149.0.4022.80

      By Copernic · Posted

      Microsoft Edge 149.0.4022.80 by Razvan Serea Microsoft Edge is a super fast and secure web browser from Microsoft. It works on almost any device, including PCs, iPhones and Androids. It keeps you safe online, protects your privacy, and lets you browse the web quickly. You can even use it on all your devices and keep your browsing history and favorites synced up. Built on the same technology as Chrome, Microsoft Edge has additional built-in features like Startup boost and Sleeping tabs, which boost your browsing experience with world class performance and speed that are optimized to work best with Windows. Microsoft Edge security and privacy features such as Microsoft Defender SmartScreen, Password Monitor, InPrivate search, and Kids Mode help keep you and your loved ones protected and secure online. Microsoft Edge has features to keep both you and your family protected. Enable content filters and access activity reports with your Microsoft Family Safety account and experience a kid-friendly web with Kids Mode. The new Microsoft Edge is now compatible with your favorite extensions, so it’s easy to personalize your browsing experience. Microsoft Edge 149.0.4022.80 changelog: Fixes Fixed an issue that prevented QR code generation from working. Feature updates Intune MAM Protected Downloads. The protected downloads feature for Intune MAM will now save downloaded files to the Documents > Microsoft Edge > Downloads folder in OneDrive. Extensions monitoring in the Edge management service. The Microsoft Edge management service now allows admins to gain visibility into extensions installed across their managed users. From the extensions monitoring page, admins can see which extensions have been installed as well as manage user requests for blocked extensions. For more information, see Microsoft Edge Extensions Monitoring. Validate Edge builds early with enterprise preview. Enterprise preview provides a simpler way for admins to flight pre-release Edge builds to their users. To reduce friction and bolster usage, users will receive pre-release builds directly inside of their Stable Edge application. Admins can allow users to easily opt-out of the preview experience, using built-in rollback to switch between their pre-release and stable channels with ease. Microsoft 365 admin center users can configure the feature, view their flighting population, and receive personalized recommendations all in one place. For more information, see Get started with Enterprise Preview in Microsoft Edge. Download: Microsoft Edge (64-bit) | 193.0 MB (Freeware) Download: Microsoft Edge (32-bit) | 170.0 MB Download: Microsoft Edge (ARM64) | 188.0 MB View: Microsoft Edge Website | Release History Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Waymo recalls self-driving software after cars enter closed freeway work zones

      By Slugsie · Posted

      The machines are starting to fight back any way they can.

  • Recent Achievements

    • 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
    • First Post
      BizSAR earned a badge
      First Post

  • Popular Contributors

    1. 1
      +primortal
      598
    2. 2
      +Edouard
      189
    3. 3
      PsYcHoKiLLa
      78
    4. 4
      Michael Scrip
      76
    5. 5
      Steven P.
      69
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!