Custome Code

Bootstrap Studio Help
1

Hi, when i add some custome code, i get left and right some edge. enter image description here

2

Are you asking for assistance with something or just stating a fact?

Please provide more context ?

3

Hi i need some help! That´s my code.

HTML

<div class="fullscreen background_p parallax" style="background-image:url('office2.jpg');" data-img-width="1600" data-img-height="1064" data-diff="100"> <div class="content-a"> <div class="content-b"> Centered content
</div> </div> </div>

CSS .background_p { background-repeat:no-repeat; background-position:50% 50%; background-size:50% 50%\9 !important; /background-position:fix;/ }

.fullscreen, .content-a { width:100%; height:100%; overflow:hidden; }

.fullscreen.overflow, .fullscreen.overflow .content-a { height:auto; min-height:100%; }

.content-a { display:table; }

.content-b { display:table-cell; position:relative; vertical-align:middle; text-align:center; }

.not-fullscreen { height:50%; }

JAVA /* detect touch / if("ontouchstart" in window){ document.documentElement.className = document.documentElement.className + " touch"; } if(!$("html").hasClass("touch")){ / background fix */ $(".parallax").css("background-attachment", "fixed"); }

/* fix vertical when not overflow call fullscreenFix() if .fullscreen content changes */ function fullscreenFix(){ var h = $('body').height(); // set .fullscreen height $(".content-b").each(function(i){ if($(this).innerHeight() > h){ $(this).closest(".fullscreen").addClass("overflow"); } }); } $(window).resize(fullscreenFix); fullscreenFix();

/* resize background images */ function backgroundResize(){ var windowH = $(window).height(); $(".background").each(function(i){ var path = $(this); // variables var contW = path.width(); var contH = path.height(); var imgW = path.attr("data-img-width"); var imgH = path.attr("data-img-height"); var ratio = imgW / imgH; // overflowing difference var diff = parseFloat(path.attr("data-diff")); diff = diff ? diff : 0; // remaining height to have fullscreen image only on parallax var remainingH = 0; if(path.hasClass("parallax") && !$("html").hasClass("touch")){ var maxH = contH > windowH ? contH : windowH; remainingH = windowH - contH; } // set img values depending on cont imgH = contH + remainingH + diff; imgW = imgH * ratio; // fix when too large if(contW > imgW){ imgW = contW; imgH = imgW / ratio; } // path.data("resized-imgW", imgW); path.data("resized-imgH", imgH); path.css("background-size", imgW + "px " + imgH + "px"); }); } $(window).resize(backgroundResize); $(window).focus(backgroundResize); backgroundResize();

/* set parallax background-position */ function parallaxPosition(e){ var heightWindow = $(window).height(); var topWindow = $(window).scrollTop(); var bottomWindow = topWindow + heightWindow; var currentWindow = (topWindow + bottomWindow) / 2; $(".parallax").each(function(i){ var path = $(this); var height = path.height(); var top = path.offset().top; var bottom = top + height; // only when in range if(bottomWindow > top && topWindow < bottom){ var imgW = path.data("resized-imgW"); var imgH = path.data("resized-imgH"); // min when image touch top of window var min = 0; // max when image touch bottom of window var max = - imgH + heightWindow; // overflow changes parallax var overflowH = height < heightWindow ? imgH - height : imgH - heightWindow; // fix height on overflow top = top - overflowH; bottom = bottom + overflowH; // value with linear interpolation var value = min + (max - min) * (currentWindow - top) / (bottom - top); // set background-position var orizontalPosition = path.attr("data-oriz-pos"); orizontalPosition = orizontalPosition ? orizontalPosition : "50%"; $(this).css("background-position", orizontalPosition + " " + value + "px"); } }); } if(!$("html").hasClass("touch")){ $(window).resize(parallaxPosition); //$(window).focus(parallaxPosition); $(window).scroll(parallaxPosition); parallaxPosition(); }

4

Help with what exactly? Again just copying and pasting code without clear understanding of what issue is wont get you very far as we are not mind readers

However, reading between the lines i can only assume the issue you have is that you don't want that margin, if so create a new class in a custom css and overwrite the margins.

5

I'd have to guess that the section you have the BG image is inside a .container DIV. This has gutters on both side, even with a .container-fluid DIV.

Does your code look more like

<*body>
    <div class="container">
        <div class="fullscreen background_p parallax" style="background-image:url('office2.jpg');" data-img-width="1600" data-img-height="1064" data-diff="100">
            <div class="content-a">
                <div class="content-b">
                    Centered content
                </div>
            </div>
        </div>
    </div>
<*/body>

Or like

<*body>
    <div class="fullscreen background_p parallax" style="background-image:url('office2.jpg');" data-img-width="1600" data-img-height="1064" data-diff="100">
        <div class="content-a">
            <div class="content-b">
                Centered content
            </div>
        </div>
    </div>
<*/body>

The first example contains a .container DIV that your content is in so it has gutters by default. To get around that, move the container DIV inside your BG DIV.

For example.

<*body>
    <div class="fullscreen background_p parallax" style="background-image:url('office2.jpg');" data-img-width="1600" data-img-height="1064" data-diff="100">
        <div class="container">
            <div class="content-a">
                <div class="content-b">
                    Centered content
                </div>
            </div>
        </div>
    </div>
<*/body>

If your code looks more like example 2 in that you don't have a .container DIV surrounding it then we probably need a little more info.

Saj