Link to home
Start Free TrialLog in
Avatar of Jazzy 1012
Jazzy 1012

asked on

Put shading on half of picture

This is what I want: (image1)

User generated image
This is what I have:
User generated image
How can I put it on the picture not after?
    <header>
        <div class="header-content">
            <div class="header-content-inner">
                <br> <br> <br>
                <a href="#services" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
            </div>
        </div>
    </header>
    
         <div class= "container-fluid1">
        gfhgjgj
        <br> <br> dsuifguidfghifdhgifdghifhg
        </div> 

Open in new window


I tried putting it inside header but then it just went on top and ruined the page.
Here is my css for container-fluid1
.container-fluid1{
	background: rgba(30, 30, 30, .5);
    margin: auto;
}

Open in new window

Avatar of Carlos Llanos
Carlos Llanos
Flag of United States of America image

You need something similar to this in your css to produce the gradient:

background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

Open in new window


When I need a graident I simply google for a gradient maker like: Ultimate CSS Gradient Generator and make my gradient there. Then I apply it to my css in the location I need it. You will need to adjust the colors and positioning.
Avatar of Jazzy 1012
Jazzy 1012

ASKER

Ok i put this css in container-fluid1?
I tend to do that, but only if the image you are overlaying is the background image for another div. Then it will work. If it is not, then you will need to come up with a different solution.

But you can use a margin-top: -5rem or something like that to slide the div with the overlay up and over the background image and it should work well for you.
I cant overlay it
Can you send us what you have right now for your code and css, and even how that image is rendered in the background? We were missing that piece before.
Avatar of Julian Hansen
I cant overlay it
Can you explain why not?
Another option is also to do it with a real image of 1px wide and the desired height and with the desired transparency, repeating on the x axis.

Anyway, the solution is always the same, apply it to a div and put it on top of the original image.

The only problem is if the image is part of a carousel or something, then you'll have a problem with the mouse click.
In that case, use a carousel component that already does that for you... there are plenty.

Cheers!
Alex
ASKER CERTIFIED SOLUTION
Avatar of Carlos Llanos
Carlos Llanos
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial