Using CSS, the background image can be displayed diagonally for a unique and

Currently, I am working on my portfolio and facing a challenge. I have an image in the body that I really want to display diagonally, but without using Photoshop. I've attempted to achieve this effect by utilizing CSS3 properties like transform rotate.

However, I haven't been successful in getting the desired result yet.

If you'd like to take a look at what I've tried so far, here is the fiddle: Link

Below is the CSS code snippet that I've used:

.fullimg{
    background:url('http://i.imgur.com/swudrIP.png') no-repeat fixed center;
    -webkit-transform: rotate(15deg);
    width: 100%;
    height: 100%;
    position:absolute;
}

My goal is to achieve a visual output similar to the following example CSS class:

.diagonal{
    background:url('http://i.imgur.com/ugmhC7w.png?1') no-repeat fixed center;
    width: 100%;
    height: 100%;
    position:absolute;
}

Thank you for your assistance,

Mahadevan

jqueryhtmlcss

Answer №1

To add this effect to the body, you will need to utilize a psuedo-element instead of a child element like a div.

.fullimg:before {
    content:"";
    position: absolute;
    -webkit-transform: rotate(15deg);
    width: 100%;
    height: 100%;
    background-image:url(http://i.imgur.com/swudrIP.png);
}

Check out the jsFiddle link for a demo

Answer №2

It appears that you're attempting to rotate the entire 'body' element in the fiddle. Unfortunately, that's not a feasible option.
A better alternative might be placing a background within a div that covers the entirety of the body and then rotating that div instead.
Also, keep in mind to include -ms-transform and transform properties for optimal cross-browser compatibility.

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

Include draggable functionality to a seating chart that is generated dynamically

I developed a function that generates table seats dynamically with equal spacing. The issue arises when I try to drag names from a list and drop them onto the seats as children. Unfortunately, I can't seem to achieve this functionality with the dynami ...

javascriptjqueryhtmlcssjquery-ui

Tips for including text and a button within the footer of a Bootstrap modal

I'm facing an issue with my Bootstrap modal footer where the output shows two divs side by side, which is not the desired result. Below is the code snippet in question: <div class="modal fade" id="itiModal" role="dialog&quo ...

htmlbootstrap-4bootstrap-modal

"Tailwind - where your brand shines with a sleek, modern logo that stands

I have a specific title width that I need to adhere to, and I'm looking to place a logo after the last word in the title. When the title is too lengthy, it wraps onto a second line. For example: My Title (insert logo here) Check out this CodePen us ...

csstailwind-css

Tips for utilizing JavaScript to encapsulate a specific section of text within a node

I am currently facing a complex challenge that requires solving. I am developing a script that accepts a regex pattern as input. This script's purpose is to locate all matches for the provided regex within a document and wrap each match in its own < ...

javascripthtmlregexalgorithm

Guide to effectively utilizing jQuery Deferred within a loop

I have been working on a function that needs to loop through a dataset, updating values as it goes along using data from an asynchronous function. It is crucial for me to know when this function finishes running the loop and completes all updates. Here is ...

javascriptjqueryajaxjquery-deferreddeferred

Check for an Ajax request when there is no cached data present

As a newcomer to JavaScript/jQuery, I have encountered what seems like a fairly solvable issue. The task at hand is to cache a variable (list) in a session, and if the list has not been cached previously, an ajax request should be triggered. However, my p ...

javascriptjqueryajaxcaching

show SQL variables in a text box using PHP

So I've been working on a project that involves displaying the forename of a customer from my database in a text box. The idea is to allow users to edit customer information stored in an SQL database. However, I'm facing issues as the text box ap ...

phphtmlsql

unusual problem encountered with jQuery in Chrome

Struggling with adjusting the width dynamically based on a different element, I decided to experiment by creating a small piece of JavaScript to solve the issue. However, an unexpected problem arose that grabbed my attention. var adjustTo = $(this).attr(& ...

javascriptjquerygoogle-chrome

Tips for resetting the mapbox geocoder

Using the Mapbox Geocoder along with multiple select menus to customize a map has been my latest project. I am currently working on resetting the geocoder once a user selects an option from the menu, clearing the input field and removing the marker in the ...

javascriptjquerymapbox-gl-js

Adjust the list separator based on screen size fluctuations using media queries

I'm trying to figure out how to manage separators (such as a "-") between each element of a list. It's easy when it's just one line, but I'm having trouble with multiple lines. On a large screen, my site looks like this: Example cente ...

htmlcssbootstrap-4css-selectorsmedia-queries

Gathering information from an HTML form and displaying it through JavaScript by utilizing Bootstrap's card component

I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help ...

javascripthtmlcssformsobject

Manage form submission seamlessly without redirecting. Capture information without needing to prevent the default action, then proceed with redirection. Avoid redirecting when using preventDefault, but be aware that data may not

Currently stuck in a tricky situation. I've implemented a custom form submission to prevent redirecting when an express route is triggered by form submission. However, the issue arises when I lose the data being sent without redirection. document.get ...

javascripthtmlexpressxmlhttprequest

What is the best way to transfer information between two separate Javascript controller files?

My current situation is a bit complex, but I believe there must be a straightforward solution. I have two Javascript controller files: one named rootPageClient.js and another called findPollClient.js. Additionally, there's a file called ajax-function ...

javascriptjqueryajaxnode.jsmodel-view-controller

Using jQuery to retrieve the HTML code for links

I am looking for a way to extract HTML links from a specific div without relying on regular expressions. Here is an example scenario: <div>Please review the links provided in the content. For instance, <a href="http://en.wikipedia.org/wiki/Apple ...

javascriptjqueryhyperlink

A collection of jQuery objects that consist of various DOM elements as their properties

Seeking a more concise and potentially more streamlined approach using jQuery. I have an object called lbl which represents a div. Inside this div, there is a span tag that contains the properties firstName and lastName of the lbl object. Here's how t ...

javascriptjquerycssdom

Shifting annotations on a Bar Graph featuring Negative Values on Google's Chart Maker

Incorporating google charts into my MVC project. Looking to create a bar chart that accommodates negative values. Desire annotations on the same side as the end of the bar for negative values (similar to positive values shown in the green box below). ht ...

javascriptc#htmlasp.net-mvcgoogle-visualization

The styling of the first column in this row will be different from the rest

Despite having the same styling and no typing errors, I am still facing an issue with the first column not being styled correctly. It appears as nothing but text inside a column square. HTML: <div class="container-fluid"> <!--Nav Bar--> ...

htmlcsstwitter-bootstrapbootstrap-4

Stop unauthorized pages from hijacking login cookies

I have a website called where users can create their own HTML pages accessible through the link if the username is "USR" and project is "PROJECT". However, there is a security concern... Currently, I store users' login tokens as cookies. But what ...

javascripthtmlcookies

Is there a way in jquery or any other method that specifically detects changes only in direct child nodes?

I came across a jQuery method called DOMSubtreeModified that can detect the insertion of child nodes within a specific DOM. However, I noticed that this method detects the insertion of all child nodes, not just the immediate ones. Is there a jQuery met ...

javascriptjqueryhtmldombrowser

Implementing a jQuery Popup to Show Error Messages

Is there a way to display error messages in a popup and hide all form fields when a success message appears? Currently, I am placing the success message above the form and closing it after the form is submitted. The error message div is placed inside the s ...

jquery