Background Image Zoom

Question

I want to add a background image to various sections in my site I am reskinning..

Problem is, the background images are zoomed in.

See below.

Is it better and faster to just create a new css div.. Can someone please advise on the syntax?

// Sections backgrounds

var pageSection = $(".home-section, .page-section, .small-section, .split-section");
pageSection.each(function(indx){

    if ($(this).attr("data-background")){
        $(this).css("background-image", "url(" + $(this).data("background") + ")");
    }
});

Answer 1

css

background-size: cover

or

background-size: 100%

should be your solution.

Answer 2

You can tweak your javascript a bit to class the sections.

var pageSection = $(".home-section, .page-section, .small-section, .split-section");
pageSection.each(function(){
    if ($(this).attr("data-background")){
        $(this).css("background-image", "url(" + $(this).data("background") + ")");
        $(this).addClass('full-background'); //adds the class
    }
});

And then style it properly with CSS

.full-background {
    background-size: cover;
 }

However this is a CSS3 style so be careful of IE8