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!

htmlcss

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing scrapy and python to gather information on attractions from Tripadvisor

Struggling to extract the names and addresses of attractions from TripAdvisor using web scraping. The suspicion is that there might be an issue with how product.css(...) is written (possibly related to jsons?). Seeking guidance on correcting the code in o ...

pythoncssjsonweb-scrapingscrapy

Is it Possible to Alter the Title Attribute in AngularJS with ng-class?

My website currently displays an image that updates based on the user's selection from a dropdown menu. The title of the image is set to "test", but I need it to display a different message depending on which image is being shown. Can this be achieved ...

htmlangularjsng-class

Implementing the insertion of a <div> element within an input field using jQuery

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scr ...

javascriptjqueryhtmlcss

What are some tactics for avoiding movement in the presence of a border setting?

I created a webpage that has the following structure: .topbar-container { width: 100%; position: fixed; top: 0; background-color: #2d3e50; z-index: 999; display: flex; transition: height 500ms; } @media (min-width: 992px) { .topbar-cont ...

javascripthtmlcss

The jsPdf library performs well on medium-sized screens like laptops, but when downloaded from larger monitor screens, the PDF files do not appear properly aligned

In the code snippet below, I am using html2canvas to convert HTML to PDF. The PDF download works fine on medium screens, but when viewed on larger screens, some pages appear blank and the content order gets shuffled. How can I resolve this issue so that th ...

htmljqueryangularjspdfhtml2canvas

Is there a way to remove deleted SASS styles from the generated CSS?

Is it possible to remove markups from a generated css file using sass? For instance, in my scss file I have: body{ background:$dark; } The resulting CSS file looks like this: body{ background: #000; } If I delete that line of code in sass, what will h ...

cssionic-frameworksass

jQuery: Extracting text labels from checkboxes

My custom select dropdown includes checkboxes that are hidden until the user clicks on the dropdown: ---Select---- -option1- -option2- -option3- When a user clicks on the Select, the options appear as checkboxes. I want to be able to retrieve the labels ...

jqueryhtmlcsscheckbox

What is the benefit of utilizing pseudo elements to divide block elements?

I'm seeking clarification on a w3school example that showcases responsive grid design. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: bo ...

htmlcss

Unable to alter the background color of the text box

I am currently struggling with my code where I am trying to overlay a text box on an image. Even after setting the background color to white, it still shows up as transparent. I have successfully done this in the past, but for some reason, it is not work ...

htmlcssbackground-color

How can you position a table above a div in HTML and jQuery without using absolute positioning?

I am trying to create a toggle effect for an information table that needs to be displayed above another DIV. I have managed to achieve this using z-index and position:absolute, but I am wondering if there is a way to do it without using absolute positionin ...

jqueryhtmlcss

Uncovering the class value of an element using CSS

Is there a way for me to use CSS to access the numbers (1 and 2 in this example) at the end of the paragraph's class attribute? <p class="cooking-step-1"><br> <!-- Second step ... --><br> </p> <p class="cooking-s ...

css

Does CSS padding-top: 100% take into account the parent's width?

I'm a bit perplexed by this discovery and I can't quite comprehend the rationale behind it. The provided code snippet showcases two nested DIVs. The outer DIV has specific dimensions and a relative position set, while the inner DIV also has fixe ...

htmlcsspaddingstyling

Create a full-width slider using Materialize CSS framework

When using materializecss to create a slider, I encountered an issue where the image is full width but not full height, causing scrollbars to appear. What changes can I make to ensure the slider fills out my screen without any scrollbars? Additionally, I ...

javascriptjqueryhtmlcssmaterialize

What impact does switching from HTML input to form_for in Rails have on the structure of the code?

Recently, I made some adjustments to the website I've been working on. Initially, it was created using HTML, CSS, and Javascript. There was a section for email subscriptions which originally only had an HTML input field. However, as we started develop ...

htmlcssruby-on-railsruby

Tips for detecting the height of a row with 2 columns in CSS

I am attempting to create two text/image boxes side by side, where one box dictates the height of both on desktop. In this scenario, the leftcol box should expand its background color to match the size of rightcol and center the content. On mobile devices, ...

htmlcssflexbox

Retrieving a compilation of items found within text selected by the user on a website

Imagine a scenario in which a webpage contains the following structure: <p> <span class="1">Here's some text</span> <span class="2">that the user</span> <span class="3">could select.</span> </p> I ...

javascriptcsstextselection

Open the HTML document and access the file contents

I'm having trouble reading a text file from my computer onto a website. It works fine in Internet Explorer, but won't work in Chrome. I don't have much experience with HTML, so any help would be much appreciated! <html> <body> ...

javascripthtmlajaxgoogle-chrome

It seems that using the SVG <mask> tag is necessary for Firefox to display correctly, but it causes issues with CSS mask in

I need assistance with masking content using an external SVG image. Currently, I'm using the following code: #homepage-banner .desktop-slider.masked { -webkit-mask:url(news-panel-mask.svg) left top no-repeat; /* Chrome/Safari (Webkit) */ mask: ur ...

cssfirefoxsvgmask

Steps for creating an expandable menu in the Magento category list

Looking for a way to create a category menu that expands when clicked on? Check out this example of a left menu (not Magento) at Can this be achieved with CSS alone? Or is there a specific module that can help with this functionality? ...

cssmagentowebshop

Tips for looping through a table and opening the tab that meets a specific criterion

I am looking to cycle through a table in order to extract the values of "GST Invoice No." and access the "View Invoice" section for only those invoices whose third digit is a 2. from selenium import webdriver from selenium.webdriver.common.by import By fro ...

pythonhtmlseleniumselenium-webdriver