Jump to content

background image positioning giving me a hard time


Recommended Posts

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 :facepalm: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>
<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">
body { background-image:url('bg_images/pexels1764Wide.jpg');
background-position:middle center;
<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
jQuery(function(){ // on document load
$('a[data-showmenu]').splitmenubuttonMenu() // Add split button menu to links with "data-showmenu" attr
<!-- Sample Menu buttons markup --!>
<a href="#" data-showmenu="dropmenu1" data-menucolors="dark red,green" class="splitmenubutton">Office</a>
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
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

  • Create New...