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.

background-image

Hi Guys,

What I am trying to achieve:
http://dobble.net.au/help/template.jpg

Here is my code

<style>
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 */
.pg_format{
  /* meant for styling the company name */
  text-align: center;
  font-size: 2em;
  font-family: Georgia, serif;
}
 
nav.center{
  /* meant for styling the nav */
  font-size: 1em;
  text-align: center;
}
 
body.img{
  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?

CSS:

a{
	font-family:Arial,Helvetica,sans-serif;
	color:#034EA2;
	font-size:14px;
}
a:hover{
	font-weight:bold;
	color:#034EA2;
}
a.active{
	color:#034ea2;
	font-weight:bold;
	font-family:Georgia, "Times New Roman", Times, serif;
	}
body{
	margin:auto;
	height:900px;
	width:1024px;

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:

http://test.bagge-web.dk/

Syndicate content