The HTML background image adjusts to the screen size, scaling down from the middle as the screen size changes

I am still learning HTML programming and experimenting with new things. I have encountered a challenge that I need help with. I have a .png image set as the background of my HTML file. However, when I resize the screen, the sides of the picture get cut off.

background: url(img/Website_Background.png) no-repeat center center fixed;
    background-size: cover;

My question is: how can I make it so that the middle part of the picture disappears (making the overall size smaller), while keeping the parts on the right and left sides visible? I hope this explanation makes sense.

Thank you for your assistance.

htmlcss

Answer №1

background-image: url("img/Website_Background.png");
background-size: cover;
position: relative;

You are all set.

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

Aurelia-powered DataTable plugin for effortless data updating

I'm currently utilizing the DataTables and DatePicker plugins along with Aurelia in my project. The goal is for the user to select a date, which will then prompt the data table to display the corresponding data for that specific date. However, I' ...

javascriptjqueryhtmldatatablesaurelia

Error: ShowModalEdituser has not been defined

When implementing this code to display a modal in ASP.NET Core 5, I encountered the following error: Uncaught ReferenceError: ShowModalEdituser is not defined at HTMLButtonElement.onclick(). As a result, the modal does not appear. How can I resolve this er ...

javascripthtmljqueryajaxasp.net-core

What is the proper way to connect files together?

In my experience, I have frequently encountered challenges when it comes to linking files in my website projects. Whether it's CSS styles, Javascript files, or including PHP files, the issue arises when the project directory on my PC is /www/project-n ...

phphtmlhyperlinkinclude

Trouble with the Display of Divs in AngularJS

I have been attempting to toggle the visibility of a div element. The goal is to show a list of hospitals and, upon clicking on a hospital name, display corresponding information using AngularJS. I've noticed that if I remove 'ng-repeat="x in dat ...

javascripthtmlcssangularjs

ERROR: Unable to use import statement outside a module in REACT-APP

Every time I attempt to print it out on a browser, I encounter an error in the header saying "Uncaught SyntaxError: Cannot use import statement outside a module." Prior to posting this question, I tried various solutions related to this issue, such as addi ...

javascripthtmlnode.jsreactjs

Changing video tag's source dynamically using ajax

In my html page, there is a calendar, a video tag, and a button. The button triggers an ajax call to retrieve a video file path from Django based on the selected timestamp. When the page is initially loaded or refreshed, selecting a date and time and click ...

jqueryhtmldjangoajaxvideo

The nested div does not have scrolling functionality

I'm currently working on making a nested div scrollable, but I'm encountering some challenges. The problematic div in question is the one with the "items" class. <body> <div class="page-wrapper"> <div class="header">Heade ...

htmlcss

Tips on utilizing the PHP json_decode() function with an array of JSON objects

I am having some trouble with an array of PHP objects that are json_encoded. I want to display these objects in a table in HTML, using the object's attributes as rows in the table. However, when I decode the JSON objects one by one in a for loop and d ...

phphtmljson

When errors occur while printing HTML through an Ajax request, it can hinder the functionality of other JavaScript code

I recently conducted an interesting experiment on my website. The concept involved sending an AJAX request to a PHP file, which then retrieved a random website by using various random words for search queries on Google. The retrieved website content was th ...

javascriptphpjqueryhtmlajax

Error: PDFJS is not recognized in an Asp.net environment

Trying to showcase a PDF using the canvas and PDF.JS Stable v.2.2.228, but encountering an error in the console that says: ReferenceError: PDFJS is not defined. Information points towards the removal of the global PDFJS object; however, struggling to find ...

javascripthtmlasp.netpdf.js

Ways to display content alongside an image

Is there a way to verify if an application is running on another server by displaying an image it provides? The challenge is that altering the content of the image is not an option. If the image is not provided, can I show an alt attribute indicating that ...

htmlcssimage

Creating a structured layout similar to an HTML table without actually using the

I am attempting to construct a 2 column table-like structure without relying on <table> elements. In the second column, I aim for text overflow to remain on the right side. You can find my progress so far here - https://jsfiddle.net/a49vuup1/ <di ...

htmlcss

Support for numeric font weights in web browsers

Which browser versions have full support for using numeric values for the font-weight property? This includes Internet Explorer, Firefox, Chrome, Safari, iOS Safari, and Android Browser. While most browsers support the keyword values 'bold' and ...

fontscross-browsercss

What is the best way to showcase my Bootstrap navigation menu items below my title in a horizontal layout on mobile devices?

When viewing the website on a desktop, I like how the navigation bar looks. However, when resized to a mobile size, it aligns itself vertically under the heading instead of horizontally, which is what I want. I attempted using "display: inline" but it did ...

htmlcsstwitter-bootstrapbootstrap-4responsive-design

The width of Bootstrap 5.3.0 form checkboxes varies between options

CSS input[type='checkbox'] { transform: scale( 2 ); margin-right: 1.5em; } Html <div class="form-check d-flex align-items-center mb-3"> <input class="form-check-input" type="checkbox" value=&quo ...

cssbootstrap-5

Steps to deactivate a textarea in angularjs based on a selected option's value meeting a specific condition

Hello, I am a newcomer to AngularJS and I am looking to disable the textarea when a specific option is selected from a dropdown menu. I attempted to use ng-disabled="(here my ng-model value)" but unfortunately, it did not work as expected. If creating a ...

htmlangularjs

Tips on aligning an entire text in R Markdown using the bookdown::gitbook function as the desired output

I've been looking for a way to justify the text in my gitbook, but haven't had any luck finding a solution. I've attempted: Adding "text-align: justified" to the CSS right after the YAML Header: <style> body { text-align: justify ...

htmlcssr-markdownbookdowngitbook

Is it possible to create .html files using the provided list of words?

Can we create .html files from a word list? Check out the example shown in the attached image. Thank you! View Image ...

htmltext

Is the canvas being bombarded with multiple instances of the same image?

Currently, I am working on creating an interactive canvas and I need some help. How can I display the .png file multiple times on the canvas in different locations simultaneously? Any suggestions would be greatly appreciated! :) Thank you so much for your ...

javascripthtmlcanvas

Using jQuery or jQTouch to create dynamic slide transition effects in web applications

Does anyone have a clear step-by-step tutorial for implementing slide transition animations using jQuery or jqTouch? I've attempted it but have not been successful so far. https://github.com/senchalabs/jQTouch/wiki/Getting-Started I'm looking f ...

javascriptjquerycss