Issue with CSS background inner shadow not covering entire background area

A question has arisen regarding the implementation of an inner shadow effect for a background picture that is set to repeat. The current code used for the shadow effect is as follows:

background: #202020 url(images/img01.jpg) repeat;
-moz-box-shadow: inset 0 0 200px #000;
-webkit-box-shadow: inset 0 0 200px #000;
box-shadow: inset 0 0 200px #000;

Everything works fine when the content fits the browser window without a scroll bar. However, when the content is longer and requires scrolling, the background shadow appears to be cut off at the end.

The question at hand is how to achieve an inner shadow effect for the full background, even when a long scroll bar is present.

htmlcss

Answer №1

your solution is effective

    <div>content</div>

stylesheet

     div{background:#fff url("images/img01") repeat;
     -moz-box-shadow: inset 0 0 200px #000;
    -webkit-box-shadow: inset 0 0 200px #000;
     box-shadow: inset 0 0 200px #000;
     /*if you need word wrap
     word-wrap:break-word;*/
     }

live example

Answer №2

swap out the image with your own...

Optimize your code and then test it out, let me know...

 <div class='background'>
       This is dummy text repeated multiple times
</div>
 .background {
        background: #202020 url("http://example.com/your-image.jpg") repeat;
       -moz-box-shadow: inset 0 0 30px 0 #f00;
      -webkit-box-shadow: inset 0 0 30px 0 #f00;
      width:100%;
      float:left;
      height:100%;
      padding:15px;
      color:#fff;
      box-shadow: inset 0 0 30px 0 #f00;}

Hopefully this solution works 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

What are the steps to storing numerical inputs as variables using jQuery and then using them to perform calculations in order to update the input numbers

Currently, I am in the process of creating a BMI calculator using HTML and jQuery. <form id="bmiCalculator"> <fieldset> <legend>BMI Calculator:</legend> <p> <label>Height: ...

javascriptjqueryhtml

Exploring the Functionality of POST in AJAX Requests

I'm facing an issue where the data is not displaying on my page even though I am using a Github URL and Ajax POST. Can anyone help me identify what needs to be fixed in the code below? <div id="content"> </div> window.onload = ...

htmljqueryjsonajax

Add a personalized class to a mat-tab within a mat-tab-group

I am looking to add unique styles to specific mat-tabs within a mat-tab-group based on a condition. The main mat-tab-group already has a default custom style that is functioning correctly. The styling is applied as follows: .mat-mdc-tab-group.round-tabs, ...

cssangularangular-materialmat-tab

Managing a new browser window using Selenium

I am attempting to automate a download process on a webpage using selenium. Upon clicking a button, a blank popup window appears. After approximately 60 seconds, a link appears within the popup that I want to click on. The code snippet below outlines my ap ...

c#htmlselenium

Colored stripe on a horizontal menu

I am attempting to design a page header with a menu that resembles the image provided below. https://i.sstatic.net/623eH.png As I construct the navigation, each link area (highlighted in blue) is represented by an <li>. However, I am encountering a ...

csshtmltwitter-bootstrap-3

Tips for converting each item within an array into its own separate element

https://i.sstatic.net/Dxj1W.pngI currently have an array of objects that I am utilizing to generate a table in Angular. The table is functioning properly and successfully displays the data. However, I now have a requirement to enable editing for each indiv ...

htmlarraysjsonangulartypescript

Incorporate an image into a hyperlink using CSS

I am trying to enhance my URLs by adding the same image to each of them. The code I have currently is as follows: a.linkArrow { background: transparent url('../images/abc.png') no-repeat center right; padding-right: 60px; } Here is an ...

htmlcssimagestylesheet

Tips for adjusting the height of a selection box in jQuery Mobile

I am trying to make the select box height the same as the label (模板分類:). <select id="TamplateClass" style="height:1.5em">...</select> you can use CSS #TamplateClass{height:1.5em;} However, no matter what I try, the results are all th ...

cssjquery-mobile

Using JQuery to locate and substitute occurrences of HTML elements throughout my webpage

Looking for assistance with a JQuery search and replace task involving multiple instances of HTML within a specific DIV element on my webpage. Specifically, I need to change certain items in the textbox to a simpler display format. Here is a snippet of th ...

javascriptjqueryhtml

Interacting with a DIV element can also have an impact on the links within

Below is my current CSS code: .contact{ padding:1rem; background:#023B6C; padding:1rem; position:fixed; right:-20px; top:27%; z-index:99; border-radius:5px 5px 0 0; border:2px solid #fff; transform:rotate(-90deg); transition:all .5 e ...

csshtmlhover

What is the best way to utilize mouseenter and mouseleave events concurrently?

I need some assistance with my website's star rating feature. When a user hovers over the stars, a popover should appear, and when they move their mouse away, the popover should disappear. Currently, I am using jQuery to achieve this functionality: $( ...

javascripthtmljquerymouseevent

Is there a way to use PHP in place of the <form> tag in HTML in order to submit a form from a script and remain on

Currently, the code in my form looks like this: <form action="https://www.paypal.com/cgi-bin/webscr" target="_BLANK" method="post"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="business" value="paypal@ ...

phphtmlpostcurlpaypal

Ensure that CSS is integrated correctly

I have a main Django template that incorporates another template for the navigation bar. I currently have separate CSS files for both the main page and the navbar. My query is: what is the correct method to include the CSS from the navbar in the main p ...

htmlcssdjangodomdjango-templates

Is it time to shake up the location of your Toastr

Recently, I've been working on implementing Toastr from this GitHub repository. While I am able to receive alerts and toasts as intended, I'm running into issues when trying to apply custom options. It seems to only stick to the default settings ...

javascriptjqueryhtmltwitter-bootstrap-3

Attempting to relocate various containers

My task involves handling a group of randomly placed boxes on a webpage, each painted in random colors. I am currently attempting to enable their movement from one location to another. Despite being a seemingly simple task, my lack of familiarity with mous ...

javascripthtml

I'm trying to position this div within a table so that it lines up with one of the cells. Can you help me figure out

After implementing the code, here is the current output: <table><tr> <td><div id="adt"></div></td> <!-- 336x280 ad code --> <td id="butw"><div id="butto">Follow @Twitter</div></td> ...

htmlcsshtml-tablealignment

Interacting with jQuery UI Droppable by setting acceptance criteria before submitting a form

My goal is to create a draggable item that can be dropped onto a specific zone. The challenge I'm facing is in displaying a form for inputting information and storing it in a database. If the input is successfully stored, the drop action will be succe ...

javascriptjqueryhtmljquery-ui-droppable

Utilizing jQuery for Summation Calculation

How can I use jQuery to calculate the total sum of prices for all products in a table with the column name "price"? Once calculated, how do I store this sum in a variable? <table id ="tab"> <th>Product</th><th>Price</th> ...

jquerycss

Is there a way to modify the CSS of the sequential number element when it is clicked on?

I've successfully utilized jQuery to create sequential numbering for my menu items. Upon clicking, the hyperlink text changes color to red. However, I'm facing an issue where I want the corresponding number to also change to red when the hyperli ...

javascriptjqueryhtmlcss

Tips for triggering a method when clicking instead of using v-for in Vue.js

I need help arranging an array of objects based on their ratings. Currently, I am able to display the items from highest to lowest rating using the v-for method. But, I would like to first display the objects in their original order and then have a button ...

javascripthtmlvue.js