Background color and page height

When attempting to place a background image on the body element and the page height exceeds that of the viewport, allowing for vertical scrolling. In this case, the background image seems to start or end at the point where the viewport ends when scrollTop is 0.

It's almost as if the body's height of 100% matches the height of the viewport. Why is this happening? What am I missing?

html {
    height:100%;
}

body {
    font-family:tahoma;
    font-size:11px;
    color:#333333;
    background:url('/new/gfx/layout.bottom_bg.png') bottom repeat-x #eef7ff;
    margin:0px;
    height:100%;
    overflow-y:scroll;
}

Answer №1

There is nothing wrong with your approach; setting the body height to 100% does indeed refer to the viewport height. However, if you prefer it to match the image height, then use the specific pixel height of the image instead. Alternatively, if you want it to adjust based on the content size, consider utilizing the min-height property set at 100%.

Answer №2

Setting height to 100% is the same as setting it to the viewport's height. To avoid issues, either do not define a height or opt for <code>min-height: 100%;

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

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 ba ...

Modify the text of a button when hovered over (JavaFX)

Can anyone help me figure out how to change the text of a button when it is hovered over? Approach: if (button.isHover()){ button.setText("new message"); } I'm open to either a css fix or a code solution! ...

modify the inherent CSS property

I am working with a component that I have inherited, including its CSS style, and I need to modify one of its properties. Current CSS: .captcha-main-image { width: 100%; height: auto; } <img class ="captcha-main-image" id="captchaImage" src= ...

In JavaScript, unchecking a radio button results in all options becoming uncheckable

I have a pure CSS accordion and I want to enhance it with some JavaScript functionality for users who have JavaScript enabled. The CSS accordion currently utilizes the :checked pseudo-class. The new feature I am looking to add is: if a button that is alre ...

Enhancing audio control features using HTML and JavaScript

After utilizing various suggestions, I have successfully created a basic audio slider that starts playing sound (at zero volume) when clicked by the user. They can then adjust the volume as needed. My only challenge is that the volume adjustment only occu ...

``How can I easily navigate to the top of the page when changing routes in React Router DOM v6?

What is the best way to scroll to the top when a route changes in react router dom v6? In the past, I used a solution from this StackOverflow post to make my page automatically scroll to the top every time a route changed with react-router-dom v5. However ...

Issues with CSS causing items to not line up in a single row

I'm currently working on an html/css page and trying to align the items of the agenda class in the same row, centered on the page. https://i.sstatic.net/8TjG8.png Here's the code I've been using: <html lang="en" xmlns="ht ...

Utilizing Tailwind CSS for creating a responsive layout on a Next.js application

I'm just getting started with Tailwind CSS and I decided to build the user interface of my nextjs application using a "mobile first" approach like everyone suggests. I got the flex direction and background color working perfectly on mobile screens, so ...

Determine whether a div contains any child elements

I am working on a piece of code that checks for the presence of the class "wrong" in any of my divs, and if found, displays a jQuery UI dialog box. My goal now is to enhance this code by adding a condition where it also checks for empty divs before showing ...

Expanding borders occur when the element is repositioned using the translate property

I am trying to create a vertical line that remains in the center of a div container regardless of the screen size. I want this line to be 1px thick. However, when I use transform: translate(-50%, -50%);, the border seems to become thicker than expected. Be ...

Unable to modify border color for Material-UI OutlinedInput

Having some trouble changing the border color of a v4.13 MaterialUI Outlined Input. No luck with CSS overrides. Tested multiple CSS rules targeting different elements, such as select and OutlinedInput. Here are my latest attempts. What am I missing? cons ...

What could be the reason behind Google and Bing's mobile-friendly tests inaccurately flagging my site as non-mobile friendly?

Our website for resources is responsive and has been thoroughly tested on various real smartphones, including iPhone, Android, and Windows devices. It looks great on every phone we've tested it on. You can visit the resources website here: The site ...

Switching Div Elements Created by PHP

Utilizing MySQL, I am fetching data to dynamically generate nested div tags in a hierarchical structure. This structure consists of div tags within div tags within div tags, all uniquely identified through PHP-generated ids: <div class="holder"> ...

Use CSS to mimic the :hover functionality for touchscreen devices

I am struggling to get this piece of code to function correctly, $(document).ready(function() { $('.hover').bind('touchstart touchend', function(e) { e.preventDefault(); $(this).toggleClass('hover_effect'); }); ...

The min-height property does not seem to be compatible with -webkit-calc

I've been experimenting with this code: .main{ min-height: -moz-calc(100% -50px); min-height: -webkit-calc(100% -50px); min-height: calc(100% -50px); background-color:#000; color:white; } html{ height:100%; } <html ...

How can I use CSS to transform a "+" symbol to an "x"?

When I created an accordion using HTML, JS, and CSS, I encountered a problem. The "+" sign in the accordion does not rotate correctly as it should. Instead of rotating from the middle of the "+" sign, it rotates from the top. This is my HTML code: <di ...

Learn how to manipulate the DOM by dynamically creating elements and aligning them on the same line

Providing some context for my page: The section I have always contains a single input field. Below that, there is an "add" button which generates additional input fields. Since only one field is required on the screen, the following fields come with a "de ...

Custom Native Scrollbar

Currently, there are jQuery plugins available that can transform a system's default scroll bar to resemble the iOS scroll bar. Examples of such plugins include . However, the example code for these plugins typically requires a fixed height in order to ...

Adding a div beside an input element - step by step guide

When creating an input field in my code, I followed these steps: var inputVal = document.createElement("input"); inputVal.setAttribute("type", "checkbox"); inputChek.onchange = select; inputChek.setAttribute("value", title); //inputChek.after(sortDiv); ...

Relocate the preview division below the button in the Kartik File Input Widget

There are two input file buttons that allow users to upload an image on each button. Upon selecting an image, a preview of the image will be displayed above the button. The current layout is shown here: https://i.sstatic.net/aLAbo.png When images of diff ...