logo
down
shadow

Fading out/color overlay on background image


Fading out/color overlay on background image

By : user2954683
Date : November 22 2020, 10:31 AM
To fix this issue JSFiddle
I removed your inline background-image for the .faces and replaced it with
code :
background-image: linear-gradient( rgba(0,0,0,0.7), rgba(0,0,0,0.7) ), url('http://i.huffpost.com/gen/1697767/thumbs/o-GAME-OF-THRONES-facebook.jpg');


Share : facebook icon twitter icon
Overlay a background-image with an rgba background-color

Overlay a background-image with an rgba background-color


By : user6348359
Date : March 29 2020, 07:55 AM
Hope that helps The solution by PeterVR has the disadvantage that the additional color displays on top of the entire HTML block - meaning that it also shows up on top of div content, not just on top of the background image. This is fine if your div is empty, but if it is not using a linear gradient might be a better solution:
code :
<div class="the-div">Red text</div>

<style type="text/css">
  .the-div
  {
    background-image: url("the-image.png");
    color: #f00;
    margin: 10px;
    width: 200px;
    height: 80px;
  }
  .the-div:hover
  {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url("the-image.png");
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
  }
</style>
How to have a background-color overshadow/transition ontop of background-image without a overlay mask?

How to have a background-color overshadow/transition ontop of background-image without a overlay mask?


By : Bhaskar Islam
Date : March 29 2020, 07:55 AM
it fixes the issue
Is there a way to animate the color to overshadow the image and animate it to full opacity (white) when hovered?
code :
var image = document.createElement("div");
image.className = "item-content";
image.style.backgroundImage = "url(http://lorempixel.com/200/200)";
document.getElementById('wrap').appendChild(image);
.item-content {
  width:  200px; height: 200px; border: 2px solid #021a40; 
  background-size: 100% 100%; background-color: white;
  background-blend-mode: color-burn;
  transition: background-color .5s;
}
.item-content:hover { background-color: transparent; }
<div id="wrap"></div>
Want to create a transparent color overlay over background image but want everything infront of overlay

Want to create a transparent color overlay over background image but want everything infront of overlay


By : Ruggero Barsacchi
Date : March 29 2020, 07:55 AM
I wish did fix the issue. I would use thepios answer but use :before to get rid of the unnecessary overlay div:
code :
body {
  width: 100%;
  height: 100%;
}
.content {
  position: relative;
  width: 500px;
  height: 500px;
  background-image: url('http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg');
  background-size: cover;
  padding: 50px;
}
.content:before{
  content: ' ';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.inner-content {
  width: 250px;
  height: 250px;
  padding: 20px;
  background-color: #FFFFFF;
  color: #000000;
  position: absolute;
}
<div class="content">
  <div class="inner-content">Your inner content</div>
</div>
background image with text overlay and background color responsive even to 4k screens

background image with text overlay and background color responsive even to 4k screens


By : user3608325
Date : March 29 2020, 07:55 AM
I hope this helps . There are multiple ways to achieve this. I would probably go for a solution like this:
Since you want the background color to have the same height as the background image element, the element with the background color needs to get its height from the background image element. That means, the background image element should be inside the element with the background color. The background image element is a 100% wide, but has a max-width. That way to image never becomes to big and shrinks on smaller screens. You need to use the padding-bottom trick to set the height of the background image element. You could avoid that by using an image element, but that's a question of semantics.
Fade in a div's background-image (not the body or fading out a background-color)

Fade in a div's background-image (not the body or fading out a background-color)


By : brad
Date : March 29 2020, 07:55 AM
Any of those help You need two divs. The first one has no background color and the second one has a background image. Fade the second one (Asherlc proposed a way) and you're done.
Related Posts Related Posts :
  • Font acting differently on IE and Firefox
  • Encoding and decoding of the character references
  • An Image Button navigate to another site html/css
  • IE8 "Save Target as ..." won't display for block elements
  • Image hover transition for span - CSS
  • How to apply min and max on textarea?
  • How to draw multiple horizontal lines (Notebook Paper effect) using css?
  • Table Printing Issue: Gaps in top and Bottom Border of th Elements
  • grouping elements with div and applying stylesheet for that group
  • Click <div> to expand, then click again to shrink - Its expanding, just not shrinking
  • CSS - How can I center a <script>'s output?
  • Django's template variable gets interpreted as HTML
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • Display CSS: some divs fixed, some flexible (2)
  • How to append href strings with variables in html with PHP?
  • css - Why is there a big white space between text lines?
  • div image position fixed + scroll
  • Hide specific elements from html using css
  • how to align the arrow in menu item?
  • How do I create a trapezoidal button using CSS?
  • Background position seems to be inaccurate
  • CSS background color is overruled by the background image
  • Oblique or twisted border shape
  • Overflow in div tag doesn't work
  • How to show the vertical image into horizontal manner using HTML and CSS?
  • css3 animation issue move div to left and move it back
  • HTML <code> - get rid of newlines
  • Vertical Align Two Spans (Different font size)
  • Position fixed not working with video poster
  • Having issues placing html buttons side by side in a form
  • how to center text in the middle of the page
  • Sublime Autocompletion for HTML using Emmet inside .sublime-autocompletion file
  • Align bottom wrapped text at the left of an image
  • I'm trying to get :after:hover to work
  • Header and Picture won't Display Correctly
  • SVG stacking, anchor elements, and HTTP fetching
  • Positioning two elements on opposite ends of a 100% with header
  • How to overlay an image inside an image with HTML, CSS
  • Selected date isn't kept in select box
  • How to change background colour of entire div on hover?
  • Two gradients with two distinct sections with just one div element
  • Indent even rows of hexagons in CSS
  • Unwanted filled letters in webpage
  • Mask password character size too small
  • Show div #2 while hovering relative div #1 with translition effect in one container
  • Stacking Tables for a responsive HTML email
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org