CODEWITHSUNDEEP
htmlcssbackground
user3521959
user3521959

Reputation:

Full background image

I use background-size:cover so that the background positioning area is completely covered by the background image. But setting it "cover" cuts my background image. Is there any other way to use "cover" without cutting the image ?

the html :

<body>
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
<p>Hi! I am learning how to make
my very own web page! I really like
blueberry muffins and long walks on
the beach.</p>
<input type="email" placeholder="Email">
<input type="submit" href="#">
</body>

the css :

body {
    text-align:center;
    background:url("http://121clicks.com/wp-content/uploads/2012/04/bokeh_photography_03.jpg");
    background-size: cover;
    color:#fff;
    font-family: Helvetica;
}
p {
    font-size: 24px;    
}
input {
  border: 0;
  padding: 12px;
  font-size: 18px;
}
input[type="submit"] {
  background: limegreen;
  color: black;
}

Upvotes: 1

Views: 319

Answers (4)

shin
shin

Reputation: 3659

try adding this

background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

Upvotes: 1

Ethan Brouwer
Ethan Brouwer

Reputation: 1005

You could try this, but it might stretch the image a bit:

<body>
    <img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
    <p>Hi! I am learning how to make

my very own web page! I really like blueberry muffins and long walks on the beach.

With css like this:

body {
    text-align:center;
    background:url("http://121clicks.com/wp-content/uploads/2012/04/bokeh_photography_03.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color:#fff;
    font-family: Helvetica;
}
p {
    font-size: 24px;    
}
input {
    border: 0;
    padding: 12px;
    font-size: 18px;
}
input[type="submit"] {
    background: limegreen;
    color: black;
}

Like I said, it might stretch the image a bit but... :/

Here's a fiddle.

Upvotes: 0

Jatin
Jatin

Reputation: 3089

Try This:

    background:url("http://121clicks.com/wp-content/uploads/2012/04/bokeh_photography_03.jpg") no-repeat center center fixed;

Working Fiddle

Upvotes: 2

icktoofay
icktoofay

Reputation: 129139

There's three values of background-size that might be relevant:

  • cover (you're using this one) — tries to make the image cover the screen, even if it cuts it off
  • contain — tries to make the image as big as possible without cutting it off
  • 100% 100% — stretches the image to fit exactly, distorting its aspect ratio

Upvotes: 1

Related Questions