CODEWITHSUNDEEP
csshtmlimagelayoutfluid
ZoidBob
ZoidBob

Reputation: 13

Can not get fluid background-image in css body to work

I am trying to use a background image on my so far fully fluid web design, and have found many solutions here, but now I am stumped! Something in my CSS is preventing my background image to display. I am using Matthew James Taylor's multi-column liquid layouts, and whenever I try to add some new functionality everything goes haywire. I am a newbie to web design and would appreciate your help greatly. Heres my HTML5 (hopefully valid):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>Blablablah</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Blablablah" />
<meta name="keywords" content="Blablablah" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="Blablafoo.css" media="screen" />
</head>

<body onload="parent.resizeIframe(document.body.scrollHeight)">

  <div class="colmask fullpage">
<div class="col1">
<h2>BLAAAAAAAAA BLAAAAAAAAA BLAAAAAAAAA</h2>
    </div>
  </div>

</body>
</html>

And here is my CSS:

body {
    background-image:url(‘background.JPG’) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin:0;
    padding:0;
    border:0;
    width:100%;
    min-width:386px;
    min-height:100%;
    height:1px;
    font-size:90%;
}
a {
    color:#369;
}
a:hover {
    color:#fff;
    background:#369;
    text-decoration:none;
}
h1, h2, h3 {
    margin:.8em 0 .2em 0;
    padding:0;
}
p {
    margin:.4em 0 .8em 0;
    padding:0;
}
.colmask {
    position:relative;
    clear:both;
    float:left;
    width:100%;
    overflow:hidden;
}
.col1 {
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
}
.fullpage {
    min-height:592px;
}
.fullpage .col1 {
    width:96%;
    left:2%;
}
img {
    max-width:100%;
}

All files are in the same folder on my PC so its not a path thing. I have tried to put the top five lines in other parts of the CSS to no avail.

Upvotes: 0

Views: 1856

Answers (2)

newTag
newTag

Reputation: 2169

Try setting using html element.

   html { 
      background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSvctt0I--skoKQVfuVt-i4Et6vQ5ve7lXPkLy9sTElCWLKh1Ps) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

See demo here

Updated:

Another method would be using jQuery, (will work perfectly in IE7+) 

$(function () {

    var theWindow = $(window),
        $bg = $("#bg"),
        aspectRatio = $bg.width() / $bg.height();

    function resizeBg() {

        if ((theWindow.width() / theWindow.height()) < aspectRatio) {
            $bg.removeClass()
                .addClass('bgheight');
        } else {
            $bg.removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(function () {
        resizeBg();
    }).trigger("resize");

});

Then use img to set the background image like this:

<img src="http://3rdbillion.net/wp-content/uploads/2013/11/1b7a9c8a2df4bd4a25597f1ca0cb89f52.jpg" id="bg" alt="" />

You can see the demo here

Upvotes: 1

Callidior
Callidior

Reputation: 2904

It's perfectly okay to set the background on the body element, but you have used the background-image definition for a list of options, that are not valid for background-image. What you have specified, is a valid value for the background shortcut option, so both of the following variants will work:

1:

body {
    background: url('background.JPG') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin:0;
    padding:0;
    border:0;
    width:100%;
    min-width:386px;
    min-height:100%;
    height:1px;
    font-size:90%;
}

2:

body {
    background-image: url('background.JPG');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin:0;
    padding:0;
    border:0;
    width:100%;
    min-width:386px;
    min-height:100%;
    height:1px;
    font-size:90%;
}

In addition, the quotes around your path name seem to be some kind of styled quotes, which will not work in CSS. Use simple quotes like ' or ".

Upvotes: 0

Related Questions