I am experiencing an issue where the background image is set under the HTML tag, however, I am

As a newcomer to angular, I have experience with HTML, JS & CSS. My goal is to make a background image fill the width of the page and allow scrolling to view the rest of the image since it is taller than wider.

In the global stylesheet style.css, I placed the background image under the HTML tag. It displays correctly in terms of width but I am struggling to enable scrolling to see the full image.

This snippet is from style.css:

html { 
    background-image: url("app/Images/Background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: absolute;
    margin: 0;
}

I attempted to add overflow: scroll, which only resulted in a scroll bar on the side without allowing actual scrolling.

What changes should I make to successfully scroll and view the entire background image?

htmlcss

Answer №1

To create a unique design, consider implementing a custom height and utilizing the image tag.

Customize the height with: 1000px;

Answer №2

After some experimentation, I managed to get something functional, although not very visually appealing.

I assigned an ID to the HTML element and incorporated JavaScript code.

function calculateWidthAndHeight(){
    var screenWidth = document.getElementById("html").offsetWidth;
    var percentage = screenWidth/this.width;
    document.getElementById("html").style.height = (percentage * this.height) + "px";
}

function displayImage(){
    var myImage = new Image(); 
    myImage.name = "app/Images/Background.png";
    myImage.onload = calculateWidthAndHeight;
    myImage.src = "app/Images/Background.png";
}

window.addEventListener("resize", displayImage);
displayImage();

Below is the CSS styling used:

html{
    width:100%;
    background-image: url("app/Images/Background.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    margin: 0;

}

Does this align with your expectations?

Answer №3

According to @elveti, the background-image property does not impact the size of the element. One option is to create an image as a div and then specify the width and height dimensions you desire. For a solution using this approach, check out the following link:

Learn how to achieve 100% width background image with an 'auto' height

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

setting different iframe widths for desktop and mobile views

I am working with an iframe and facing a challenge. I want to make it full screen width on mobile devices, but only half the screen width on a normal monitor (100% and 50%, respectively). The minimum specification for the mobile device would be iPhone, alt ...

htmlcss

What is the best way to showcase the information from DataProvider in Amcharts visualizations directly beneath each chart?

After creating some graphics using Amcharts, I encountered a challenge in displaying the table of data (dataProvider) right below each graph on my HTML page. Despite searching extensively for a solution, I have been unable to find one. The table of data ...

javascripthtmlamcharts

The styling of JSX input elements is not performing as anticipated

I am facing an issue with a component that is responsible for mapping input elements. These input elements have a flag indicating whether they should be displayed inline or not. Despite my efforts, I am struggling to make the flex property work as intended ...

javascriptcssreactjsflexbox

Place two divs in the center of a container, with one floating to the left and the other floating

I have attempted numerous techniques provided on this site, but none seem to be effective. My goal is to horizontally center two divs that are positioned to the left and right within a container with a 100% width. Here is the CSS snippet I am using: #bo ...

csshtmlcontainersmargincenter

Could it be that this is a mysterious foreign alphabet or a problem with the encoding?

I'm facing a strange bug with characters on my website and I can't seem to figure out what's causing it. A foreign writer submitted an article to me, and when I received it, the font was displaying oddly. After some investigation, I've ...

javascripthtmlencodingutf-8character

The Bootstrap justify-content-around is causing the last item to be out of

My current prototype Website has this layout, utilizing justify-content-around: https://i.sstatic.net/WUJdl.jpg I am seeking a solution for when there is an odd number of cards, ensuring that the final card aligns with the rest. Is there a way to achieve ...

htmlcssbootstrap-4flexbox

What's the best way to target an element that is outside a certain parent container, but based on the parent's class?

Looking to target specific divs with a data-role of content that are not nested within a data-role="page" div with the class "modal". Advanced CSS selectors are not my forte. <div> <div data-role="page"> <div data-role="content" ...

csscss-selectors

Prevent body from scrolling when mouse is over a div, while keeping the position unchanged

Although I've come across a few discussions about this topic before (including one of my own), I'm still searching for an improvement on the only solution that has actually worked for me. My goal is to enable mouse wheel scrolling for a height-l ...

jquerycssajaxhtmlscroll

What is the best way to save user input from an HTML text field into a jQuery variable for long-term storage?

JavaScript with jQuery $(document).ready(function(){ var userGuess; $('#submit').on("click", function() { userGuess = $('#guess-value').val(); $("#value").text(userGuess); alert(userGuess); }); ...

javascriptjqueryhtml

How can I ensure that an absolutely positioned element [created with React] snaps to the edge of its parent div when the page loads

I am currently developing a unique two-thumb slider bar component using React. Each thumb in the slider snaps to the closest discrete tick so that users can easily select values along a number line visually. One challenge I'm facing is that the thumbs ...

htmlcssreactjs

Adjusting the alignment of Bootstrap navbar items upon clicking the toggle button

When I click the toggle button on a small screen, my navbar items appear below the search bar instead of aligning with the home and about elements. Below is an image depicting this issue: https://i.stack.imgur.com/4rabW.png Below is the HTML code structu ...

javascripthtmltwitter-bootstrap

Guide to ensuring a jQuery modal box appears above other page elements

As I work on a jQuery popup modal box, I am faced with the issue of it pushing all other content aside when called. The toggleSlide() function is being used and works fine, but the layout problem remains. Attempts to rectify this by using position: relati ...

jquerypopupmodal-dialogcss

What is the best way to ensure that my React-Tailwind navbar and hero elements are optimized for screen height?

I'm facing a challenge with my current project, which is a React project integrated with Tailwind CSS. I'm attempting to style the main elements (navbar and hero) to fit the entire screen height when the user lands on the page. If you have a solu ...

cssreactjsjsxtailwind-csstsx

Attempting to create a child process within the renderer by triggering it with a button click

I'm currently developing an electron application where I am attempting to initiate a child node process (specifically to run a Discord.JS bot). Below is the code snippet in question: index.html: <tr> <th class="title-bar-cell" ...

javascripthtmlnode.jselectron

Using Javascript, create a loop that navigates between two different pages and add a timer on one of them

How can I create a while loop that spans across 2 HTML pages or use a prompt to ask a question? If the wrong answer is provided, I would like to be redirected to another HTML page which will display for 5 seconds before returning to the prompt. This is my ...

javascripthtmlcss

Resolve a container overflow problem within the footer section

Trying to adjust the footer (newsletter signup form) on this page to fall to the bottom of the page has been a challenge. The #container element appears to be larger than the body, causing layout issues. Any suggestions on how to resolve this? An image d ...

htmlcssshopify

Encountered an error: Uncaught TypeError - Unable to access the 'format' property of an undefined object at the specified time

I encountered an issue with the following line of code let FullDate = moment(1499153561479).add(currentSeconds, 'seconds').tz(citiesT[id]).format("DD-MM-YYYY HH:mm:ss a"); Any suggestions on how to resolve this error? ...

javascriptcsstimemomentjs

Implementing timeAgo with jQuery (or a similar tool) to display the elapsed time since a user (client) accesses or updates a webpage

https://i.sstatic.net/Y7bzO.png Currently, the timer displayed always shows the actual time instead of phrases like "about a minute ago" or "5 minutes ago". I have tried different solutions without success. //timeago by jQuery (function timeAgo(selector) ...

javascriptjqueryhtmltimertimeago

What is the method to customize the color of the "Download to Excel" button on the Kendo Grid toolbar?

I'm looking to personalize the color of the "Export To Excel" button provided by the Kendo grid UI in the toolbar: https://i.sstatic.net/UYug5.png While I've successfully altered the color of the toolbar itself using the following definition in ...

javascriptcsskendo-grid

"Initial loading issue with bootstrap carousel causes slides not to slide smoothly

I am currently working on implementing a slider carousel using Bootstrap. Although the 'active' image loads successfully, the controls and slide functionality are not working as expected. Initially, I believed this exercise would be straightforwa ...

htmlcssbootstrap-4