CODEWITHSUNDEEP
htmlcssbackground-imagefullscreen
Nick D
Nick D

Reputation: 59

HTML/CSS background-image not displaying?

I am just trying to set my background but this image will not work. It is between 15 to 20MB in size so I tried to turn it into 5MB. Still no luck. I made a really small image, 25KB size, and that worked but just repeated. My localhost will not show big images either. Is there some limit? What do I need to do to get a full image page? 

body {
    background-image:url(background.jpg);
}

Upvotes: 1

Views: 6498

Answers (4)

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102408

Do this to avoid repeating the image:

body
{
    background-image:url(background.jpg);
    background-repeat:no-repeat;
}

You can also experiment with background-size: cover like this:

body
{
    background-image: url("http://www.google.com/doodle4google/images/carousel-winner2012.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

Here's a demo at JS Bin with a beautiful Doodle 4 Google as the background image to test the behavior:

http://jsbin.com/ivexah/2

Upvotes: 1

Joe Conlin
Joe Conlin

Reputation: 5994

You shouldn't have any "size" limitation on your background image. More than likely, you're file is so large that you are not waiting long enough for it to load OR you have not set a width and height. Without the dimensions, the element tahat you are trying to load the background image will essentially have a size of 0px x 0px. See the following jsfiddle example:

http://jsfiddle.net/GymxW/1/

The HTML:

<div class="container"></div>

The CSS:

.container {
    width: 400px;
    height: 100px;
    background-image: url(http://dummyimage.com/400x100/4d494d/686a82.gif&amp;text=background+image);
    background-repeat: none;
    background-position: 0 0;
}

IMPORTANT: If you are wanting to have an image that is "stretched" to the full size of the viewport, a simple solution is to use a plugin, such as Backstretch.

Upvotes: 0

Flauwekeul
Flauwekeul

Reputation: 1009

You can use the shorthand background css property:

background: url(background.jpg) no-repeat;

Also your body might not have a height of 100% because there's no content on your page. Either give your html and body a height of 100% or add more content to your page.

To make a background image cover its entire container use background-size:

background-size: cover;

IE8 and lower don't support this. For those browsers you need a javascript fallback. There's an excellent article on css-tricks.com that shows different techniques.

Upvotes: 0

Martin Konstantin Herrmann
Martin Konstantin Herrmann

Reputation: 29

you need to assign a width and height to body. for example:

html, body {
   width: 100%; 
   height: 100%;
}

Upvotes: 0

Related Questions