Is there a way to create a vibrant, multicolored background without the use of images?

I am currently developing a mock website and have encountered an issue. Here is the Wix webpage I am using as a reference. My goal is to create multicolored div boxes at the bottom of my webpage where I can overlay text. However, I am struggling to achieve this. Whenever I try to create a div, it ends up covering my background image. Any advice on how to accomplish this task would be greatly appreciated. Thank you in advance for your assistance.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Keith Consulting</title>

    <style>
        body {
            background-image: url("https://66.media.tumblr.com/d0914fab2603665235669293d3b61c37/tumblr_os8sx9UAHb1slhhf0o1_1280.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            background-position: bottom;
            font: 15px/1.5, helvetica, sans-serif;
        }

        p,
        h1,
        h3 {
            text-transform: capitalize;
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }

        /*--------------header----------------*/


        header {

            background-color: cornflowerblue;
            color: white;
            padding-top: 30px;
            min-height: 50px;
            text-transform: capitalize;

        }

        header ul {
            padding: 0;
            margin: 0;
        }

        header li {
            display: inline;
            padding: 0 20px 0 20px;
        }

        header li a {
            color: blue;
        }

        header nav {
            float: right;
            margin-top: 15px;
        }

        header #branding {
            float: left;
            margin-bottom: 25px;
        }

        header #branding h1 {
            margin: 0;
        }

        header .highlight,
        header .current a {
            color: lavender
        }

        /*-------------------------------*/


        
    </style>
</head>

<body>
    <header>
        <div class="container">
            <div id="branding">
                <h1>keith<span class="highlight"> consulting</span></h1>
            </div>
            <nav>
                <ul>
                    <li class="current"><a href="#">home</a></li>
                    <li><a href="#">about</a></li>
                    <li><a href="#">services</a></li>
                    <li><a href="#">project</a></li>
                    <li><a href="#">clients</a></li>
                    <li><a href="#">contact</a></li>

                </ul>
            </nav>
        </div>

    </header>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body></html>

Answer №1

Perhaps this information could be beneficial to you?

If you are looking to make elements partially transparent (a.k.a. "multicolored"), you can achieve this effect using rgba color values.

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

Can I create interactive stacked shapes with CSS and/or JavaScript?

Trying to explain this may be a challenge, so please bear with me. I need to create an "upvote" feature for a website. The number of upvotes is adjustable in the system settings. The upvote controls should resemble green chevrons pointing upwards. For exa ...

jQuery not displaying Div elements as expected

After experimenting with the Coverflow technique and adapting it to work with a div, I have encountered a slight issue. Below is the HTML code I am using: <html> <head> <meta http-equiv="Content-type" content="text/html; ...

Unlocking fashion with $refs: A step-by-step guide

After using console.log(this.$refs['block' + row + column]);, I confirmed that I can successfully access the HTML element it refers to. https://i.stack.imgur.com/7KYqB.png However, when attempting to access the element's style using variou ...

Tips for resolving a double click issue with a jQuery slide up/down animation

When I click a button, there is an animation that makes a div slide up and then down again. It functions the way I want it to, but the first time you click it, it doesn't work; you have to click twice for it to respond. Someone recommended using... ...

The optimal placement for Bootstrap-4 scripts and tags

There have been numerous discussions on this age-old topic, and despite reading many of them, I am still unsure... Where is the best place to locate the bootstrap-4 JS scripts for optimal performance, and what are the best script tags to use (defer/async) ...

Passing dynamically loaded parameters to a function during dropdown value selection in Angular 2

Could you please review if I am passing the parameters correctly in the li tag's click function of the updateId method? The console errors only point to that line. This is my app.component.html code: <div class='form-group' style="width ...

Ways to change the role link in child elements inherited from the parent in terms of Accessibility

How can I create a tooltip with dynamically added tooltip content div requiring a role link for the aria label to be appended as needed? The initial HTML of the tooltip before expansion is: <div class="tooltip" tabindex="0" aria-expa ...

Angular's ability to support multiple controllers

Help needed! I am new to Angular and struggling to apply multiple controllers to my table. These controllers belong to different modules, specifically from the npm install module called angular-table-resize. However, the table resize feature doesn't s ...

How can you use PHP to dynamically create a table with custom row sizes?

Trying to brainstorm a simple way to generate an HTML table with rowspans using PHP. Ideally, I want it to resemble the following structure, with each number representing the cell's rowspan: Upon observation, I've identified a potential pattern ...

Is there a way to prevent my cell from resizing during the initiation of a jQuery animate effect?

After coding a 2x2 DIV table, I encountered an issue where the left side of the cell appears when hovering over the right cell. However, the left cell is hidden when the mouse leaves the right cell, utilizing a jQuery animate effect. I'm facing a pro ...

Adjust image size based on window dimensions changes

Let me demonstrate the issue I'm facing with this demo. This demo shows a simple list of images that scrolls across the page. When you click on an image, a larger version appears above it in a lightbox style. I want the height of this larger image ...

Vertical centering not functioning as expected due to issues with margin-top and margin-bottom

I'm having trouble centering my red block in the middle of the webpage, with the footer block at the bottom and the white block between them. Oddly enough, margin-top doesn't seem to be working for me, but left and right are functioning fine. Al ...

Checking File Upload Progress in HTML and PHP

As a newcomer, I've been struggling to find a solution to an issue I'm facing. My concern is regarding a form that is meant to upload a file and send it via email. How can I display the progress status of the file being uploaded? It seems that us ...

Displaying VueJS property inside an array of HTML elements

Currently, I am working with an HTML array that contains the following data: data-groups='["category_all", "data goes here"]' In my project, there is a prop named "title" that holds the specific string needed to be displayed in the "data goes he ...

The integration of a Bootstrap modal within the side bar's rendering

Struggling with a modal appearing inside my side div and can't find any solutions in the bootstrap5 documentation or online forums. https://i.stack.imgur.com/gHsBi.png I just want the modal to display centered on the page with the background fade ef ...

Enhance your FullCalendar experience with beautifully crafted tooltips

How do I implement a tooltip design on a full calendar? I need the tooltip to appear when hovering over an event in the calendar. Any assistance with this issue would be greatly appreciated. Thanks in advance! //reference <link rel="stylesheet"hr ...

Fixing the issue: "Tricky situation with JavaScript not working within Bootstrap 4's div tag while JS functions properly elsewhere"

Currently, I'm working on implementing a hide/show function for comments using JavaScript. Fortunately, I was able to find a helpful solution here (thanks to "PiggyPlex" for providing the solution on How can I hide/show a div when a button is clicked? ...

When utilizing ng-content alongside *ngtemplateOutlet, the content does not appear visible within the DOM

I'm working with three Angular components - a base component and two child components (child1 and child2). The structures are as follows: child1.component.html <ng-template #child1Template> <div> <h1>CHILD 1</h1> ...

The DOM lacks the assigned 'id' in the HTML

While working in the Moodle platform (version 3.5.7) using the Atto editor in both Chrome and Firefox, I have been attempting to assign an ID to a specific row class called "span9". My main goal is to give this element a unique ID and then reference it wit ...

Embarking on the journey of transitioning code from server-side to client-side

Currently, I am looking to transition the code behind section of my asp.net web forms application to client-side ajax or javascript - still deciding on which route to take. The main goal for this change is to ensure that the application remains functional ...