The text rests on a slanted div with a captivating background image

How can I place text over a skewed div with a background image? Despite using the ::before pseudo element, the text is appearing behind the image. Here's an example of what I'm attempting to achieve:

Html

<div class="diag-right">Text Here</div>

CSS

.diag-right {
    height:220px;
    float:right;
    width:260px;
    position: relative;
    overflow: hidden;
    outline: 1px solid transparent;
    left: -120px;
    transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -webkit-transform: skew(-20deg);
    -ms-transform: skew(-20deg); 
    -sand-transform: skew(-20deg);
}

.diag-right::before {
    content: "";
    position: absolute;
    width: 370px;
    height: 100%;
    top: 0;
    left: -40px;
    background: url("http://imgur.com/T25mFEV.jpg") 0 0 repeat;
    transform: skew(20deg); 
    -o-transform: skew(20deg); 
    -moz-transform: skew(20deg); 
    -webkit-transform: skew(20deg);
    -ms-transform: skew(20deg); 
    -sand-transform: skew(20deg);
}

Live Example

http://jsfiddle.net/jGJe3/

Any suggestions on how to accomplish this or find a suitable workaround?

htmlcss

Answer №1

If you want to position the pseudo-element ::before behind the element with the class .diag-right, you can achieve this by using the following CSS code:

.diag-right::before {
  z-index: -1;
}

It's important to keep in mind that this method may not work properly if the element with the class .diag-right already has its own background, as it will cover up the ::before pseudo-element.

Answer №2

There's no real necessity for the ::before element in this case.

Take a look at this Live Demo

CSS Styles

.slant-right {
        color: white;
        height: 220px;
        float: right;
        width: 260px;
        position: relative;
        overflow: hidden;
        outline: 1px solid transparent;
        left: -120px;
        transform: skew(-20deg); 
        -o-transform: skew(-20deg); 
        -moz-transform: skew(-20deg); 
        -webkit-transform: skew(-20deg);
        -ms-transform: skew(-20deg); 
        -sand-transform: skew(-20deg);
        background: url("http://example.com/image.jpg") 0 0 repeat;
    }

Answer №3

Code Snippet - HTML :

<div class="slant-container">
    <div class="slanted-right">Your Text Goes Here
        <div class="content-box">
            This could be useful for you.
        </div>
    </div>
</div>

Code Snippet - CSS :

.slanted-right {
        height:220px;
    float:right;
    width:260px;
    position: relative;
    overflow: hidden;
    outline: 1px solid transparent;
    left:-120px;
        transform: skew(-20deg); 
        -o-transform: skew(-20deg); 
        -moz-transform: skew(-20deg); 
        -webkit-transform: skew(-20deg);
        -ms-transform: skew(-20deg); 
        -sand-transform: skew(-20deg);
}

.slanted-right::before {
        position:absolute;
        width:370px;
        height:100%;
        top:0;
        left:-40px;
        background:url("http://imgur.com/T25mFEV.jpg") 0 0 repeat;
        transform:skew(20deg); 
        -o-transform:skew(20deg); 
        -moz-transform:skew(20deg); 
        -webkit-transform:skew(20deg);
        -ms-transform:skew(20deg); 
        -sand-transform:skew(20deg);
}
.content-box {
        opacity:0.6;
    height:100px;
    width:150px;
    color:#fff;
}

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

Issues with the local or browser display of @font-face

I'm really struggling to get my @font-face to display correctly, whether I view it locally or in the browser preview. This is the CSS code I am using: @font-face { font-family: chopin-script.regular; src: local('chopin-script.regular'), ...

htmlcssfontsfont-face

Importing pixi-sound in the right way for PIXI JS

