keytoneIam Posted January 7, 2017 Share Posted January 7, 2017 I am trying to get a background image to fill the screen and be centered. Don't know what I'm doing wrong ( except for the fact that I don't know what I'm doing! ) I've clearly missed something. The image is too big for my screen, and I can't get it centered or resized. I really could use a point in the right direction. Thank you very much if you can clear me up on this! John http://jdswebmarket.com <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <title>JD's Web Market</title> <head> <meta charset="UTF-8"> <meta name="description" content="forthcoming, undetermined"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Multiple Combined Authors"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-image:url('bg_images/pexels1764Wide.jpg'); background-repeat:no-repeat; background-position:middle center; { </style> <link rel="stylesheet" type="text/css" href="splitmenubuttons.css" /> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src="splitmenubuttons.js"> /* Split Menu Buttons: created: Aug 8th, 2012 by DynamicDrive.com. This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/ * Visit http://www.dynamicdrive.com/ for full source code */ </script> <script> jQuery(function(){ // on document load $('a[data-showmenu]').splitmenubuttonMenu() // Add split button menu to links with "data-showmenu" attr }) </script> </head> <body> <!-- Sample Menu buttons markup --!> <center> <div> <a href="#" data-showmenu="dropmenu1" data-menucolors="dark red,green" class="splitmenubutton">Office</a> Link to comment Share on other sites More sharing options...
dsonesuk Posted January 7, 2017 Share Posted January 7, 2017 (edited) There is no such property 'middle' for background-position, it should be 'center center', that said, your body height is currently determined by content, so it will not be centre vertically because body height is not equal to browser window or viewport height, this can be fixed by giving html, body {height: 100%;}. Now to fill the viewport completely with NOT seeing any background you can use background-size: cover; which will fill the viewport but will clip the image as it fills the screen proportionately, or you could use background-size: 100% 100%; which will cause the image to fill entire viewport showing the image in its entirety, but not proportionately to images original size. Edited January 7, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now