The overlay of the background image is excessively oversized

After implementing the following CSS to showcase a background image:


height: 90%; /* or any other value, corresponding with the image you want 'watermarked' */
width: 90%; /* as above */
background-image: url('<?php echo "study/".$_SESSION['bkground_img']; ?>');
background-repeat: no-repeat;
position: absolute;
opacity: 1; /* Works in Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter:alpha(opacity=50); /* Required for versions of IE less than or equal to 8 */
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

The issue at hand is that the background image appears too large and does not adjust according to different screen sizes. The goal is to make it responsive, adapting flawlessly even on mobile devices.

androidhtmlcss

Answer №1

Try adding this CSS code to see if it works:

   height: 90%; /* Adjust as needed */
width: 90%; /* Adjust as needed */
background-image: url('<?php echo "study/".$_SESSION['bkground_img']; ?>');
background-repeat: no-repeat;
position: absolute;
opacity: 1; /* Works for modern browsers */
filter:alpha(opacity=50); /* For older versions of IE */
background-size: cover;
 -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
   margin: auto;

Answer №2

Have you considered editing the image to improve its appearance? Another option is to try duplicating the image on either the x or y coordinates with the following code:

body{
            background-image:url(background.jpg);
            background-repeat: repeat-y; /* or repeat-x, depending on your preference */
}

I trust this suggestion can be beneficial for you :)

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

Prevent users from inserting images from their desktop into the HTML by disabling

While working on a HTML5 drag and drop image uploading feature, everything was going smoothly. I had a small div in the HTML with a JavaScript event handler set up like this: $('#uploader').on('dragover', function(e){ ... }).on(&apos ...

javascripthtmldrag-and-drop

Please select the links located beneath the see-through triangular or polygonal shapes

Review the code snippet provided at the following link: http://jsfiddle.net/q8Ycz <div style="background-color: red; width: 200px;" onclick="alert('behind')"> <div><a href="test">test test test test test test test test test ...

htmlcsssvg

There seems to be a glitch in the JavaScript to-do list as it is failing to append new

My attempt at creating a to-do list is not working when I try to add a new entry. Any suggestions? Also, I plan to implement a feature that can calculate the percentage of tasks completed by crossing them off the list. <html> <head> <titl ...

javascripthtmlcss

Looking to sanitize an array of objects in Node.js? If you find that manually iterating through it only returns 'object Object', there are alternative methods to properly

I have a collection of items structured like this: var data = [ { msg: 'text' }, { src: 'pic.jpg',id: 21,title: 'ABC' } ]; My goal is to cleanse the values by manually iterating throug ...

javascripthtmlnode.jsxss

What is the best way to collect and store data from various sources in an HTML interface to a Google Spreadsheet?

Currently, I have a spreadsheet with a button that is supposed to link to a function in my Google Apps Script called openInputDialog. The goal is for this button to open an HTML UI where users can input text into five fields. This input should then be adde ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

What could be the reason that my Bootstrap dropdown menu is not appearing on my website

I am currently utilizing Angular in my project. I have incorporated bootstrap and jQuery via NPM install, and specified them as dependencies in angular.json. The navbar on my site contains a dropdown menu. When I hover over the dropdown menu, it should di ...

htmlcssangulartwitter-bootstrapbootstrap-5

If either the form is invalid or has been submitted, disable the button

Is there a way to either disable the button when the form is invalid or after the user clicks it, but not both at the same time? How can I incorporate two statements inside the quotes for this purpose? I attempted the following code, but it didn't w ...

htmlangularionic4

Discover the steps for dynamically integrating ionRangeSliders into your project

Recently, I integrated ionRangeSlider to display values to users using sliders. To set up a slider, we need to define an input tag like this: <input type="text" id="range_26" /> Then, we have to use jQuery to reference the input tag's ID in or ...

javascriptphpjqueryhtmlajax

Searching for image labels and substituting the path string

Upon each page load, I am faced with the task of implementing a script that scans through the entire page to identify all image src file paths (<img src="/RayRay/thisisianimage.png">) and then add a specific string onto the file paths so they appear ...

javascriptjqueryhtmlarrays

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

javascriptphphtmlcss

When implementing a RecyclerView.Adapter, the onCreateViewHolder method will consistently receive a viewType argument with a value of zero

Looking to create a RecyclerView with multiple view types? Check out this discussion here: link. The key aspect of implementing this functionality lies in the method getItemViewType(position: Int): Int{}. The viewType returned by this method directs onCr ...

androidandroid-recyclerview

How can one retrieve the ID value within a function using jQuery?

I am trying to implement an upload picture function along with cropper js function. However, I am facing an issue with displaying the file name even though I have declared the variable and set the input value. But when I attempt to pass and display the nam ...

javascripthtmljquery

Implement two different styles within an element's style properties

Welcome everyone, I have a question regarding adding marquee effects to a table row along with highlighting it. Is it possible to include moving text from left to right in the same active row? For example, let's say that the current time is 12:45 AM. ...

javascriptjqueryhtml

What is the best way to make sure my navigation menu adapts to changes in my div size

Just curious, how can I make my navigation menu adjust its width to match the div box? Any help would be appreciated! If you'd like to see an example, here's a jsfiddle link: http://jsfiddle.net/AtM2Q/ Below is the code snippet: <html> & ...

htmlcssnavbar

Guide to incorporating crispy forms with Bootstrap 4 in Django

I'm struggling to integrate a bootstrap upload form with a Django form using crispy forms. Does anyone know how to incorporate crispy forms into a bootstrap form? This is an example of a Django crispy form: <form method="post" en ...

pythonhtmldjangobootstrap-4django-crispy-forms

Gradually vanishing words while they glide across the screen

I want to achieve a similar effect seen in the game A Dark Room. The text in the game serves two purposes which I am trying to replicate: The new text is added above the old text instead of below it, pushing the older text down the page as the game progr ...

javascriptjquerycss

``CSS: Styling a Rounded Div with a Clipped Scrollbar

I am attempting to contain a scrollbar within a div so that it remains within the rounded corners without overflowing. Take a look at the code snippet below to see the problem in action. Is there a way for the scrollbar to be fixed in its position, while ...

htmlcss

Trouble with implementing conditional styles in Next JS

<label className={`${darkModeActive ? 'text-brand-five' : 'text-brand-seven'} ${errors.invoiceDate ? 'text-[#EC5756]' : ''}`} htmlFor="invoiceDate"> Invoice Date </label> I am encountering a ...

cssreactjsnext.jstailwind-css

Should font size, line height, and font-family be declared to the body before or after the CSS reset?

Let's say I am using the Eric Meyer Reset and I need to apply a style to the body element. body { font: 100%/1.5 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/ } Should I place this before or after the reset CSS? html, body, div, span, a ...

cssxhtml

Adjust the size of the text only when there is limited space available

Is there a way to make text shrink to fit inside a container only if it's too long, but remain the same size otherwise? I'm working on a chart with keyboard commands overlaid on an image of a keyboard and want the text to adjust dynamically. Any ...

htmlfont-size