Using CSS to Create a Background with RGBA Color and Image

Having an issue with my CSS. I'm trying to create a scrolling background for the left section of my website.

The RGBA is currently overlapping the entire page, but I only want it to overlap the background image. The same goes for the gridtile (the overlay image).

Is there a way to achieve this?

If not possible with CSS, I'm considering using HTML to create this effect. But I'd like some advice on what's better: CSS or HTML, while ensuring it stays mobile-friendly.

body {
background:linear-gradient( rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75) ),url("https://i.sstatic.net/gP9FG.png") fixed,url("http://placehold.it/180x50") fixed repeat-y;
}

https://i.sstatic.net/iscbv.png

htmlcss

Answer №1

To implement the CSS styling, I have created a new DIV element and applied the same CSS code used in the original snippet to it.

For integrating this solution into a WordPress child theme, follow these steps:

In your functions.php file, add the following code:

function add_custom_div() {
    echo '<div class="sidebg"></div>';
}
add_action('before_end', 'add_custom_div');

Next, insert this code in the footer.php file of your framework/primary theme before the closing </body> tag:

do_action('before_end');

Remember to reapply this customization each time the developers release updates for the theme or framework.

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

Reduce the line length for better readability

Looking for a way to make a button with flexible width while allowing text to wrap to 2 lines for minimum button size? Check out the examples below: To keep the button width small, even short words should wrap to 2 lines: My Button If there's a ...

css

Is it acceptable to assign unique names to individual arrays within a multidimensional array?

I was curious about the possibility of naming arrays within a multi-array, similar to how it can be done with individual arrays. For example: var cars = new Array(); cars[0] = "Saab"; cars[1] = "Volvo"; cars[2] = "BMW"; I was wondering if there was a way ...

javascripthtml

arranging a collection of images based on their values in increasing order

cardShop is a container with various images, each with its own unique ID and value attribute. These values consist of two numbers separated by a comma, such as 2000,500 or 1500,200. My goal is to sort these images in ascending order based on the first numb ...

javascripthtml

The problem arises when trying to use the Jquery click event on buttons that have been generated

I've encountered an issue where I can create components dynamically, but the click event doesn't seem to work on buttons that are dynamically generated. Check out the code snippet below: HTML file: <div class="merge_sections">&l ...

javascripthtmljquery

How can I wrap text in Angular for better readability?

I've created a calendar in my code that displays events for each day. However, some event descriptions are too long and get cut off on the display. Even after attempting to use Word Wrap, I still can't see the full text of these events unless I c ...

htmlcssangulartypescriptword-wrap

Issue with iframe's size not displaying correctly

<body> <script> document.write("<iframe id='theframe' src='http://www.website.com?testvr=" + testvr + " height='900' width='500'></iframe>"); </script> </body> The iframe is added, but ...

javascripthtmliframe

sticky header on pinned tables in a React data grid

I have combined 3 tables together, with the middle table containing a minimum of 15 columns. This setup allows users to horizontally scroll through the additional columns conveniently. However, I am facing a challenge in implementing a sticky header featu ...

javascriptcssreactjstypescriptsticky

Click the button to dynamically add a Bootstrap select element

I need assistance creating a select element with a Bootstrap class using a button click event. The element is successfully inserted into the body, but it does not appear on the page. https://i.sstatic.net/ppHfL.png <html> <head> <link re ...

javascripthtmlbootstrap-4

When making Axios GET requests, HTML receives promises that may remain empty

I've spent the entire day trying to figure out why this isn't working. Here's a simplified version of the HTML table using Vue v-for: <table id="timeSheet-datatable" class="table table-striped dt-responsive w-100"> ...

javascripthtmlvue.jsasync-await

Attempting to design a unique CSS ribbon but hitting a roadblock with getting the perfect curve just right

I have attempted to create a CSS shape (ribbon) using border radius, but I am struggling to achieve the desired curve. The curve I manage to create does not exactly match the curve of the div in the image. background: #008712; width: 89px; height: 22p ...

htmlcsscss-transformscss-shapes

Accessing an object from a webpage using Selenium: A step-by-step guide

Today marks my debut using Selenium IDE, and I must admit that my knowledge of web development is limited. My team is currently working on a website, and as part of my task, I need to write tests for it. The website features several charts showcasing data ...

htmlcssseleniumselenium-ide

The simplest way to increase the size of a child element in order to generate a scrollable area

When working with HTML, it's important to consider how the size of a child div affects the parent div. If the child div is larger than its parent, scrollbars will appear on the parent div if the appropriate style rules are set. However, I'm inte ...

javascripthtmlcssresizescroll

The duplicate code is failing to display any output

Welcome to my first question here! Please excuse any rookie mistakes. I am currently working on a specialized calculator using HTML, JS (with jQuery), and CSS. This calculator is designed to handle multiple inputs and perform various calculations on a sing ...

javascripthtmljqueryinput

How can I create a table using a loop and an onclick function for each <td>?

I have written code to create a table in PHP using a loop. I want to add an onclick function to each cell so that when a particular cell is clicked, the background color changes. However, I am encountering an error. Am I doing something wrong? <head& ...

javascriptphpjqueryhtml

Tips for zooming to the middle of a div element

I'm trying to figure out how to create a zoom in effect on my large div, but I haven't been successful despite searching through many resources. My goal is to zoom into the center of the user's screen rather than just at a set position. ht ...

javascriptjqueryhtmlcss

Is it Possible to Stack Multiple Rows of Images with HTML5/CSS3?

I am struggling to arrange images in rows, but I'm facing unexpected outcomes. The images only break to a new line when the page is filled. I attempted to use overflow:hidden, however, the expanding images end up hidden under white space. I can't ...

htmlcssimage

Implement a JavaScript confirm dialog for a mailto hyperlink

Is there a way in javascript to automatically detect mailto links on the page and prompt a confirmation dialog when clicked by a user? I came across a method on this website for displaying an alert message. My knowledge of javascript is very basic. It&ap ...

javascriptjqueryhtmlmailtoconfirm

What is the best way to add a listener for a modification of innerHTML within a <span>?

How can I detect changes inside a particular <span> element in order to attach a handler, but so far have been unsuccessful? Below is the HTML snippet: <span class="pad-truck-number-position"><?php echo $_SESSION['truckId']; ?> ...

javascriptphpjqueryhtml

Enhancing images by creating clickable sections in a more organized and efficient manner

Are there any other methods to make parts of an image clickable in a more organized way, aside from using the coordinates method or directly embedding images from Photoshop? <script> new el_teacher = ["candice","john"]; $(".teacher1").mouseenter(fu ...

javascriptjqueryhtmlcssclickable

What steps should I follow to customize the Bootstrap link template according to my requirements?

In the bootstrap documentation, the links are shown in blue by default. I want them to be white instead. How can I make all the links white if the documentation is ignoring my CSS files? ...

cssfrontendbootstrap-5