Creating a scrolling background effect using HTML and CSS: ``Background Parallax

I'm trying to keep the background of my HTML document fixed in the upper left corner, so that when a user scrolls through the page, they only see parts of it.

Here's the code I'm using:

<body style="background-image: url(background.png);
            background-repeat:no-repeat;
            background-attachment:fixed;

            width:1400px;
            height:2000px;">

It works correctly in browsers, but in the software I'm using — MS Expression Web 4 — the image moves horizontally with the window instead of staying fixed. It remains stationary vertically though.

So, is the issue in my code (which Chrome seems to interpret correctly) or is it a bug in Expression Web 4?

Thank you in advance :)

Answer №1

Before finalizing, I suggest running a test on various browsers to check for compatibility. It appears there may be a bug in expression web 4 causing the issue. While your code seems correct, it's important to ensure functionality across all major browsers.

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

Position Font Awesome to the right of the text in the list

Hi there, I am currently working on a project where I want to align font awesome icons to the right of my text within a list. My website is in a Right-to-Left (RTL) language and I can't seem to find any resources on how to achieve this. Any help would ...

Transforming the font landscape with Twitter Bootstrap 3's Glyphicons

I have an unordered list with icons styled using Twitter Bootstrap 3. The Carme font from Google Fonts is used for normal text, and works well in that context. However, when I add icons to the unordered list using BS3, the font-family of that particular ...

Tips for resizing the background to match the font size on a canvas marker in Google Maps

Check out my jsFiddle code below: var marker = new google.maps.Marker({ position: new google.maps.LatLng(-25.363882,131.044922), map: map, title:"Hello World!", icon: CanvasCrear("hola", 15) ...

Unable to produce scrolling animation using JavaScript

I'm trying to implement a feature on my website where the page scrolls with a sliding effect when the user presses the "Scroll" button. However, I've encountered issues as it doesn't seem to work despite adding the necessary tags to my HTML ...

Modify the appearance of the username in the header after logging in with Yii

As a fellow coder using Yii, I'm seeking assistance in changing the style of my username displayed in the header upon login. Currently, it's appearing in black color and I desire it to be italicized-white. The code snippet below shows my header s ...

How do I prevent a media query written for small screens from also affecting large screens?

@media only screen and (min-width: 320px), (min-width: 360px), (min-width: 375px), (min-width: 600px){ CSS properties for various screen widths are defined here } ...

What is the best way to eliminate unwanted white space at the top of the page?

I'm new to web development and I'm exploring the concept of white space at the top of a webpage. Here is a snippet of my code: HTML: <div> <p>lorem ipsum</P> </div> CSS: div { background-color: black; } I attem ...

Include previous input as a "phantom" thumbnail to the slider element of type "range"

https://i.stack.imgur.com/JnuCN.png Using a tutorial from w3schools, I have customized a regular range slider. The objective is to send a new value command to an external MQTT-based home automation system and display the previous value as a ghost-thumb in ...

Issues with Adaptive Headers

* { box-sizing: border-box; font-family: sans-serif; margin: 0; padding: 0; } html, body { font-size: 14px; } header { width: 100vw; height: 50px; background-color: #222; margin: 0 auto; padding: 0; display: flex; justify-content: ...

What is the significance of vendor prefixes in the world of CSS3?

While I can see the rationale behind using prefixes for experimental non-official features to avoid conflicts, what is the reason for using them on shadows and similar elements? Shouldn't all vendors be implementing effects consistently according to ...

Making poll everywhere items align horizontally using HTML: a step-by-step guide

Is there a way to display two different Poll Everywhere polls side by side on a Blackboard course, rather than having them stacked on top of each other? I have the embed codes for both polls ready to go. ...

Adjusting the width of speech balloon in CSS

This question might seem basic to those who are familiar with CSS (unlike me lol). I'm currently working on incorporating speech balloons into my website using this code from jsfiddle. However, I encountered an issue when the text inside the balloon i ...

sticky header on pinned tables in a React data grid

I have combined 3 tables together, with the middle table containing a minimum of 15 columns. This setup allows users to horizontally scroll through the additional columns conveniently. However, I am facing a challenge in implementing a sticky header featu ...

What is the process for adjusting the color of a div?

Is there a way to adjust the background color of a div when hovering over another div in HTML? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or ...

Using CSS :hover for elements with dual classes only

Is there a way to make the CSS :hover selector work only when two different classes are attached to a div? I have tried a couple of methods, but they eliminate the hover effect. For example: .accordionButton .cyan:hover{ color: cyan; } I cannot s ...

Two sidebar panels displayed in the same tab on the Navbar page

In the Shiny navbarpage, is it possible to add 2 sidebar panels with space in between, as illustrated in the diagram linked below? Can we use HTML tags to achieve this spacing? https://i.sstatic.net/jXBXo.png Below is the code for it (Essentially, I requ ...

Stylish curved bottom border

Is it feasible to create this footer using just CSS? Appreciate the help! ...

What is the best method to ensure that none of the select option values are left empty?

I have a total of 5 select option drop down menus currently, but this number may increase in the future depending on requirements. The issue I'm facing is that when I select the last element, it returns true even though the other elements are empty. I ...

How to apply a custom CSS class to a Smarty tag in CMS Made Simple

Greetings! I am currently in the process of revamping a page using CMSmadesimple, However, I have limited knowledge when it comes to utilizing CMSms and Smartytags. The page contains various smartytags that require styling. One particular tag that needs ...

How to make a line stand out in an HTML table using <td> tag: **Bold a

I have written the code below to create a table, and I only want the text XYZ to be bold and all other text to remain unbold within the < td > tag. However, when I implemented this code, the entire < td > content became bold. I would prefer not ...