What is the functionality of background attachment fixed?

I am curious about how background images behave when the background-attachment property is set to fixed. Here are my questions:

  1. If I set a background image for a div with dimensions of 500px by 500px and add a 1px solid red border, then apply background-size: 100% 100%, why does the size of the background image end up being slightly larger than 500px? And why does the size change when the viewport size changes?

  2. Is there a way to set a minimum height for the background image so that it doesn't shrink below a certain height when the viewport size changes?

htmlcss

Answer №1

When you set the background to fixed, it becomes relative to the body element. This is why using a size of 100% 100% will result in a greater width than the div itself. The width will match the body's width, not the div.

If you want to specify a fixed height, you simply need to set it in px. However, keep in mind that in this case the image will not maintain its aspect ratio:

div {
  background: url(//c6.staticflickr.com/8/7389/26907631325_f8b05bb68d_c.jpg) fixed left top/100% 433px no-repeat;
  width: 800px;
  height: 433px;
}

html {
  height: 10000px;
}
<div>
  
</div>

Answer №2

  1. The image appears slightly larger than 500px due to the inclusion of the border in its dimensions. Consequently, the background image will be 502x502 when utilizing this method.

  2. By setting a max-width and max-height on your background property, you can ensure that the image does not scale below a specified pixel size.

Why does the size of a background image adjust when I resize the viewport?

This occurs because the image size is defined in %. The % value signifies a percentage of the parent element's size. In this scenario, the parent is the viewport (similar to vh and vw) and will adapt its size according to changes in the viewport dimensions.

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

How can I align a mapped button to appear on the opposite side of the data using Tailwind CSS?

I've been struggling to find a straightforward solution to this issue for a while now. Let me break it down - I need to display some data on the left side of a post card component with a button located right next to it. Here's an illustration: ...

cssreactjsnext.jstailwind-cssshadcnui

Mastering Bootstrap: Achieving flawless column stacking in succession

I am currently integrating bootstrap into my existing HTML code, but I only require it in two specific sections to avoid rewriting the entire code. Everything looks fine on my 1080p screen as intended. However, when I resize the screen slightly The titl ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Tips on creating type definitions for CSS modules in Parcel?

As someone who is brand new to Parcel, I have a question that may seem naive. In my project, I am using typescript, react, less, and parcel. I am encountering an error with typescript stating 'Cannot find module 'xxx' or its corresponding t ...

javascriptcsstypescriptcss-modulesparcel

PhantomJS encountered a TypeError when trying to access a non-existent object during the evaluation of 'document.getElementById()'

Recently, I delved into the world of PhantomJS and its ability to extract data from websites through JavaScript. This process is commonly referred to as web scraping. My goal was to retrieve the text content of an element by its ID. However, I encountered ...

javascripthtmldomweb-scrapingphantomjs

Customized input field design for a discussion board platform

I am in the process of creating a forum-style website and I am in search of a unique open source HTML template that includes an editable text box where users can input their posts, similar to what is seen when posting a question or answer. I believe there ...

javascriptjqueryhtml

removing functionality across various inputs

I have a JavaScript function that deletes the last digit in an input field. It works fine with one input, but not with another. It only erases the digit in the first input. <script> function deleteDigit(){ var inputString=docu ...

javascripthtml

What is the best way to transfer data from an HBS template (HTML) to an Axios POST request?

Just diving into nodejs and express! I want to pass the user input (an email) to axios.post request's data when the "submit" button is clicked. I've verified that hard-coded data in the axios request is functioning correctly. data_email.hbs &l ...

htmlnode.jsexpresshandlebars.jsaxios

Combining a Vuetify 2 toolbar and a navigation drawer, topped with an additional toolbar for added functionality

I am working towards achieving a layout similar to this: https://i.stack.imgur.com/M0rGl.jpg However, I currently have this setup: https://i.stack.imgur.com/VOGxJ.jpg The issue I am facing is that I am unable to position the first toolbar above the navi ...

htmlvue.jsvuetify.js

Troubleshooting HTML Output Display Issues

I've been trying to post my content exactly as I submit it, but for some reason, it's not working. When I enter two paragraphs in a post, the output doesn't maintain that formatting. Instead, it removes the paragraph breaks and displays the ...

javascriptphpjqueryhtmlcss

ways to undo modifications made to a value within an input field using jquery or javascript

$(document).ready(function () { //Highlight row when selected. $(function () { $('#Cases tr').click(function () { $('#Cases tr').removeClass('selectedRow'); $(this).addClass(&apos ...

javascriptjqueryhtml

Unable to decrease the width of a div element in Vuetify and Nuxt

As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex. The use of v-for in Vue.js helps me loop through form objects and render the app ...

javascripthtmlcssvue.jsvuetify.js

Creating an HTML element that can zoom, using dimensions specified in percentages but appearing as if they were specified in pixels

This question may seem simple, but I have been searching for an answer and haven't found one yet. Imagine we have an HTML element with dimensions specified in pixels: <div style="width:750px; height: 250px"></div> We can easily resize i ...

javascripthtmlcss

Resource loading unsuccessful: server returned a 405 status code, indicating method not permitted

An error occurs when attempting to send an email using PHP. Failed to load resource: the server returned a 405 (Method Not Allowed) status for sendmail.php This is the form: <form action="sendmail.php" method="post" id="contactform" > <div ...

phpjqueryhtml

React - Styling with Pseudo Element on Input Element not displayed properly

I'm struggling to understand why an ::after element is not displaying on an input element, but is working fine on a div. I'm attempting to create a performance-friendly focus effect for an input element, where it glows when in focus using the af ...

cssreactjspseudo-element

Continuously make Ajax requests to populate numerous div elements

There are two div elements present on my webpage. <div id="1"></div> <div id="2"></div> I am attempting to dynamically populate these divs using the following php call. <script> var queries = ["SELECT * from table1", "S ...

javascriptphpjqueryhtmlajax

Get rid of the drop-down shadow effect

Currently working on a website project for a client and looking to remove the blue "shadow" effect from the dropdown menus. I believe the code that needs editing is as shown below: .main_nav ul.sub-menu { position: absolute; top: 65px; width: ...

cssmenushadow

Does ng-bind have the ability to function with input elements too?

My mind was spinning as I tried to figure out why my <input ng-bind="x.a * x.b" tabindex="-1" readonly/> expression wasn't functioning. The use of ng-model was not an option due to the fact that the product is not an L-value, so I made the swi ...

htmlangularjsreadonly

Creating a Mondrian-inspired design using a combination of red, blue, and yellow within an HTML table

Is there anyone who can assist me in recreating this painting using HTML <table> tag and CSS within a browser? The image to replicate: https://i.stack.imgur.com/84y4I.jpg I attempted to complete this task, but my instructor is dissatisfied with th ...

htmlcss

Is it possible to automatically adjust the cursor position in a textarea when the language is switched?

I am working with a textarea that needs to support both English and Arabic languages. In English, text is typically left-aligned, so the cursor should start on the left-hand side. However, in Arabic, text is right-aligned, meaning the cursor should begin ...

javascriptjqueryhtml

Emphasize the active item in the PHP header

Hey there! I've been trying to figure out how to highlight the current page in the header of my website. I'm using the include method to call the header on all pages, but I can't seem to figure out how to highlight the current page while sti ...

phphtmlcssheaderinclude