CODEWITHSUNDEEP
htmlcssimage
Revital K.
Revital K.

Reputation: 21

How can I make my background image be fully seen on a page

I'm trying to put a background image in the center of the page, but the image goes out of the page and seen only partially.

This is my css code:

body{background-image:url(../img/music_palace_logo2.png);
background-repeat:no-repeat;
background-position:center;
background-size:50%;

I tried to change background-size:

background-size:contain;

but it's makes the image too small.

How can I fix this?

Upvotes: 2

Views: 100

Answers (7)

Udaiveer Singh
Udaiveer Singh

Reputation: 3

Slightly different from foreyez solution

JS-Bin

code 

body {
  background: url('https://i.imgur.com/3eRS4Nh.png');
  background-repeat:no-repeat;
  background-attachment: fixed;
  background-position: center;    
  background-size:50%;
}

Upvotes: 0

diya
diya

Reputation: 101

you can try this.this works for me! body{ background-image:url('image.png'); background-repeat:no-repeat; background-attachment:fixed; background-position:center;}

Upvotes: 0

WP Learner
WP Learner

Reputation: 830

Just use

background-size: cover;

CSS rule.

Upvotes: 2

Plam
Plam

Reputation: 379

If neither of the other suggestions work. You need to open the picture in Photoshop and expand it manually and then place it on your website. Regular images can be sized in html but when it comes to background images you have to be very accurate with the resolution you need. The good thing is you already called it, so all you have to do is change it and make sure it is saved in the same place with the same name and it should appear when you reload your web page.

Upvotes: 0

David Pellegrini
David Pellegrini

Reputation: 131

background-size: 50%; will set the size to 50% of the original

background-size: contain; will set the size to fit the entire image on the screen, leaving space along the side or bottom

background-size: cover; will fill the screen but could clip the bottom or side of the image

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Upvotes: 0

dexhering
dexhering

Reputation: 422

You could use cover

background-size: cover;

Upvotes: 0

Shai UI
Shai UI

Reputation: 51976

https://jsfiddle.net/foreyez/sobtwzgv/

html{
    background: url('http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg') no-repeat 0 0 scroll;
    background-color:white;
    background-size: 50%;
    background-position:center;
    height:100%;
    width:100%;
}

Upvotes: 1

Related Questions