Customize the X and Y position of the CSS background with specific degrees

Question

Customize the X and Y position of the CSS background with specific degrees

Looking for help customizing the background position in a PSD image to adjust the slope at the top, right-left side, and bottom. Here is my PSD: https://i.stack.imgur.com/Jr4h7.png

Below is some of my CSS code:

html{
background:#aea99f;
}
body{
background-image: url("http://i.imgur.com/H3fh4Ht.png");
background-repeat: repeat;
background-position: 48% 20%;
margin: 0 auto;
width: 94%;
}

Any suggestions on how to achieve the desired customization?

Here is a JS example for reference: http://jsfiddle.net/zmkkdj46/

Thank you!

html css

Answer 1

Answer №1

Take a look at this Example: fiddle

HTML:

<div>
 123
</div>

CSS:

div{
 width: 94%;
 height:100%;
 background: #fff;
 -webkit-clip-path: polygon(9% 100%, 94% 100%, 100% 0, 0 0);
 clip-path: polygon(9% 100%, 94% 100%, 100% 0, 0 0);
}

html, body {width:100%; height: 100%; background:#aea99f;}
body{display:flex; justify-content:center; align-items:center; padding:0px; margin:0px;}

Answer 2

Take a look at this Example: fiddle

HTML:

<div>
 123
</div>

CSS:

div{
 width: 94%;
 height:100%;
 background: #fff;
 -webkit-clip-path: polygon(9% 100%, 94% 100%, 100% 0, 0 0);
 clip-path: polygon(9% 100%, 94% 100%, 100% 0, 0 0);
}

html, body {width:100%; height: 100%; background:#aea99f;}
body{display:flex; justify-content:center; align-items:center; padding:0px; margin:0px;}

Answer 3

Answer №2

Expanding on Jagdish's response, to ensure compatibility with Firefox, you will need to include the following code:

HTML

    <div id="div1">
  123 rtrrrrr rt

</div>
<svg id="svg1">
    <defs>
        <clippath id="my-definition" clipPathUnits="objectBoundingBox">
            <polygon points=".09 1, 0.94 1, 1 0, 0 0"></polygon>
        </clippath>
    </defs>
</svg>

CSS

div{
    width: 94%;
    height:100%;
    background: #fff;
    -webkit-clip-path: polygon(9% 100%, 94% 100%, 100% 0, 0 0);
clip-path: url(#my-definition)
}
svg{
  width: 1%;
    height:100%;
}
html, body {width:100%; height: 100%; background:#aea99f;}
body{display:flex; justify-content:center; align-items:center; padding:0px; margin:0px;}

Updated Fiddle Link :

By including the

clipPathUnits="objectBoundingBox"

attribute, your code should work properly in Firefox.

Answer 4

Expanding on Jagdish's response, to ensure compatibility with Firefox, you will need to include the following code:

HTML

    <div id="div1">
  123 rtrrrrr rt

</div>
<svg id="svg1">
    <defs>
        <clippath id="my-definition" clipPathUnits="objectBoundingBox">
            <polygon points=".09 1, 0.94 1, 1 0, 0 0"></polygon>
        </clippath>
    </defs>
</svg>

CSS

div{
    width: 94%;
    height:100%;
    background: #fff;
    -webkit-clip-path: polygon(9% 100%, 94% 100%, 100% 0, 0 0);
clip-path: url(#my-definition)
}
svg{
  width: 1%;
    height:100%;
}
html, body {width:100%; height: 100%; background:#aea99f;}
body{display:flex; justify-content:center; align-items:center; padding:0px; margin:0px;}

Updated Fiddle Link :

By including the

clipPathUnits="objectBoundingBox"

attribute, your code should work properly in Firefox.

Customize the X and Y position of the CSS background with specific degrees

Answer №1

Answer №2

Similar questions

Maximizing Bootstrap card size in Angular4: A step-by-step guide

Converting a 'div' element into a dropdown menu with CSS and Jquery

The issue of column sizing in bootstrap 4 needs to be resolved

Ensuring the accuracy of checkboxes in a loop through verification

Experience the advanced NgPrime p-dropdown template with templating, filtering, and a clear icon that collapses when wrapped within a form element

Directing a webpage to a particular moment within that page

I'm overwhelmed by the concept of linear gradients

Folding without extending

Is it permissible to have <ul> tags within an H1 element?

Minimizing the menu bar while scrolling down (bootstrap3)

Is it possible to conceal any spans that are in close proximity to the cursor when hovered over?

Text overlaps when li element is nested inside another element

html input type called array named AmountMap[1] is unable to be configured with <input type="textbox" size="15" name="amountMap[1]" value="0" >

Make sure the page preloader is visible before any other content is loaded

Javascript continues to conceal my web background without my permission

The Facebook like button disappears after being used just once

External CSS file unable to load background image as referenced

Encountering additional backslashes ("") in each slash within the JSON response received from Laravel AJAX

React Fixed Footer Implementation against My Preferences

Ways to verify if the CSS background-color is set to white?