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

What is the best way to create a view that caters to both administrators and regular users?

Currently, I am developing a system in Django which displays different fields and options based on whether the user is an administrator or a Jefe from the table. The administrator can access the panel in Django. class UsuarioCrear(SuccessMessageMixin, Crea ...

htmlpython-3.xdjangopostgresql

Display the HTML tag inside a cell of a mat-table

I am currently exploring options to display an HTML tag within a cell of a mat-table in Angular. My goal is to show a colored circle next to the cell value. I have searched online for solutions, but haven't found one that works. If anyone has any insi ...

htmlangularmaterial-uitagsangular-material-table

Having trouble opening a local file through a link on a local webpage

I'm encountering an issue with linking to a file on the network through a local webpage. I created a basic HTML page with a hyperlink: <a href="h:\myfiles\dir#1\file1.s">View File</a> When I click on the link, I receive an ...

htmlhyperlinkspecial-characterslocal

Steps to Import an Image from a Subdirectory:

Currently, I am working on C# and HTML. While working on a view page, I encountered an issue when trying to load images from subfolders. When attempting to load an image from the immediate folder, it opens correctly. For example: <img data-u="image" s ...

c#html

Creating an external JavaScript and CSS file for date picker in Eclipse can be done by following a few simple steps. By creating separate files for the

I am using the following javascript and css styles: <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jq ...

javascriptjqueryhtmlcsseclipse

How can you refresh the .replaceWith method in jQuery?

Is there a way to reset the .replaceWith function so that the html, css and javascript elements are restored to their original state? I am looking to have an icon replace the text when the user clicks on "contact", and then have the text return when the u ...

javascriptjqueryhtmlcssreplacewith

Creating evenly spaced PHP-generated divs without utilizing flexbox

My goal is to display images randomly from my image file using PHP, which is working fine. However, I am facing an issue with spacing the images evenly to fill the width of my site. This is how it currently appears: https://i.stack.imgur.com/AzKTK.png I ...

javascriptphphtmlcss

Continue scrolling once you reach the fixed-positioned div

live demo html <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> css .container{ margin: 0; padding: 0; ...

jqueryhtmlcss

Attempting to output numerical values using Jquery, however instead of integer values, I am met with [Object object]

I am struggling to figure out how to display the value contained in my object after attempting to create a Calendar using Jquery. I attempted to use JSON.toString() on my table data, but it didn't solve the issue. Perhaps I am not placing the toString ...

javascripthtmljquerycss

Getting rid of the border on a material-ui v4 textbox

I am currently using Material-UI version 4 and have not upgraded to the latest mui v5. I have experimented with various solutions, but so far none have been successful. My goal is simply to eliminate or hide the border around the textfield component. < ...

cssreactjsmaterial-ui

Could anyone explain to me why the "thumbnails" in my code link are not aligning in a row format as intended?

Why are my "thumbnails" not aligning correctly in the row format I want on this code link? <div class="row"> <div class= "col-md-6"> <div class="thumbnail"> <a target="_blank" href="http://codepen.io/ ...

html

"Clicking on the dropdown menu will consistently result in it collapsing

When it comes to a DropDown menu, the typical expectation is that when an option is selected, the menu will collapse. However, in my situation, I do not want the dropdown menu to collapse if the user is attempting to log in and clicks on the Username and P ...

javascripthtmlcss

Spin the text inside an <li> element generated by JavaScript

I am currently working on a unique script designed to create a custom number of slices for a circle. The items in the circle are being displayed as shown in this generated circle image. This is the Javascript code I have been using: for () { men ...

javascripthtmlcss

Refreshing Div Element with PHP AJAX POST请求

It's me again. I'm feeling really frustrated with this code, it's starting to get on my nerves. I don't mean to keep bothering you, but I finally figured out where the issue was in the code and now I just need a little help with the fin ...

phpjqueryhtmlajax

Include a hyperlink to a website that was created with the help of Photoshop

Is it feasible to incorporate a hyperlink into a website that was designed using Photoshop templates? In the past, creating templates in Photoshop and then adding links with tools like Dreamweaver was common practice. I believed that dynamically adding li ...

phphtmlweb-deployment

Animations are failing to run within a Bootstrap card when using Vue rendering

I have utilized Bootstrap cards to display pricing information in my project. I implemented a collapse feature for half of the card when the screen size is equal to mobile width. While using vanilla Bootstrap, the animation worked seamlessly with the col ...

javascriptcssvue.jsbootstrap-4

Show the current temperature data retrieved from the weather API

I'm trying to figure out what's causing the issue with the temperature not displaying. Can anyone help me identify and fix the error? <script type="text/javascript"> $.ajax({ url: 'https://api.weather.gov/gridpoints/EWX ...

javascripthtmljsonajaxapi

Image Handpicked by JCrop User

Successfully implemented JCrop example code for selecting an area on an image with a preview and getting coordinates. However, the challenge lies in allowing users to select an image from their file system, display it in the browser, and perform the afore ...

javascriptjqueryhtmlimagejcrop

The issue of CSS and PHP header include file not adjusting to device size and exceeding the full width of the screen

This included code is a snippet from a header file for a website. <head> <link rel="shortcut icon" href="favicon.ico"> <meta charset="utf-8" /> <title>Test Site | Foo The Bar </title> <link rel="stylesheet" href="csss_stan ...

phpcssmobile

Conceal All Other Divs upon Clicking on a New Div Bearing the Identical Class

I'm having trouble implementing the feature that closes other divs when I click on a new div with the same class. It seems like it should be straightforward, but for some reason, it's not working for me. Here is the link to the fiddle where I&apo ...

javascriptjqueryhtml