Adjusting the size of the background image without altering the background color

I am looking to create a background with a gradient color and an overlay background image. The image is simply a transparent icon, but I need to adjust its size without altering the overall background dimensions.

Any assistance on this matter would be greatly appreciated!

 .bg {
 background:url(http://icons.iconarchive.com/icons/graphicloads/100-flat/256/announcement-icon.png) no-repeat, linear-gradient(#1cd0d0 10%, #79dcc5 80%, #3bbdb18c 100%); 
 background-repeat: no-repeat;
 background-position: center; 
  }
<div class="bg">
  hi
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

htmlcssbackground-image

Answer №1

When defining your background:, it's important to note that you have two backgrounds set up. To apply the background-size property to the first background, it should be written as position/scale:

.bg {
 background:
 url(http://icons.iconarchive.com/icons/graphicloads/100-flat/256/announcement-icon.png) no-repeat center/30%,
 linear-gradient(#1cd0d0 10%, #79dcc5 80%, #3bbdb18c 100%);
 
 background-repeat: no-repeat;
 background-position: center;
 }
<div class="bg">
 hi
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

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

Javascript menu toggle malfunctioning with sub-menus

I am in the process of creating a responsive menu for a complex website. The horizontal menu transitions into a vertical layout on smaller screens, with javascript used to toggle the sub-menu items open and closed when clicked. One issue I am facing is wit ...

javascriptjqueryhtmlcssmenu

Tips on showcasing lengthy string content from JSON in a structured list format using react with typescript

Is there a way to display long string data from a JSON file in a list format when the description string is too lengthy? How can I split or format the description using React and TypeScript? The JSON data I have is as follows: "options": [ ...

htmlreactjsregextypescriptreact-redux

There seems to be an issue with the functionality of the JavaScript Quiz as it is

While working on my JS quiz, I encountered an issue where some answers were not displaying due to quotes and the need to escape HTML characters. Additionally, I am facing difficulty in accurately awarding points or deductions based on user responses. Curre ...

javascripthtmlcss

Conquering Bootstrap 3's Image Gallery Customizations

I am currently working with Bootstrap 3 RC1 and struggling to set up the image gallery properly. Issue 1 - The ul is adding unnecessary padding-left or margin-left. What do I need to do to eliminate this? Issue 2 - Each li is extending across the contain ...

htmltwitter-bootstrap-3

Styling Your PHP Output with Echo

Is there a way to create a compact text box with a scroll bar that can display recurring data generated by PHP activities on the server side? How can I format it in this way? ...

phphtmlcss

Utilize Jquery for Parsing a Json Document

I am currently facing challenges parsing a JSON file into my HTML page. Below is the structure of my JSON file: { "menu":[ { "id":"contact", "leaf":true, "description":"testing", "link":"", "content":" ...

jqueryhtmljson

Connect the front end files, including HTML, CSS, and JavaScript, to the Node.js backend

I'm a beginner in web development and recently completed an online course on node.js and express. However, the course didn't cover how to add HTML, CSS, and JS files when using Node. I attempted the following: var express = require('expres ...

javascripthtmlcssnode.jsexpress

What is the best way to access the camera of a mobile phone through a web application?

Whenever I try to access the camera on my mobile device through a web app, I encounter an issue. While the camera works perfectly fine on the web version, it fails to show up on my mobile device unless I add https:// in the URL. How can I resolve this prob ...

javascripthtmlcameraqr-code

My attempts to load the .mtl and .obj files using THREE.js have been unsuccessful

I've been working on creating a 3D model viewer using three.js, but I'm encountering issues with loading .mtl and .obj files. Despite following a tutorial at , the only model that loads successfully is the female one. Here is the code snippet I ...

javascripthtml3dthree.jsobjloader

How to create a dynamic background color animation in jQuery similar to a progress bar animation

I have a container with text content (for example: My Name) and it is displayed in a RED background color along with a button. What I am looking for : When the button is clicked, I want to change the background color of the container from RED to BLUE, si ...

jquerycssjquery-uiprogress-barjquery-effects

Text in React Native exceeding one line is causing it to extend beyond the screen boundaries

I am having trouble displaying the last messages in my simple contact list as the text is getting cut off the screen. Below is the code I am using: (the readableTimestamp should be positioned behind the text.) View style={{ fontSize: 16, backgro ...

cssreactjsreact-native

Enhancing the smoothness of parallax scrolling

My header is going to be twice the height of the viewport. I added a simple parallax effect so that when you scroll down, it reveals the content below. However, I'm experiencing flickering in the content as I scroll, possibly due to the CSS style adju ...

javascriptjqueryhtmlcss

Incorporating CSS and JS files into a WordPress theme

To incorporate Css & Js files into my website pages, I plan to insert the following code into the functions.php file: function cssjsloading(){ wp_enqueue_style('bootstrap-rtl', get_template_directory_uri() . '/css/bootstrap-rtl.css&apo ...

phpcsswordpresswordpress-theming

Mastering the art of utilizing the LESS preprocessor with React Create-React-APP

Is it possible to implement the LESS preprocessor in my create-react-app project? In my React code, I have the following: ReactDOM.render( <form> <input type="email" data-info="Enter Email" pattern="/\S+@\S+\.\S+/ ...

cssreactjslesscreate-react-app

Integrating content from a separate PHP page into the main index PHP page

I can't seem to get the #container1 div on my index.php page to load with the content from another #container2 div on page1.php. It's frustrating because I've checked my file hierarchy and everything seems correct. This is how my files are ...

javascriptphpjqueryhtml

Tips for adjusting div content to fit a fixed height on all devices

Looking to adjust the size of the #left-content div based on the height of the window, while ensuring that all content is visible within the fixed #left-bg. However, when viewing on mobile or tablet devices, the content appears hidden. .left-bg{ backgro ...

javascriptcsshtml

Ways to immediately display an uploaded image as the background on a canvas

Using TypeScript, I am attempting to set an uploaded image as the background of a canvas. However, I am facing an issue where the image only loads properly after the user has uploaded it two times. How can I ensure that the image has finished loading befor ...

htmlangulartypescript

Bootstrap: Easily align elements to the right with the .pull-right class, avoiding the need to manually adjust margins

This is the code snippet I am working with (you can view the fiddle here): <div class='container'> <div class='hero-unit'> <h2>Welcome</h2> <p>Please log in</p> <div i ...

htmlcsstwitter-bootstrap

The backend error message isn't triggering an alert!

My current issue involves using jQuery to execute a .php file. Whenever an error occurs in the backend, I want to display an alert message with the error details. However, when intentionally submitting with an error, no alert pops up and it just proceeds t ...

javascriptphpjqueryhtmldatabase

What are the steps to make the chosen title and its content active while deactivating the others?

I am currently developing a website for an educational institution that includes schools with subdivisions such as matric, CBSE, and state board, as well as a college. My goal is to create a user interface where clicking on a specific stream (such as matri ...

jqueryhtmlcsstwitter-bootstrapnav-pills