Jazzy 1012
asked on
Put shading on half of picture
This is what I want: (image1)
This is what I have:
How can I put it on the picture not after?
I tried putting it inside header but then it just went on top and ruined the page.
Here is my css for container-fluid1
This is what I have:
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>
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;
}
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.
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.
ASKER
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.
I cant overlay itCan 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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.