I want to make it stay at the very top and very left, but there's still space.
Can someone tell me how to make it full width ?
My css code
body
{
height:100%;
width:100%;
background : url('4163-16y6220.png');
}
.transbox
{
background : black;
opacity : 0.2;
width : 100%;
margin: 0;
padding: 0;
}
My HTML
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title><link rel="stylesheet" href="style.css">
</head>
<body>
<div class="transbox">Home dasdahbbjb</div>
</body>
</html>
You need to reset your HTML document.
Use a reset like Normalize.css
This will reset all elements to 0.
margin, padding, and more will set to default.
Here is another reset:
/*
* html5 doctor css reset | http://html5doctor.com/html-5-reset-stylesheet
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
More info, here on SO: css-reset
Try making the div with margin-left: -10px;
or whatever suits your needs.
This isnt probably the nicest way to do it but it will do.
Here is a codepen to help.
http://codepen.io/anon/pen/ZGBGrL
Well, all this guys only fix the problem with you code using opacity : 0.2; but in actuality is obsolete because you can use rgba colors w3schools rgba examples
Example
Define different RGB colors with opacity:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
There are many tools on the internet that is not the most recommended use because otherwise you never learn anything, but hey here's a this is the link
css3maker.com
what you can do to the top is a div with style transparent and a div that this under the color of the background you should go
Add padding and margin 0 to body
body
{
height:100%;
width:100%;
background : url('4163-16y6220.png');
padding:0;
margin:0;
}
http://jsfiddle.net/gen7wpkm/1/
Only add
.transbox
{
background : black;
opacity : 0.2;
width : 100%;
margin: 0;
padding: 0;
position:absolute;
top:0px;
left:0px;
}
Related
This question already has answers here:
Can I set background image and opacity in the same property?
(15 answers)
Closed 2 years ago.
I have these lines In my CSS file:
body {
background: url(https://images.freeimages.com/images/large-previews/48d/woodgrain-texture-1151631.jpg);
}
How can I affect this image with transparency? I found a "solution" that looked like this:
img {
opacity: 0.5
}
But I don't really know how to apply It. If I just write It down, nothing happens because I don't know how to connect It to the image I want to use.
You can utilize the rgba() function of the background property and combine it with the url() function. The RGBA has the A for "Alpha" in addition to Red-Green-Blue, which performs just like the opacity property; values range from 0 to 1. The trick to using RGBA in a background image is to use two parallel rgba() functions inside a linear-gradient(). Since rgba() returns a color value, it can be utilized as two color stops in the linear gradient...although they technically aren't color stops, since no transition happens from two like color values. Hackish, but simple and functional.
body {
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url('https://images.freeimages.com/images/large-previews/48d/woodgrain-texture-1151631.jpg')
}
You would simply apply it as shown below;
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background-image: url('https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg');
opacity: 0.5;
}
.content {
position: relative;
z-index: 2;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1 class="content">Hey!</h1>
</body>
</html>
The body being your background and the content being your text and other content etc..
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.
http://asifslab.com
I want to lighten the area behind and near the logo on which the logo is located. The purpose for this is because the border of the logo is mixed with the background. Please help
To softly lighten up the area behing the logo you can use a combination of an rgba background, rounded borders and a light shadow on the image:
.head > img {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
Don't forget to add vendor-prefixes to support all browsers...
You can add a background with rgba property to give a fake light background.
Try this
#logo {
background-color: rgba(255,255,255, 0.5);
/* Then other css */
}
In your case, modify your .head to this
.head {
padding-left: 5%;
background-color: rgba(255,255,255,0.5);
}
The "border" as you put it is margin on the body. To remove this, simply:
body { margin:0; }
What you can do is give the .head divider an opaque background:
.head { background:rgba(255,255,255,0.3); }
This isn't supported on older browsers, however.
You can do
convert to PNG and make the original image 0.2 opacity
(better) have a <div> that is position: absolute inside body and the same height as body, then apply the background image and opacity: 0.2; filter: alpha(opacity=20);
Try CSS3 please
.box_shadow {
-webkit-box-shadow: 0px 0px 10px 0px #fff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: 0px 0px 10px 0px #fff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
you can do this by 2 ways
1 text-shadow but you are using image so you have to do this in photoshop in layer style > drop shadow and select light color
you can do this in this also but it covers in rectangular form not behind your logo text
and
2 is to use background that also have the same effect in rectangular form
use background:rgba(255,255,255,0.6);
last 0.6 is opacity adjust this to darken or ligten the color
I use box-shadow on the html element to give the background of a website a light vignette effect. But if the content of the site is longer than the window the box-shadow will only display in the part of the site which is viewable at the first glance. If you scroll down, the box-shadow stops working.
Here is my CSS code:
html {
box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
height: 100%;
}
body {
font-family: "Source Sans Pro", sans-serif;
margin: 0;
background: url('../img/subtle_grunge.png');
}
I tried to apply the box-shadow to the body element, but that won't work either. Surprisingly the background-image set for the body works just fine. The problem appears in all browsers (Safari 6, Firefox 18, Chrome 24 – all on Mac).
Is there a solution?
Here is a example: http://dreamapp.de/sites/portfolio/boxshadowproblem.html
You can put a <div> right after the <body> tag and move to it the CSS properties. Such as:
HTML
<body>
<div class="vignette"></div>
<!-- rest of your code -->
CSS
.vignette {
position: fixed;
/* to prevent empty space around the vignette */
top: 0;
left: 0;
/* extends to the whole visible area */
width: 100%;
height: 100%;
box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
}
in this way the element will stay under all the other elements and you can scroll the content.
Remove the "height: 100%;" style from your html tag. Alternatively, you can change it to "min-height: 100%;"
I'm trying to make a wrapper at the back off all of my DIV's that will appear transparent (opacity: 0.6), but everything in front of that is appearing transparent too.
Any ideas how to fix this?
You can find the example here: http://testing.squaretise.com/ (I have given the wrapper (#wrap) a red border so you can interpret easier)
Use instead of:
opacity: 0.6;
this:
background: rgba(255, 255, 255, 0.6);
The color is in RGB and the last digits are for the transparency level.
You'll need to position your transparent div absolutely.
http://www.w3.org/TR/css3-color/#transparency explains how the descendants pick up the transparency.
Opacity is inherited. If the parent is see through, so are the children.
A better way to do this is to remove opacity and set the background color to be transparent:
.foo {
background: rgba(0,0,0,.5);
}
You should use transparent background, instead of opacity.
Background-image is the best way if you want to support IE8. (CSS3 Colours: http://caniuse.com/#search=rgba)
Use data-uri for better performance.
You could even do it with opacity. Here's an example:
HTML
<div id="wrapper">
<div id="contentOrWhatever">
</div>
</div>
CSS
body {
z-index:0;
}
#wrapper {
z-index:1;
opacity:0.6;
}
#contentOrWhatever {
z-index:99;
opacity:1;
}
So #wrapper ist now transparent and is ALWAYS behind #contentOrWhatever.
Hope I could help you.