I have an image that I would like to overlay on top of a background gradient that I have set on a section element. Both the background gradient and image I am setting in CSS and calling via a class in HTML. Originally when just using the background gradient it worked fine, but after adding the image to place over the background gradient the background gradient disappeared?
.banner-gradient {
background: radial-gradient(circle, #ba000b, #9e0008);
color: white;
z-index: 0;
}
.banner-overlay {
background: url("../imagery/image.png");
max-width: 100%;
height: auto;
background-position: bottom;
background-repeat: repeat-x;
z-index: 1;
}
.section-align-center {
text-align: center;
}
<section class="banner-gradient banner-overlay section-align-center">
<div class="container">
<p>image over background gradient</p>
</div>
</section>
Try using background-image instead of background for image.
.banner-gradient:before {
content: " ";
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;
background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}
.banner-overlay {
background: url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') repeat;
}
.section-align-center {
height: 400px;
position: relative;
}
<section class="banner-gradient banner-overlay section-align-center">
<div class="container">
<p>image over background gradient</p>
</div>
</section>
I solved this with the help of this post. You must first place the banner-gradient in your outer div then in your inner div use banner-image.
HTML
<section class="banner-gradient section-align-center">
<div class="container banner-overlay">
<p>image over background gradient</p>
</div>
I would rather edit the class of the element you want the transparency in
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
div.background {
background: url('https://www.w3schools.com/css/klematis.jpg') repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
https://jsfiddle.net/mergatroid/xkmyqjec/1/
Related
This question already has answers here:
Transparent text cut out of background
(14 answers)
Cut-out text with CSS
(3 answers)
How to apply inverse text mask with CSS
(4 answers)
Cut out text in CSS. Possible? [duplicate]
(1 answer)
transparent text but opaque background in css [duplicate]
(1 answer)
Closed 3 years ago.
Let's say I have an image like this:
and I want to fill an <h1> tag with that image to look something like this:
I guess I could do something like this to start...
div {
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/n8gtc.jpg) 50% 0 no-repeat;
background-size: cover;
}
h1 {
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<div>
<h1>404</h1>
</div>
Should I have another 'absolute' div white covering the image and a transparent font over? Does anyone know how to accomplish this?
background-clip might be an option
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
div {
width: 100%;
height: 100%;
}
h1 {
color: transparent;
font-size: 28vmax;
background-size: cover;
background: url(https://i.stack.imgur.com/n8gtc.jpg) 50% 0 no-repeat;
background-clip: text;
}
<div>
<h1>404</h1>
</div>
or mix-blend-mode:
https://css-tricks.com/almanac/properties/m/mix-blend-mode/
The mix-blend-mode property defines how an element’s content should blend with its background. This means that any images or text, borders or headings will be influenced by this property.
also
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
* {
margin: 0;
}
div {
width: 100%;
height: 100vh;
background: url(https://i.stack.imgur.com/n8gtc.jpg) 50% 0 no-repeat;
background-size: cover;
}
h1 {
font-size: 15vmax;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
color: black;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
background: white;
mix-blend-mode: screen;
}
<div>
<h1>404</h1>
</div>
You can try using -webkit-background-clip: text;
This is called Knockout Text but you should be able to get the outcome you want with it.
Here are a few examples, but it might be easier to do it in photoshop and then insert the image. (Just an alternative)
/*
Based from this article from Divya Manian -
http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
*/
* {
margin: 0;
padding: 0;
}
*,
:before,
:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
min-height: 100%;
}
body {
font-family: 'Oswald', sans-serif;
color: #fff;
background-color: #000;
}
.wrapper {
text-align: center;
}
.title {
font-size: 2em;
position: relative;
margin: 0 auto 1em;
padding: 1em 1em .25em 1em;
text-align: center;
text-transform: uppercase;
}
.title:after {
position: absolute;
top: 100%;
left: 50%;
width: 240px;
height: 4px;
margin-left: -120px;
content: '';
background-color: #fff;
}
/* Clip text element */
.clip-text {
font-size: 6em;
font-weight: bold;
line-height: 1;
position: relative;
display: inline-block;
margin: .25em;
padding: .5em .75em;
text-align: center;
/* Color fallback */
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.clip-text:before,
.clip-text:after {
position: absolute;
content: '';
}
/* Background */
.clip-text:before {
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
}
/* Text Background (black zone) */
.clip-text:after {
position: absolute;
z-index: -1;
top: .125em;
right: .125em;
bottom: .125em;
left: .125em;
background-color: #000;
}
/* Change the background position to display letter when the black zone isn't here */
.clip-text--no-textzone:before {
background-position: -.75em 0;
}
.clip-text--no-textzone:after {
content: none;
}
/* Use Background-size cover for photo background and no-repeat background */
.clip-text--cover,
.clip-text--cover:before {
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
}
/* Background image from http://thepatternlibrary.com/ and http://lorempixel.com */
.clip-text_one {
background-image: url(https://picsum.photos/480/200?random);
}
.clip-text_two {
background-image: url(https://picsum.photos/480/200?grayscale);
}
.clip-text_tree {
background-image: url(https://picsum.photos/480/200?grayscale&random=2);
}
.clip-text_four {
background-image: url(https://picsum.photos/480/200?grayscale&blur=3);
}
.clip-text_five {
background-image: url(https://picsum.photos/480/200?grayscale);
}
.clip-text_six {
background-image: url(https://picsum.photos/480/200?random=3);
}
.clip-text_seven {
background-image: url(https://picsum.photos/480/200?random=4);
}
.clip-text_eight {
background-image: url(https://picsum.photos/480/200?random=6);
}
.clip-text_nine {
background-image: url(https://picsum.photos/480/200?random=5);
}
.clip-text_ten {
background-image: url(https://picsum.photos/480/200?random=7);
}
.clip-text_eleven {
background-image: url(https://picsum.photos/480/200?random=8);
background-size: cover;
}
.clip-text_twelve {
background-image: url(https://picsum.photos/480/200?random=9);
}
.clip-text_thirteen {
background-image: url(https://picsum.photos/480/200?random=10);
}
.clip-text_fourteen {
background-image: url(https://picsum.photos/480/200?random=11);
}
.clip-text_fifteen {
background-image: url(https://picsum.photos/480/200?random=12);
}
<div class="wrapper">
<p class="title">Play with background-clip text</p>
<div class="clip-text clip-text_one">TEST</div>
<div class="clip-text clip-text_fifteen clip-text--no-textzone">TEST</div>
<div class="clip-text clip-text_twelve clip-text--cover">TEST</div>
<div class="clip-text clip-text_tree clip-text--no-textzone">TEST</div>
<div class="clip-text clip-text_two">TEST</div>
<div class="clip-text clip-text_fourteen clip-text--cover">TEST</div>
<div class="clip-text clip-text_tree">TEST</div>
<div class="clip-text clip-text_eleven clip-text--cover">TEST</div>
<div class="clip-text clip-text_four">TEST</div>
<div class="clip-text clip-text_five">TEST</div>
<div class="clip-text clip-text_six">TEST</div>
<div class="clip-text clip-text_seven">TEST</div>
<div class="clip-text clip-text_eight">TEST</div>
<div class="clip-text clip-text_nine">TEST</div>
<div class="clip-text clip-text_ten">TEST</div>
<div class="clip-text clip-text_thirteen clip-text--cover">TEST</div>
</div>
Let me know if you have any questions! The implementation is fairly straight forward I made sure to include options for you to look at, here is a link for more information:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
EDIT:
The chat window should be aligned to the right, with the chat area within the chat window, like this, why isn't it?: Codepen
Should be this:
I'm looking to make a simple site with a header and a rectangle on the side. For some reason, I cannot position my logo correctly! What I currently have:
html,
body {
background-color: #333;
margin: 0;
padding: 0;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background: #ccc;
background: -webkit-linear-gradient(right top, #8900AB, #282828);
background: -o-linear-gradient(top right, #8900AB, #282828);
background: -moz-linear-gradient(top right, #8900AB, #282828);
background: linear-gradient(to top right, #8900AB, #282828);
}
#header {
position: absolute;
background: #404040;
width: 100%;
height: 10%;
}
#logo {
position: absolute;
background-image: url(http://csgovoid.net/img/logo.png);
background-repeat: no-repeat;
background-size: contain;
}
<html>
<body>
<div id="overlay"></div>
<div id="header">
<div id="logo"></div>
</div>
<div id="Seperator_H01"></div>
<div id="chat_extended">
<div id="chat_area"></div>
<input id="chat_input" type="text" placeholder="Chat...">
<button id="send_button" onClick="send()">SEND</buttton>
</div>
<div id="Seperator_V01"></div>
</body>
</html>
CodePen
What I'm trying to achieve:
(The text input and send button aren't included in the picture.)
It looks like you need to add a width and height :) A div has a height and width of zero by default, and since there is nothing in there you need to set it!
you need to add img tag;
<div id="logo">
<img src="http://csgovoid.net/img/logo.png">
</div>
and add following css:
#logo img{
width:2%;
//background stuff is removed -- not required in this case
}
#chat_extended
{ text-align:center;
padding-top:5%;
}
#header {
position: absolute;
background: #404040;
width: 100%;
//height is removed -- not required
}
Here is a fiddle : https://jsfiddle.net/5odd0q1n/
CSS :
html,
body {
background-color: #333;
margin: 0;
padding: 0;
width:100%;
height:100%;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background: #ccc;
background: -webkit-linear-gradient(right top, #8900AB, #282828);
background: -o-linear-gradient(top right, #8900AB, #282828);
background: -moz-linear-gradient(top right, #8900AB, #282828);
background: linear-gradient(to top right, #8900AB, #282828);
}
#header {
position: absolute;
background: #404040;
width: 100%;
height: 10%;
}
#logo {
position: relative;
background-image: url(http://csgovoid.net/img/logo.png);
background-repeat: no-repeat;
background-size: contain;
height:100%;
}
HTML : (you had a typo in </button>)
<html>
<body>
<div id="overlay"></div>
<div id="header">
<div id="logo"></div>
</div>
<div id="Seperator_H01"></div>
<div id="chat_extended">
<div id="chat_area"></div>
<input id="chat_input" type="text" placeholder="Chat...">
<button id="send_button" onClick="send()">SEND</button>
</div>
<div id="Seperator_V01"></div>
</body>
</html>
Absoulute position is not good for responsivnes becuse you can't get a width or a height relative to parrent using css only :)
Anyways you asked for border line on the header : https://jsfiddle.net/5odd0q1n/3/ (you can find it here)
you only need to add
border-bottom: 10px solid purple ;
to your #header :)
The section has a background image with content on top.
I want to decrease the brightness of only the background image in the section and not the content.
I have tried the below, however, the brightness still applies to all and not just the image.
<!-- Section -->
<div id="section1">
<div id="content">
<h1 class="heading">headline text</h1>
<h4 class="subHeading"> Sub-headline text</h4>
<!-- Call to action button -->
<br><br>
<button> Join our wait list </button>
</div>
#section1 {
background: url('../images/headerimage1.jpg') center center no-repeat;
background-size: cover;
-webkit-filter: brightness(0.5);
filter: brightness(0.5);
padding-top: 100px;
padding-bottom: 100px;
padding-left: 10%;
padding-right: 10%;
color: white;
text-align: center;
}
#content {
-webkit-filter: brightness(1);
filter: brightness(1);
}
You can add a new element of transparent black that overlays just the background, with the contents of your div sitting in front of it.
<div id="section1">
<div id="content">
</div>
</div>
CSS:
#section1 {
background: url('../images/headerimage1.jpg') center center no-repeat;
background-size: cover;
position: relative;
}
#content {
position: absolute;
}
#section1::before {
content: '';
display: block;
position: absolute;
background-color: #000;
opacity: 0.5;
width: 100%;
height: 100%;
}
This is a question for the CSS gurus. A trend at the moment seems to be to place an image in the background and then have a transparent content scroll over the top.
AIM
What technique is used to produce this result, where the top content is transparent and slides over a background image.
http://jsfiddle.net/spadez/2uUEL/9/embedded/result/
MY ATTEMPT
What I have tried to do is apply a background and then make the top section transparent on top of it.
http://jsfiddle.net/spadez/N9sCD/3/
body {
background-image"http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg";
}
#top {
height: 160px;
opacity:0.4;
filter:alpha(opacity=40);
}
#section {
height: 600px; background-color: blue;
}
QUESTION
How has this technique of a transparent div moving over a static background image been achieved in my first link and how can I reproduce it. It must be a CSS solution because it still works without javascript enabled.
Here's a FIDDLE
<div id="top">
<span class="mask">
<img src="https://app.h2ometrics.com/build/v0.1.1a/styles/img/chrome_logo.png" class="logo" alt="Chrome">
Link 3
Link 2
Link 1
</span>
</div>
<div class="section l">
</div>
<div class="section d">
</div>
#top {
background:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/06/6.jpg) fixed;
background-size: cover;
position: relative;
height: 400px;
}
#top a {
background: rgba(200,200,200,0.5);
display: block;
float: right;
margin: 10px 15px;
padding: 2px 5px;
text-decoration: none;
color: #111;
cursor: pointer;
border: 2px solid #ddd;
border-radius: 8px;
transition: color 0.2s ease-in;
}
#top a:hover {
color: #fff;
}
.mask {
background: rgba(0,187,255,0.5); /* or hex combined with opacity */
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 -5px 8px -3px #666; /* makes #top little inset */
}
.logo {
position: relative;
width: 60px;
height: 60px;
margin: 10px;
}
.section {
height: 600px;
}
.l {
background: #ddd;
}
.d {
background: #333;
}
Update #top content placed inside .mask which removes need for z-index.
You were essentially correct in building but your CSS has some errors.
body {
background: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg') fixed; /* fixed stops background from scrolling */
background-size: cover cover; /* expands bg image to cover body */
}
#top {
height: 160px;
color: #fff; /* this just makes the text visible on your dark bg */
}
You don't need to set the opacity of #top because without a background set it will already be transparent.
Try this:
HTML - pushed the menu into its own div
<div id="top">
<div id="menu">
logo
link 1
link 2
</div>
</div>
<div id="section">
</div>
CSS - removed margin from body, set the background to a fixed position and to always cover the whole body, added background color to menu. Note that #top does not need a transparency as it is 100% transparent by default. If you want to get a 'colour washed' looking image it would be better to adjust the image itself rather than trying to re-create a colour overlay.
body {
margin: 0;
background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") fixed;
background-size: cover;
}
#top {
height: 500px;
}
#menu {
padding: 10px;
background-color: #fff;
}
#section {
height: 600px; background-color: blue;
}
Final resulting background image that I need:
Background image that I have used:
But I have got this Fiddle
::Summary of Fiddle::
HTML...
<div id="top-part">
<div id="topmost">
<div id="top-most" class="wrapper">
</div>
</div>
<div id="topmenu" class="wrapper">
</div>
CSS...
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
}
#top-most{
height: 139px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}
Update - to cover your recent edit
#header{
background: #f00 url('http://i.stack.imgur.com/GWVfL.jpg');
opacity: .6;
width: 100%;
height: 189px;
}
Working Fiddle
You could try using the background property in CSS:
div{
background: url('path_to_your_image.jpg') no-repeat;
}
Learn more about using the background-image property here
Note:
There is a difference between background and background-image. In this answer I've used the background property which basically takes all of the possible options for a background image in CSS and lets them be used in a single call.
For example, you could split the above up into two selectors:
div{
background-image: url('path_to_your_image.jpg') no-repeat;
background-repeat: no-repeat;
}
You could do like this fiddle
html...
<div id="top-part">
<div id="topmost">
</div>
</div>
<div id="top-menu" class="wrapper">
<div id="topmenu">
</div>
</div>
css...
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
height: 139px;
}
#top-menu{
background: url(img/bg-header-effects.png) no-repeat 50% 45%;
border-radius: 0 0 20px 20px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}
The easy approach that I'm thinking of is having a picture within divs covering the whole page. The code will be very simple, but the only downside is the image may be warped or it can be clicked on unless you have this.
HTML:
<div id="backgroundcolor">
<div id="backgroundimage">
</div>
</div>
CSS:
#backgroundcolor {
background-color: #000;
z-index: 1;
}
#backgroundimage {
background: ("http://cdn.theatlantic.com/static/infocus/election110712/s_e01_37923312.jpg");
resize: none;
object-position: center;
object-fit: initial;
}