JQuery CSS two values

Question

I want to give my bg pic, both a height and a weight with! But it will only let me set one value! Does anybody know what to do?

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    $('body').css('background-size', windowHeight, '100%');
  };
  setHeight();

  $(window).resize(function() {
    setHeight();
  });
});

Do it with clean js: document.body.style.cssText = 'width:100%; height:100%'; — divoom12
– divoom12, Commented Oct 9, 2015 at 13:24
i not intended it to be in the body there shot be styled, but a full screen div. — Troels Lund
– Troels Lund, Commented Oct 9, 2015 at 13:26
create a function setWidth that does the same thing but with width, and call it in the resize function? — Jesse
– Jesse, Commented Oct 9, 2015 at 13:29
Well it's the same thing. Select the element somehow (document.querySelector(...) maybe?) and then elem.style.cssText = 'styles here...'; — divoom12
– divoom12, Commented Oct 9, 2015 at 13:29
What is the desired CSS result? I find the question a bit unclear. — Daniel B
– Daniel B, Commented Oct 9, 2015 at 13:33

Kristoffer Jälén · Accepted Answer · 2015-10-09 13:41:36Z

4

Put the width and height together in a string. The first value sets the width and the second value sets the height. And .innerHeight() returns just a value so you need to add px.

 $('body').css('background-size', '100% ' + windowHeight + 'px');

edited Oct 9, 2015 at 13:41

answered Oct 9, 2015 at 13:29

Kristoffer Jälén

4,8664 gold badges35 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kristoffer Jälén Over a year ago

No, he is missing a space between the values.

Mx. · Accepted Answer · 2015-10-09 13:46:08Z

2

I can see that you want to get your background-image to fill the whole body. You can easily achieve this via css properties.

background-size: cover;

or

background-size: contain;

Here's one of many tutorials: https://css-tricks.com/perfect-full-page-background-image/

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

DEMO

answered Oct 9, 2015 at 13:46

Mx.

3,6832 gold badges27 silver badges33 bronze badges

2 Comments

Troels Lund Over a year ago

it is for get set same a resualte like background-size: cover; but it have to work on iphone

Mx. Over a year ago

shouldn't be a problem caniuse.com/#feat=background-img-opts just be sure to add it to the html and not to the body - appending it to the body is known to create strange behaviors

Collectives™ on Stack Overflow

JQuery CSS two values

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related