treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

Image background problems (newb)

  • basmith23
    Permalink to comment #

    Hello Forum!

    I am having the biggest troubles getting my image to fit the background without being stretched on the browser. Please any help concerning this code and how it should be set would be greatly appreciated! I've been trying a million different scripts and tricks and nothing has yielded results for me yet.

    <style type="text/css">
 body {
background: url('http://img407.imageshack.us/img407/6947/landingsite.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
} </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*
  • Paulie_D
    Permalink to comment #

    Background-size:cover is doing what you tell it too...as far as I can tell.

    Could you put something in Codepen?

  • CrocoDillon
    Permalink to comment #

    I don't understand what it is exactly what you're after. But if it's a full width image you can try:

      <img src="http://img407.imageshack.us/img407/6947/landingsite.jpg"/>

    styled like

      img { width: 100%; }

    Don't know how you can have full width background without cropping or stretching.

  • basmith23
    Permalink to comment #

    Sorry for the vagueness. I am just making a "Under Construction/Landing Page" And I'm trying to get my image to be the background and not stretched out. But, it keeps showing up blown up and stretched every time I try setting it as my image for the background. The landing page is fairly simple just need help getting the background image correct. I have attached all the code involved for the landing site! I REALLY appreciate you guys and your help!!!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<title></title>
<style type="text/css">
 body {
background: url('http://img407.imageshack.us/img407/6947/landingsite.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
} </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*
{
font-family: tahoma, arial, sans-serif;
margin: 0px;
padding: 0px;
}
#content
{
width: 500px;
margin: 250px auto 0px auto;
}
#message
{
display: block;
font-size: 18pt;
font-weight: bold;
letter-spacing: -1px;
text-align: center;
}
#message .caption
{
display: block;
font-size: .8em;
}
#code
{
margin-top: 20px;
padding: 20px;
background: #fff9e2;
border: 3px dashed #dad1b0;
text-align: center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#code > span
{
font-weight: bold;
font-size: 1.1em;
letter-spacing: -1px;
}
#code .codebox
{
padding: 3px;
}
#code .submit
{
padding: 5px;
font-weight: bold;
margin-left: 3px;
}
#code .submit:hover
{
cursor: pointer;
}</style>



</head>
<body>




    Please check back soon. Access Code:
    </body>
</html>
  • croydon86
    Permalink to comment #

    @basmith23 you are using a square image 1000px high x 1000px wide. When viewed on a browser window, lets say, 1400px wide, what do you want the image to do? It has to either stretch or enlarge to cover the window. Unless you want the image to repeat? Or do you not want to cover the background fully?

    Try changing the background size to 'contain' - maybe you want this effect?

Add a Comment