background-position shrinks the background-image?

Hi everyone,

I'm fairly unfamiliar with css, and I can't seem to get this right.

My html page contains a few divs that have the same background-image. This image width is two times the width of a div and consists of two parts of equal size; each part has height: 335px and width: 134px. A div has the same size as an image part. I was able to switch between the parts by setting background-position either to "left" or to "right" (or to 0%/100%). So far, so good.


Hi Guys,

What I am trying to achieve:

Here is my code

body {
	font-family:"Open Sans", sans-serif;
@media all and (min-width: 50px) {  .tile  {   font-size:0.1em;  } }
    @media all and (min-width: 100px) {  .tile {   font-size:0.2em;  } }
    @media all and (min-width: 200px) {  .tile  {   font-size:0.4em;  } }
    @media all and (min-width: 300px) {  .tile  {   font-size:0.4em;  } }
    @media all and (min-width: 400px) {  .tile  {   font-size:0.6em;  } }

Background Issue

Hey everybody, i am new to css but i dont understand why im having this problem. I saw an older post about this but i didn't see a solution to it. So i just want a background image for my webpage using css. My css background code is as follows:

/* CSS stylesheet */
  /* meant for styling the company name */
  text-align: center;
  font-size: 2em;
  font-family: Georgia, serif;
  /* meant for styling the nav */
  font-size: 1em;
  text-align: center;
  background: url('bg.gif');

My html code is as follows:

Current Link with background image.

I have created a class for my links which applies only to the current page. The font style remains, but the background image only appears when you hover over it. Can anyone see what I have done incorrectly with my text and help me fix this problem?


	font-family:Georgia, "Times New Roman", Times, serif;

Keeping an image proportional when used as a fluid background image

I have the head of a rhino as a background-image but the proportions of the image is lost as soon as the browser is resized. Is there a smart way of avoiding this? You can see what I mean here:

Syndicate content