Tips for creating a scrolling iFrame that moves with the background

I have recently created a website with a unique design feature. The background image acts as a border surrounding the main content, which is located within an iFrame. However, I've encountered an issue where scrolling the iFrame does not affect the background image, and vice versa. I am seeking advice on how to make both elements scroll together, or alternatively, prevent the background from scrolling while allowing the iFrame to be controlled by the browser's main scrollbar. Any suggestions would be greatly appreciated! Thank you for your help!

cssscrollbarhtml

Answer №1

Why are you utilizing the iframe? Perhaps you're interested in achieving a layout similar to this fiddle? This setup allows the main content to scroll while keeping the background stationary:

Here's how you can achieve this effect:

html:
    
         
        
    
css:</p>

<pre><code>body {
    background: url(images/full_screenBgImage.jpg) no-repeat transparent;
    background-attachment: fixed;
    background-position: bottom left;
}
#mainContent {
    background-color: white;
    padding: 10px;
    width:50%;
    margin:20px auto;
}

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

Text Parallax Effect

For my website, I am interested in incorporating a unique parallax effect. Instead of just fixing a background image and allowing scrolling over it, I want to apply this effect to all of the content on my site. The website consists of a single page with m ...

javascriptjqueryhtmlcssparallax

What is the source of the width for this expansive dropdown menu?

I can't seem to crack this puzzle. When you navigate to the following link: click here, and select 'Accordian' from the topbar menu, where exactly does the dropdown menu width originate from? Upon inspecting it, I only see a computed value w ...

htmlcss

Having trouble making the swing effect trigger on mouseover but not on page load

I am trying to achieve a swinging effect on mouseover only, not on page load. Below is the JS code I have: (function swing() { var ang = 20, dAng = 10, ddAng = .5, dir = 1, box = document.getElementById("box"); (function setAng(ang){ ...

javascriptjqueryhtml

Error alert: $.simpleWeather function not found

Currently, I am attempting to incorporate simpleWeather.js from the website simpleweatherjs.com into my own website. However, upon inserting the html code onto my website, an error message pops up: Uncaught TypeError: $.simpleWeather is not a function ...

javascriptjqueryhtmlfunctionreference

passing a PHP variable into an HTML input field

Recently, I've encountered a problem where I need to transfer PHP variables to HTML input fields. echo $ManuellTagnavnMain; for ($n = 0; $n < 6; $n++) { print_r(++$ManuellTagnavnMain.PHP_EOL); } I'm looking for a way to pass these values ...

javascriptphphtml

What could be the reason for the mouseleave event not functioning properly?

I have a JSFiddle that is working perfectly. Check out my Fiddle here. In my code, I am trying to make a div change colors when hovered over and then back to its original color when the mouse moves out. It works fine on JSFiddle but not locally. When I r ...

jqueryhtmlcss

Enhance Your Charts: Learn how to dynamically adjust zoom levels between two timestamps with just a simple form submission

I have a Zingchart Area Graph that displays events on a timeline with time on the X-Axis. I want to be able to automatically zoom into a specific timeframe on the graph based on user input from a form. For example, if a user selects a start time of 8 AM an ...

javascriptphphtmlcsszingchart

Tips for inserting a button under a div when clicked

I am working on a layout where I have several div cards aligned side by side using the display: inline-block property. What I want to achieve is that when I click on a card, a button is added below the respective div. To accomplish this, I tried using jqu ...

javascriptjqueryhtmlcss

Tips for obtaining the most recent HTML element in Angular

I was able to include HTML content in an Angular (7) UI using the DomSanitizer this.sanitizer.bypassSecurityTrustHtml("htmlstr") Once the content is sanitized and displayed in the HTML view, users have the ability to modify the values as desired ...

htmlangulartypescript

Position icons and images on the right side, and the textarea on the left side of the page (using Twitter

Summary: Here is the desired end result shown in the image below. Alternatively, you can refer to the JSFiddle. Ideally, only CSS should be used without changing the DOM structure. The icons need to be aligned completely to the right using the .pull-right ...

csshtmltwitter-bootstraptwitter-bootstrap-3

What is causing the width discrepancy in my header section on mobile devices?

Help needed with website responsiveness issue! The site works fine on most screen sizes, but when it reaches around 414px in width, the intro section becomes too wide for the screen. Any ideas on what could be causing this problem? html: <nav id="m ...

javascripthtmlcssresponsive-design

Using Vue to alter data through mutations

Greetings! I am currently in the process of developing a website for storing recipes, but as this is my first project, I am facing a challenge with modifying user input data. My goal is to create a system where each new recipe added by a user generates a u ...

javascripthtmlcssvue.jsvuex

What is the process for designing custom width columns using Bootstrap?

I am working on a table with three columns that is styled using the Bootstrap class "table table-striped". However, I need the first column to be 100px in width, the second column to be 400px, and the third column to be 200px. How can I achieve this cust ...

htmlcsstwitter-bootstrap

Am I on the right track with incorporating responsiveness in my React development practices?

Seeking advice on creating a responsive page with React components. I am currently using window.matchMedia to match media queries and re-rendering every time the window size is set or changes. function reportWindowSize() { let isPhone = window.matchMed ...

javascripthtmlreactjscss-grid

Displaying errors above the table. Executing ng-repeat in AngularJS

I've been struggling with a seemingly simple issue for hours now. I have a table displaying equipment rows using ng-repeat and input controls, and I want to display validation errors above the table. Here's what I tried: <div class="col-xs- ...

javascripthtmlangularjsangularjs-ng-repeat

The CSS3 Transform feature kicks in only after the window is resized in Mozilla Firefox

I have created a pure CSS3 parallax webpage by following the method outlined by Keith Clark and using a sample made by Carl Henderson (I can't provide a direct link to his codepen due to my lack of reputation). You can find the code in the main page, ...

htmlcssgoogle-chromemozillaparallax

What is the best way to show checkbox selections based on my database structure?

Two variables, one for checkboxes and the other for checked values are causing an issue in displaying them from controller to view. The code to handle this in the controller is as follows: $scope.infoParticipant = functionThatGetsParticipants(); ...

htmlangularjscheckbox

Having trouble incorporating custom elements with the document.execCommand function

I have been attempting to insert a custom element into an editable div using the document.execCommand method as described in detail on https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand. However, when I try to add a custom polymer eleme ...

htmlpolymer

What is the best way to generate an accordion populated with data from a MySQL query?

Everything is in order, I've got all the chapters and video series extracted without any issues: $id_course = 1; $stmt = $con->prepare("SELECT c.chapter, v.preview, v.title_video, ...

phphtml

Distribute progress bar evenly around a circular path

I am working on a component in ReactJS that involves a circle in the center displaying the average (rendered as a div element), with 12 progress bars aligned around it at equal angles. To achieve this, I am utilizing React Bootstrap ProgressBar. <Progr ...

reactjscssprogress-barreact-bootstrap