Solved

Why is my background image looking like this?

Posted on 2014-12-31
3
87 Views
Last Modified: 2014-12-31
Attached are two screenshots of a page that I built (http://www.mms-nashville.com/index.php). This first one represents what I intend the site to look like regardless of the size of the browser:

preferred
Here's what the same page looks like in a smaller browser:

wretched
What do I need to change in my CSS so the smaller browser scenario doesn't have that hideous white space going on on the left hand side?

My stylesheet is at http://www.mms-nashville.com/stylesheet.css

Thanks!
0
Comment
Question by:brucegust
3 Comments
 
LVL 28

Accepted Solution

by:
chilternPC earned 500 total points
Comment Utility
the margin left is incorrect - it should be 50% of 1620px (the image you are using) so it should be -810px not -553px

so it should be:

@media screen and (max-width: 1620px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -810px;   /* 50% */
  }
}
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Those slider images have a white border as do the top blocks!
0
 

Author Comment

by:brucegust
Comment Utility
That did it!

Thanks!
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now