I have a question regarding the proper way to import pixi-sound into my project. I am facing an issue with the following code snippet: import * as PIXI from "pixi.js"; import PIXI_SOUND from "pixi-sound"; const EFFECT_SOUNDS = [...list of music] for (le ...

javascripthtmlimportpixi.js

The element div is not permitted as a child of the element h5 in this particular scenario

My code snippet is as follows: $compile .= "<h5 data-count='".$acctemmpi. "' class='shortcode_accordion_item_title expanded_". $expanded_state . "'>" . $title . "<div class='ico'&g ...

javascripthtmlcss

Perform a jQuery computation using a CSS style

Having trouble with a calculation using a CSS property that is not returning any value. Seems like the issue might be due to the CSS property returning '200px' instead of just '200'. Any suggestions for a workaround? Thanks in advance. ...

jquerycss

Chrome is not storing the CSS file in its cache memory. However, it is successfully caching .js and .png

I have noticed that the CSS file is not being cached in the Chrome browser. My application is created using Angular-CLI and all the necessary cache-control headers are set, with an Expires header of 5 minutes: Accept-Ranges:bytes Cache-Control:max-age=600 ...

cssgoogle-chromehttp-caching

Tips for populating an array with boolean values when a checkbox change event occurs:

I am looking to fill the answers array with boolean values. The checkboxes on my form are generated dynamically, but there will only be four of them. When a checkbox is unchecked, its corresponding value in the answers array should be false; when checked, ...

javascripthtmlarraysreactjscheckbox

Bootstrap 4's mobile flexbox expends beyond the desired width

I'm facing an issue with my code snippet: <div class="row"> <div class="w-100 col-auto col-lg-5 w-auto p-3 p-lg-5 m-4 rounded-sm bg-dark text-white shadow-lg"> <h3>This is a very very very long Text</h3> </ ...

htmlcsstwitter-bootstrapbootstrap-4

Sending ZipOutputStream back to browser

Looking for a way to return a ZipOutputStream to the browser? I want the user to click on a link and have a file download prompt appear for the ZipOutputStream I have. How can I achieve this desired experience? ...

javahtmlhttpzip

Can you help me with sorting asynchronous line points for KineticJS?

For the past couple of days, I've been grappling with a peculiar issue that I found difficult to articulate in the title. The challenge I'm facing involves a KineticJs Line, which contains an array of points (line.attrs.points) represented as ob ...

javascriptjqueryhtmlcanvaskineticjs

Displaying an element when hovering over another using CSS

Currently, I am experimenting with a small CSS action that involves displaying another element when an A element is hovered over. The code I have so far is quite simple: <a title="#" class="portfolio-reaction" href="#"> <img src="http://i.imgur.c ...

htmlcsshover

Tips for recognizing the div element housing the selected text chosen by the user

I am currently working on a feature that enables placing a button next to the text selected by the user. Here's what I want to achieve: However, I would like this functionality to apply only when the selected text is inside divs with the class floatb ...

jqueryhtmlselection

Chrome does not support CSS animation rotation over 360 degrees

After researching for hours, I've encountered an issue with my animation in Chrome. It seems that while transform: rotate(1080deg); works flawlessly in Firefox, it fails to rotate in Chrome. Surprisingly, I discovered that it only rotates in Chrome wh ...

csscss-animations

Is it possible to modify the CSS styling of the file_field?

I am looking to customize the appearance of the file_field in CSS. Rather than displaying the default browse button, I would like to use a simpler upload button for file submission. What steps can I take to modify the CSS of the file_field and replace it ...

javascripthtmlruby-on-railscss

Utilizing HTML templates efficiently without the need for a view engine

For a new application, we are implementing multiple servers for handling different functions - one server for delivering HTML files, another as a proxy to handle HTTPS requests, and a Java backend with a database. The view server should be simple, with an ...

javascriptjqueryhtmltiles

Angular formly - Enhancing User Input Focus

I have created a field wrapper that converts normal text into an input when hovered over with the mouse. Additionally, I have a directive that sets focus on the field when it is activated. Now, I am looking for a solution where the field remains open as l ...

javascripthtmlangularjsangular-formly

Grouping of check-boxes in sets of 3

I need to customize the display of my checkboxes by grouping them side by side. Instead of showing them in a list format, I want them to be displayed in groups. For example, when there are 7 checkboxes, I would like them to be split into two columns with ...

html

"Ensuring Proper Alignment of Labels and Inputs in Bootstrap for Varying Column

I'm encountering alignment issues with a large form that I'm working on. I have two columns at the beginning of the form where some rows occupy half of the width while others take up the full width. However, the problem arises with the alignment ...

csstwitter-bootstraptwitter-bootstrap-4

Issues with jQuery UI Sortable and Bootstrap 3 fluid grid causing flickering and disruptions

I have a basic grid layout consisting of 3 columns in each row, all based on Bootstrap 3. To make it fluid, I decided to omit the 'container' class. My goal is to enable sorting functionality using jQuery UI sortable for the columns within each r ...

jqueryhtmlcssjquery-uitwitter-bootstrap-3

The issue of ngModel not binding to the value of ion-select in Angular Ionic

Having an ion select outside of a form with an ngModel attribute bound to "selectedValue", I encounter an issue where my selections are not being properly populated in the selectedValue variable even though they appear in the ionChange method. The main pur ...

htmlangulartypescriptionic-framework

Using .float-right and .float-left within a .row in bootstrap 4 does not achieve the desired result

When using Bootstrap 4, the float property may not work as expected inside a row. I am trying to have the right div appear on the left and the left div appear on the right, but in responsive view I want the right div to be displayed before the left div. ...

htmlbootstrap-4css-float