I'm new to coding and only have basic knowledge of HTML and CSS. I'm currently trying to modify my Tumblr I made to display my artwork using custom HTML and CSS and I'm having an issue with my phone not displaying my PNG's transparencies correctly. I've been looking for awhile now and haven't seen a question like this.
Here's the link to my Tumblr: https://usercolby.com/
If you look at the posts on a desktop, the transparencies act fine. But if you visit my link on a phone, the posts with transparencies have white backgrounds. I don't know if this is a PNG issue or some kind of div with a white bg that's only visible on mobile.
See comparison here
Also this is the custom CSS I used to get rid of the white post background on Desktop:
.post-wrapper {
**background: transparent;**
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
overflow: hidden;
padding: 0;
position: relative;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #eee;
border: transparent;
}
The white bg on mobile seems to be coming from some other div than this one and I've tried finding every other div that surrounds the images and adding background: transparent; or background: none; but nothing seems to work.
This is my first post on stackoverflow so I don't know if what I've provided is enough information, please let me know if you need anything else.
Thanks a lot
You've got:
#media screen and (max-device-width: 568px)
.photo figure img {
/* background: #fff; */
width: 100%;
}
Which sets the background color to white for screens narrower than 568px. I removed that in console and it fixed it.
Fixed it like 10 minutes after posting this question -_-
I randomly found another element when inspecting a post
.photo .high-res img {
width: 100%;
}
Changed it to
.photo .high-res img {
background: none;
width: 100%;
}
Somehow this worked?
Thanks a lot to those who answered
So basically the other day, I was messing around with Xcode.
I saw an Apple video explaining about UI and some new blur effects in IOS 13 so I tested it out and really liked it.
So what I achieved was an image with a blur effect and some text on top, but the text had a different blur than the image, so it was somehow see-tough.
Here is the result:
So basically I would like to achieve this using HTML and CSS but it looks quite difficult.
Is there any possible way to do this?
Thanks in advance anyway.
Using CSS, you can either use opacity property or use rgba colour values.
like so:
<style>
div.background {
background: url(https://loremflickr.com/320/240) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
/* using the opacity property */
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
/* Green background with 70% opacity */
color: rgba(76, 175, 80, 0.7);
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
My computer isn't allowing me to see the image at the moment, but if you want to blur the background, you can use:
filter: blur(8px);
-webkit-filter: blur(8px);
etcetera, for each browser. Be sure to apply those styles to the image itself, and not the container.
You can check out the effect here: https://theexplorerblog.com/learning-base.php
Hope this helps.
I want to show # and password icon in my login fields using a background-image property, inside my input[type="email"] and input[type="password"]. Using this CSS :
input.InputText--icon {
padding-left: 32px;
&[type="email"], &[type="email"]:-internal-autofill-selected {
background-image: url("/ressources/img/email.svg") !important;
}
&[type="password"], &[type="password"]:-internal-autofill-selected {
background-image: url("/ressources/img/password.svg") !important;
}
}
But if credentials are add using autofilling through Chrome, the following background-image: none !important; property overrides it and I lose my background.
// chrome user agent stylesheet
input:-internal-autofill-selected {
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark-color(black, white) !important;
}
Do you have any hacky ideas to go through this problem, so that my background-images always shows up. Even if :-internal-autofill-selected event is triggered.
I have seen this idea of using a wrapper (https://stackoverflow.com/a/35573069/7647916 ). But is it possible to do it without using a wrapper ?
Thank you !
When I use bootstrap, it removes the background color from everthing when I try to print my page.
Almost everything on my website is using bootstrap classes so I want to avoid a lot of manual CSS outside bootstrap.
I've found out that bootstrap uses #media print to remove the background color. I'm using a bootstrap theme as well (theme united) which is removing the background color as well.
theme-united.css
#media print
*, *:before, *:after {
background: rgba(0, 0, 0, 0) !important;
color: rgb(0, 0, 0) !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
bootstrap.min.css
#media print
*, :after, :before {
color: rgb(0, 0, 0)!important;
text-shadow: none!important;
background: 0 0!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
Is there a way to make sure that the background color is not removed when printing without editing these 2 CSS files?
For example:
When I use .alert-danger, I want that alert danger printed as it is displayed on screen, so would be printed as a red box.
See JSFiddle:
http://jsfiddle.net/7mtk7wrh/
Unfortunately there is not a good answer to your question - but maybe if you understand the why's then you can choose a way forward.
Why?
It's true that Bootstrap uses the #media print { * { color: $fff; background: transparent; }} -- but there is a very solid reason. This bit of code is actually derived from the normalizer.css project (by a then college of #mdo 's, #necolas) - it's intent is to make all browsers behave the same. These guys chose to "normalise" the css for a very good reason:
With most browsers one can choose to include or exclude background color, so the behaviour is not standard across even the same browser. Imagine for a sec a website with very dark background with white text - when printing with backgrounds off, it will look like you're printing nothing - when actually you're printing white text on no (white) background.
There was no way to account for all the different uses of color, so they choose to go black (font) and white (background, actually 'transparent'). Even the choice of black was well thought of -- its a better print solution, as most color printers have more black "ink/toner" (more economical) and they don't need to mix color to make black (so faster).
Remember that Bootstrap is also a "framework" - so a starting point if you will - and kudos to #mdo and #necolas for having the foresight to think of this in terms of establishing a predictable baseline. (No, I don't know them.)
Nope...
So the thinking here is: "what if we could 'go back' and unset this. Unfortunately CSS does not work like that - yes browsers load the CSS declarations in a "queue" where the last declaration wins (LIFO, or last-in-first-out), but I'm not aware of a way to remove this stack. So CSS developers just add more to the end...
So one would assume that we can go back that way --- add a * { background-color: inherit }. Problem is that inherit reverts to the parent property, but * is the root, so it has nothing to revert to. Same goes for initial!
Maybe!
So we're left with 4 options, none of them is what you where hoping for, but it is what it is. In order of difficulty:
Download the BS (less or sass) source, edit the offending code, and then compile it. (You need to use a local copy, CDN's will not work.)
Download the CSS variant of your choice, search and delete the offending code. (No CDN's again.)
Use getbootstrap.com/customize to create a new variant - exclude "Print media styles" under "Common CSS". (Again, no CDN's)
Override the specific items who's color you want to print: e.g.
#media print {
.alert-danger {
color: yellow !important;
background-color: red !important;
}
}
CDN's copies of BS will now work, but then you have the problem of the user possibly not printing backgrounds and having the output white (yellow in the e.g.) on white!
Finally
Well I hope learning the why's was at the very least a way of you thinking of a workaround. General rule of thumb I follow is that when printing, the background is (should be) always white. When constrained that way you start thinking of novel ideas, like exclamation icons around the text that only "print" (#media only screen { .hidden-screen { display: none; }})
Despite !important usage being generally frowned upon, this is the offending code in bootstrap.css
.table td,
.table th {
background-color: #fff !important;
}
Let's assume you are trying to style the following HTML:
<table class="table">
<tr class="highlighted">
<th>Name</th>
<th>School</th>
<th>Height</th>
<th>Weight</th>
</tr>
</table>
To override this CSS, place the following (more specific) rule in your stylesheet:
#media print {
table tr.highlighted > th {
background-color: rgba(247, 202, 24, 0.3) !important;
}
}
This works because the rule is more specific than the bootstrap default.
You can get this working by removing those lines from bootstrap.css file, there might be a jquery solution to this but it is much more complicated than erasing a few lines. :/
Or you could use a plugin called html2canvas as presented in this jsfiddle
I ended up here with the same problem but found the Chrome comes with a show background graphics option on the print dialog under more settings that did exactly that! No modification of Bootstrap (4) required.
#Vino explained really well. I was also facing problem because bootstrap.css makes background transparent forcefully. Thus I have customized the specific element in my custom CSS file. Remember to change <.element> with element where you want the colorful background instead of transparent.
#media print {
.element{
background-color: white !important;
box-shadow: inset 0 0 0 1000px #fff !important; /* workaround for IE 11*/
}
}
i had also face the same problem.. i just remove the bootstrap.min.css from my code then it work for me.
just make the specificity-value more specific and you should be ok.
something like:
#media print {
tbody>tr:nth-child(even)>td {
background-color: rgb(230, 216, 216) !important;
}
}
Actually, there is a solution, but this is still a hack.
It was used for a pdf generation in puppeteer, so it was tested only in this case, but most probably should work in all modern browsers.
Keep in mind that BOOTSTRAP_PRINT_RULE can be different in a different version of Bootstrap.
const BOOTSTRAP_PRINT_RULE = `#media print {
*, ::after, ::before { color: rgb(0, 0, 0) !important; text-shadow: none !important; background: 0px 0px !important; box-shadow: none !important; }
a, a:visited { text-decoration: underline; }
a[href]::after { content: " (" attr(href) ")"; }
abbr[title]::after { content: " (" attr(title) ")"; }
a[href^="javascript:"]::after, a[href^="#"]::after { content: ""; }
blockquote, pre { border: 1px solid rgb(153, 153, 153); break-inside: avoid; }
thead { display: table-header-group; }
img, tr { break-inside: avoid; }
img { max-width: 100% !important; }
h2, h3, p { orphans: 3; widows: 3; }
h2, h3 { break-after: avoid; }
.navbar { display: none; }
.btn > .caret, .dropup > .btn > .caret { border-top-color: rgb(0, 0, 0) !important; }
.label { border: 1px solid rgb(0, 0, 0); }
.table { border-collapse: collapse !important; }
.table td, .table th { background-color: rgb(255, 255, 255) !important; }
.table-bordered td, .table-bordered th { border: 1px solid rgb(221, 221, 221) !important; }
}`
for (const styleSheet of document.styleSheets) {
for (const [index, rule] of Array.from(styleSheet.cssRules).entries()) {
if (rule.cssText && rule.cssText.includes(BOOTSTRAP_PRINT_RULE)) {
styleSheet.deleteRule(index)
return;
}
}
}
Since version 4 of Bootstrap with SASS you can actually set the following variable to false which will turn of this behavior:
$enable-print-styles: false
If this is not an option, there is the following script which brutally rips out all #media print annotations from the CSS. It assumes that Bootstrap is the first style sheet loaded and that it runs after Bootstrap has loaded.
var style = document.styleSheets[0];
[].forEach.call(style.cssRules || [], function (aRule, aIndex) {
if (aRule.cssText.indexOf("#media print") >= 0) {
style.deleteRule(aIndex);
}
});
You can use this (https://developer.mozilla.org/fr/docs/Web/CSS/print-color-adjust)
.your-selector {
-webkit-print-color-adjust: exact;
}
Warning: This is not standart, but might help you.
I try to find a solution for a few hours now but I do not know how to do this. It is maybe a simple thing and I hope someone can help me out.
I created three boxes. Those boxes have a border at the top and change their background colours as soon as you scroll over with your mouse.
Screenshot without hover effect: http://i.imgur.com/TWSvdUt.png
Screenshot with hover effect: http://i.imgur.com/NdELr4T.png
My problem is now, that I also need the colour of the title and the text in another colour (#ffffff)! I do not know how I have to change my .css!
Here is what I did:
.frontpage-box {
position: relative !important;
border-top: 8px solid #233c5b !important;
background: #eeeff1 !important;
height: 280px !important;
}
.frontpage-box:hover {
cursor: pointer;
position: relative !important;
border-top: 8px solid #daaf36 !important;
background: #233c5b !important;
color: #ffffff !important;
}
Can you tell me what is wrong? How do I have to change the code, so that the font color will be "white" after hover.
Thanks in advance,
Chris
Without seeing your full code you would want to do
.frontpage-box:hover p { color: #fff }
and not set it in .frontpage-box:hover with the important.