How about "Is it possible to have a repeating background with a fixed background attachment and

How can I achieve a seamless pattern repeat with specific conditions?

I would like to have one rotated background with fixed attachment. Is there a way to make this work effectively?

body {
  padding: 50px;
  margin: 0;
  height: 10000px;
}

.main {
  width: 100%;
  height: 1300px;
  box-sizing: border-box;
  overflow: hidden;
  border: 5px solid #7cb7b7;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background {
  background-image: url('https://thumbs.dreamstime.com/b/circles-seamless-pattern-10032830.jpg');
  background-attachment: fixed;
  background-repeat: repeat;
  position: absolute;
  top: -1000%;
  left: -1000%;
  right: -1000%;
  bottom: -1000%;
  transform: rotate(-15deg);
}

.text {
  background: white;
  border: 2px solid black;
  width: 200px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
<div class="main">
  <div class="background"></div>
  <div class="text">
   <p>Flex</p>
  </div>
</div>

htmlcsssassbackground-attachment

Answer №1

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body {
  padding: 50px;
  margin: 0;
  height: 1000px;
}

.main {
  width: 100%;
  height: 1000px;
  box-sizing: border-box;
  overflow: hidden;
  border: 5px solid #7cb7b7;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  background-image: url('images/attractions01.jpg');
  background-attachment: fixed;
  background-repeat: repeat;
  position: absolute;
  top: -1000%;
  left: -1000%;
  right: -1000%;
  bottom: -1000%;

}

.text {
  background: white;
  border: 2px solid black;
  width: 200px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
    </style>
</head>
<body>
<div class="main">
  <div class="image"></div>
  <div class="text">
   <p>Flex</p>
  </div>
</div>
</body>
</html>

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

When new text is added to Div, the first line is not displayed

One of the divs on my page has an ID of "TrancriptBox" and contains multiple lines of text. When I scroll through it on my iPad, everything works fine. However, if I scroll and then change the text within that div, it doesn't display the first line o ...

javascriptjqueryhtmltext

Modifying properties through JavaScript is not possible

I created an HTML form and I'm trying to change the attributes of a div and a button but for some reason, it's not working <form> <button type='button' id='other'>Sub</button> <select id="prop"> &l ...

javascripthtml

Streamlining Tailwind CSS styles in your React/Next.js components for maximum efficiency

Since implementing Tailwind CSS in my React/Next.js project, I've noticed a decrease in maintainability compared to using traditional CSS or styled-components. Previously, I could easily consolidate style changes, but now I find myself duplicating cla ...

cssreactjsnext.jstailwind-css

Position a DIV element without specifying the width dimension

Possible Duplicate: How can I center something if I don't know ahead of time what the width is? I am seeking guidance on aligning a div element without prior knowledge of its width. My approach differs from previous inquiries as I am open to usin ...

htmlcsscenter

Having issues with the Bootstrap tabs code provided in the documentation not functioning correctly

Exploring the world of Bootstrap 5 tabs led me to copy and paste code from the official documentation (https://getbootstrap.com/docs/4.1/components/navs/#javascript-behavior), but unfortunately, it's not functioning as expected: clicking on a tab does ...

htmlcssbootstrap-5

Ways to prevent decreasing the value below zero in ReactJS?

I have created two buttons, one for increasing and another for decreasing a counter value. However, when I click on the minus button, it should not display negative values. But in my case, when I click on the minus button (initially at zero), it shows -1, ...

javascripthtmlreactjs

The cover page height is adjusted to 100%, landing it right in the middle

I've been attempting to incorporate a bootstrap cover page template, but I'm having trouble setting it up. Despite copying the code directly from Bootstrap's website, the cover page only takes up half of the height. The styles clearly specif ...

htmlcssangularbootstrap-4

When adjusting the max-height and overflow-y in a Boostrap 4 Navbar with a search input/icon placement set to absolute position, the functionality seems to break

While attempting to create a search input with an embedded search icon that works within the Bootstrap 4 navbar when the mobile menu is displayed, I encountered some challenges. The process was much simpler in my previous version using Bootstrap 3... http ...

csstwitter-bootstrapbootstrap-4css-positionnavbar

A guide on showcasing Python Flask database entries in an HTML table using Jinja 2

I have a database with a table that I need to display in my web application using a specific route. My goal is to present the data from the DB in a clear and easy-to-read table format, similar to an Excel spreadsheet, through the app. Although what I hav ...

pythonhtmlflask

Issues persist with padding in TCPDF

I am currently using TCPDF to convert HTML into PDF format. Unfortunately, I have encountered an issue where I am unable to add padding to my table. The text within the table collapses with the borders, and I have found that TCPDF does not support certain ...

phphtmlcsstcpdf

The image zoom function is malfunctioning when trying to adjust the image position

Having some trouble with a code for image zoom in/out. When I adjust the position of the image by applying margin left to either the image or the image container (#view), it affects the zoom functionality - causing the image to move to the left during zoom ...

javascriptjqueryhtmlcss

Generate interactive text fields on button click event and store the information in a database

I'm currently working on a project that involves creating dynamic textboxes using PHP and jQuery. The goal is to submit a paper for presentation, where each presentation has multiple authors and each author has more than one affiliation. I've tri ...

javascriptphpjqueryhtml

Displaying a div based on the response after it is received using an if/else statement

In my form, each question is on a separate page (div), with the ability to show and hide pages. If a user receives a response from the API with a status of "accepted", they are redirected to a URL. I'm currently trying to display a div if their status ...

javascriptjqueryhtmlcssjson

Incorporating image URI into HTML for validation purposes

My website validation is encountering issues, mainly due to data/images base64 URIs. I ran a diagnosis on Error: Malformed byte sequence: e9. At line 2, column 259 (etc.) The analysis from https://validator.w3.org/ simply states that it cannot anal ...

htmlw3c-validationdata-uri

What causes certain components in ReactJs to not respond to the `:focus` pseudo-class?

Currently, I am in the process of implementing a straightforward Emoji-Rating system where 5 emojis are displayed on the screen and upon hovering over them, their appearance changes. This functionality is achieved using the :hover pseudo-class. My goal is ...

cssreactjsnpmcomponentsfocus

The problem lies within the `node-fibers` module

After spending a considerable amount of time today, I attempted to deploy my Nuxt project on Vercel but encountered this persistent error: ## Encountering an Issue with `node-fibers` ## `/vercel/path0/node_modules_dev/fibers/bin/linux-x64-93-glibc/fibers.n ...

vue.jssassnuxt.jsvercel

I am interested in utilizing Google Apps Script (GAS) to store images in GoogleDrive and automatically populate the corresponding URL in a

Currently, I am utilizing GoogleAppsScript to develop a form for submitting names and images. The idea is to store the submitted name and image in GoogleSpreadSheet while also storing the image in GoogleDrive along with its destination URL. The process inv ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

Web browser displaying vertical scroll bars centered on the page

I'm new to HTML and have been experimenting with this CSS file to center my form. I've managed to get it working, but the issue now is that it's causing scroll bars to appear on the web browser. How can I resolve this without them? @import ...

htmlcss

Transforming JQuery Output into an HTML Table Layout

Hello there! I am currently working on parsing an XML file within my web page using jQuery. Here is a snippet of the code: function loadCards(lang) { $.ajax({ type: "GET", url: 'data.xml', dataType: "xml", suc ...

javascriptjqueryhtmlxml

Is there a way to perfectly align text both vertically and horizontally on an image with dynamic percentage width and height?

Struggling to center text over a div with percentage width and height? Flexbox didn't work out, so I turned to a tutorial for guidance: http://jsfiddle.net/4be9cp23/. Here's the code snippet from the tutorial: html <div id="header"> ...

htmlcsscss-positioncentering