Markup for the web with a foundation of base color for the background

Currently facing a small problem. I am looking for a way to establish my background color as RGB(151,151,151) and integrate it into the following code which is shown below:

body {
    background-image: url(sd_back2.jpg);
    background: -webkit-radial-gradient(circle closest-corner at 40% 70% , #ffffff 15%, rgba(151,151,151,0.5) 50% );
    background: -webkit-radial-gradient (circle closest-corner at 80% 40% , #ffffff 15%, rgba(0,0,0,0) 30% );
    background: -webkit-radial-gradient ( closest-side at 10% 20% , #ffffff 20%, rgba(0,0,0,0) 45% );
    background: -webkit-radial-gradient (farthest-side at 90% 10% , #ffffff 15%, rgba(0,0,0,0) 40% );
    background-color: rgb(151,151,151);

If you notice any other issues, please feel free to inform me. Thank you.

csscolorsbackgroundradix

Answer №1

To achieve the desired effects, it is recommended to group the background image and radial gradients together into a single background property

Consider trying this out:

body {
    background: url(sd_back2.jpg),
        radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%),
        radial-gradient(closest-corner at 80% 40%, white 15%, rgba(0, 0, 0, 0) 30%),
        radial-gradient(closest-side at 10% 20%, white 20%, rgba(0, 0, 0, 0) 45%),
        radial-gradient(5% 5% at 90% 10%, white 15%, rgba(0, 0, 0, 0) 40%);
    background-color: rgb(151,151,151);
}

This approach will consolidate all the effects without one overwriting the other.

Answer №2

Can you clarify what you mean by "set as a base"? If your goal is to have a fallback color in case the gradient doesn't work, simply replicate the same steps you've already taken...

body {
    background-image: url(sd_back2.jpg);
    background: -webkit-radial-gradient(circle closest-corner at 40% 70% , #ffffff 15%, rgba(151,151,151,0.5) 50% );
    background: -webkit-radial-gradient (circle closest-corner at 80% 40% , #ffffff 15%, rgba(0,0,0,0) 30% );
    background: -webkit-radial-gradient ( closest-side at 10% 20% , #ffffff 20%, rgba(0,0,0,0) 45% );
    background: -webkit-radial-gradient (farthest-side at 90% 10% , #ffffff 15%, rgba(0,0,0,0) 40% );
    background-color: rgb(151,151,151);
}

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

Styling in Next.js with conditions

I am attempting to create a scenario where a link becomes active if the pathname matches its href value. function Component() { const pathname = usePathname(); return ( <div className="links"> <Link href="/"> ...

cssnext.js

Display a particular div upon clicking a specific link, while concealing the other divs

As a beginner in the world of jQuery and coding, I'm encountering some difficulties that I need help with. My goal is to have the 'Vlogging' link activated and show 'Details 1' when the page loads. Then, upon clicking on either &a ...

javascriptjqueryhtmlcss

Is there a way to reverse the animation playback in Angular?

I am working on an animation that involves a box fading from its original color to yellow. However, I would like to achieve the opposite effect: when the page loads, I want the box to start off as yellow and then fade back to its original color. The challe ...

javascriptcssangularanimation

Why must the sidebar be displayed horizontally on the smartphone screen?

I've been struggling to make the sidebar menu on my smartphone display horizontally with icons at the top and text at the bottom. I've tried using flex and other methods, but it still doesn't work sideways. Am I missing something? const s ...

javascripthtmlcssbootstrap-5

What is the process for adjusting the horizontal position of a flexbox using CSS?

Currently experimenting with flexbox to better understand its functionality. I have created the following layout: https://i.sstatic.net/rxvFD.png using the code provided below: .container-1 { display: flex; flex-direction: row; } .container-1 div ...

cssflexbox

"Expanding Your Design: Manipulating Text Size and Padding with CSS

I am facing an issue with my buttons that are meant to look uniform. One button contains the word "Register" and the other contains "Details". Due to this, the button with the longer word appears bigger, which is not desired! My goal is to make both butt ...

htmlcss

Issues persist with padding in TCPDF

I am currently using TCPDF to convert HTML into PDF format. Unfortunately, I have encountered an issue where I am unable to add padding to my table. The text within the table collapses with the borders, and I have found that TCPDF does not support certain ...

phphtmlcsstcpdf

Issue with the height of Bootstrap 4 navigation bar

After deciding to use Bootstrap 4 for my current project, I encountered an issue with the navbar. It seems to expand too much, which is only happening once I deploy the website. Can anyone help me figure out what's causing this problem? Below is the c ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Move an object in relation to the right boundary of the viewport

I have a div that starts off the screen due to this CSS code: transform: translateX(100%); Now, I am looking to bring this div back into view by a specific distance from the right side. Although I have tried using transform: translateX(-450px), it seems ...

csscss-transforms

What is the best way to calculate the width for each of the three elements in a row so that they all have 300px

Creating my own framework using flexbox has been an interesting journey. One of the major challenges I faced with flexbox is when dealing with an odd number of elements in a row, such as 3, 5, or 7. To tackle this issue, I decided to use JavaScript/jQuery. ...

javascriptjquerycssflexbox

Utilizing Jquery for independently blinking text counters

Whenever the user presses a button, a message is created and blinks 5 times. However, each time the button is pressed, all previous messages also blink along with the new one. The goal is to make only the new message blink individually 5 times upon each bu ...

javascriptjqueryhtmlcss

How can I style the iOS Gmail app specifically using CSS?

I have discovered techniques to target the Gmail App on Android, as well as methods to target iOS. However, I am having trouble finding a way to specifically target the Gmail app on iOS. Is there a solution for this? Thank you! ...

cssiosemailfrontendgmail

Design of website built on Bootstrap framework seems distorted on Firefox browser

I built this website with the help of Bootstrap and you can view it at js-projects. Everything looks great when I open it in Chrome or Safari, but there are weird white strips that resemble scroll bars when I view it in Firefox. Can someone assist me in ...

cssfirefoxtwitter-bootstrap

Javascript toggle navigation with sliding and fading effects

Tap on the flower to reveal the menu. I have successfully implemented the animation for "process" fading in after the menu opens. However, I am struggling to reverse the animation when collapsing the menu. I want "process" to fade out before the menu close ...

javascripthtmlcss

Having difficulty modifying the width of the BODY element using CSS

For my webpage, I want the body to have a silver background that fills only 75% of the page. This means that only 75% of the page will be painted silver, while the remaining part will be left unused and painted according to the browser's defaults. The ...

cssdocument-body

Can a person select a characteristic like "height" using Javascript?

Is it doable to set a height for an image in CSS, then detect this gradient using JS and double the width based on the height x2.25? Could this be achieved? ...

javascriptcssattributesscale

The words overlaid on the image spill out beyond its edges

I want to create a design where the text flows outside of the image and continues into another container. After some trial and error, I managed to achieve a layout where the text seamlessly extends beyond the image and into a separate section. Ideally, the ...

htmlcssbootstrap-4

Tips for adjusting the font size options within the Autocomplete feature of Material UI Version 5

Is there a way to adjust the font size of the drop-down items? I have tried various methods to change the font size, including: How do I change Material UI Autocomplete font size? How to change fontsize of options in Material ui autocomplete? Unfortuna ...

cssreactjsmaterial-uiautocomplete

Excessive space above and below content while navigating on mobile devices

I'm in the process of creating a new website and I want the navbar to stay fixed at the top when scrolling. The issue is that on mobile devices, there is white space either at the top or bottom when scrolling. The problem arises because I have a side ...

cssbootstrap-4

Maintain the anchor's appearance when it lacks an href attribute

I have created an anchor element that I'm using with a button role, so I haven't included the href attribute. <a (click)="doSomething()" role="button">Some data></a> When no href is set on an anchor element in Bootstrap, it lose ...

htmlcsstwitter-bootstrapbootstrap-4anchor