This question already has answers here:
Transparent text cut out of background
(14 answers)
Closed 7 years ago.
What I have is a div with a background image, inside such div I have another element which is smaller and has a background colour of white. Inside this element I have text which I wan't to be transparent, so we can see background image of first div.
Tried applying color: transparent; but it doesn't seem to work. Is there reliable, css method to achieve this?
You can't. The only way to do anything like this is to have the "background with the text taken out" be an image that you put on top of the background image.
Actually this is possible with CSS only. In your smaller element with the white backgound you could use CSS3 with a fallback for IE 6-8. For the fallback you could use a transparent PNG.
the CSS3 code for the white bg would be:
background-color: rgba(255,255,255,0.5)
I set up a codepen for you to see the code in action.
http://codepen.io/DheerG/pen/tkKqC
Also if you want everything in the smaller element to be transparent, you could just use the css opacity element.
opacity: 0.6;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
/* IE 5-7 */
filter: alpha(opacity=60);
Related
This question already has answers here:
CSS: background image on background color
(13 answers)
Why can't I use background image and color together?
(10 answers)
Closed 3 months ago.
Ok so I´m trying to put an explosion gif on both sides of website cause it looks cool but I can´t figure out how to do it and keep the original background color on the parts that aren´t part of the gif.
background-color: #270436;
background:url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y,url("explosion.gif") right repeat-y;
I used this from another post i saw and it didn´t work
Simply move the background-color property after the background property, since now, your background image is taking priority the background color:
body {
background: url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y, url("explosion.gif") right repeat-y;
background-color: #270436;
}
Or, alternatively, add the color as part of the list of background properties:
body {
background: url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y, url("explosion.gif") right repeat-y, #270436;
}
Add the background-color property after the background property .
body{
background:url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") left repeat-y,url("https://media.giphy.com/media/pKWCBvHevLcMU/giphy.gif") right repeat-y;
background-color: #270436;
}
This question already has answers here:
Transparent text cut out of background
(14 answers)
Closed 7 years ago.
How can you display a text 100% transparant inside a div with a solid background so that the background is visible inside the text?
So I have a background image on the body, a div with a solid background color and I want the text to be 100% trasparant so the background-image of the body is visible through the text.
I hope you know what I mean :D
Yes, it can be done with background-clip:text --- a css3 property. Also you need to add the background image for text. This will solve your issue, but may support for all the browsers.
h1 {
font-family:'...';
font-size:25px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background:url(url/image.jpg);
background-position:bottom;
background-size:cover;
}
Reference: https://scotch.io/tutorials/text-backgrounds-and-gradients-with-background-clip
Also, I have found a similar post in stackoverflow: Transparent text cut out of background
This is great: http://jsfiddle.net/JGPuZ/1/
I was wondering if it's possible to change what file the background image repeats to when the old image runs out.
So, if image01.jpg is set as the first background-image, when it runs out vertically image02.jpq would be added as the background image to complete the page?
It might be a straight 'No', thts fine im just wondering
With CSS3 you can have multiple backgrounds. You can specify a background-repeat for each of them. It is supported by all major browsers, except IE8 and before.
http://www.css3.info/preview/multiple-backgrounds/
There's always a solution for something in CSS if you're willing to add more markup to your file. Your best bet is to wrap the element you have the first image in with a containing div with the background you would like to appear if the first image runs out. Like so:
HTML:
<div class="container"><span class="image"></span></div>
CSS:
.container {
background: transparent url(image02.jpg) 100% 0 no-repeat /* Appears on the right */
width: 200px; /* The maximum width */
/* Can also add x pixels padding to ensure that x pixels of image02 are shown */
}
.image {
background: transparent url(image01.jpg) 0 0 no-repeat; /* Appears on the left */
}
Of course you can always replace the <span> with an actual image as well.
Don't forget that HTML is an element, too.
html {/*insert tiling background image*/}
body {/*insert normal background image*/}
The body background will sit on top of the tiling html background. Works in every browser and won't require additional markup.
I have a page having the background image using:
background:url('gir.gif') scroll no-repeat 0 0 #foo;
I want to provide color on the top of the image, such that the image is looking like behind the color.
#bashu; it's a better to use rgba color transparency because it's not transparent you content at all.
background: rgba(0,0,0,0.3)
for IE
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
you can create your rgba filter for IE for here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
check this for more Opacity of div's background without affecting contained element in IE 8?
The div with the background image should be separated from the div that holds your content and the background color.
The div with the content and background color should span the entire other div and have an opacity, or you can create a 1x1 transparant gif/png of the color instead.
Here is a jsfiddle example:
http://jsfiddle.net/AZk6c/
I would recommend using a transparant image as color instead so the text doesn't become transparant with the rest of the div. (unless there is no text in that div of course)
Is there a way to change the appearance of an icon (ie. contrast / luminosity) when I hover the cursor, without requiring a second image file (or without requiring a hidden portion of the image)?
Here's some good information about image opacity and transparency with CSS.
So to make an image with opacity 50%, you'd do this:
<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />
The opacity: part is how Firefox does it, and it's a value between 0.0 and 1.0. filter: is how IE does it, and it's a value from 0 to 100.
You don't use an img tag, but an element with a background-image css attribute and set the background-position on hover. IE requires an 'a' tag as a parent element for the :hover selector. They are called css sprites.
A great article explaining how to use CSS sprites.
Here's some code to play with. Basic idea: put all possible states of the picture into one big image, set a "window size", that's smaller than the image; move the window around using background-position.
#test {
display: block;
width: 250px; /* window */
height: 337px; /* size */
background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
border: 1px solid red; /* for debugging */
text-indent: -1000px; /* hide the text */
}
#test:hover {
background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}
a button
The way I usually see things done with smaller images such as buttons it that only a certain portion of the image is shown. Then many states of the picture will make up a larger picture which gets shifted around behind the visible port. I'll delete this when someone has code.