So I have a simple little project I'm making, which has a gradient background. However, upon loading up the website, it looks like this:
image
And, as you can see, it doesn't extend to the bottom of the screen. What is the cause of this? Here is my stylesheet:
* {
box-sizing: border-box;
}
.bg-image {
background-image: url('../bg/bg.png');
background-size: cover;
-webkit-background-size: cover;
display: block;
filter: blur(5px);
-webkit-filter: blur(5px);
height: 800px;
left: 0;
position: fixed;
right: 0;
z-index: -1;
}
.container p {
margin: 1%;
font-weight: bold;
color: #000000;
opacity: 1;
}
.container {
background: rgba(255, 255, 255, 0.35);
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
top: 175px;
left: 0;
position: fixed;
margin-left: 200px;
margin-right: 200px;
right: 0;
padding: 0 10px;
text-align: center;
}
.container ul {
margin: 5%;
font-weight: bold;
color: #000000;
opacity: 1;
}
.container img {
max-width: 600x;
max-height: 400px;
}
.logo img {
margin: 0 auto;
display: block;
max-width: 500px;
max-height: 150px;
}
Thanks for any help.
Related
I can't figure out why a margin is not respected when I resize to mobile view. If you resize the window, left margin is respected, however, right margin is not respected.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.banner-container {
position: relative;
}
.banner-image {
height: 200px;
width: 100%;
background-color: rebeccapurple;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 560px;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
font-size: 32px;
padding: 24px 0;
margin: 0 10px;
}
#media screen and (max-width: 768px) {
.banner-text {
font-size: 24px;
}
}
<div class="banner-container">
<div class="banner-image"></div>
<span class="banner-text">Candidate Membership</span>
</div>
I'd appreciate if someone could explain what I'm doing wrong. Thanks.
The margin is there, but it is added to the 100% width you defined. So the element's width including margins goes beyond the container width.
.banner-text in media width : 80%
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.banner-container {
position: relative;
}
.banner-image {
height: 200px;
width: 100%;
background-color: rebeccapurple;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 560px;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
font-size: 32px;
padding: 24px 0;
margin: 0 10px;
}
#media screen and (max-width: 768px) {
.banner-text {
font-size: 24px;
}
.banner-text{
width: 80%;
}
}
<div class="banner-container">
<div class="banner-image"></div>
<span class="banner-text">Candidate Membership</span>
</div>
After ~2 hours of researching I couldn't find a solution for my problem, I am trying to inherit the center of the background since the "blurred-box" gets bigger depending on the computer resolution.
It looks like this(laptop resolution):
And I would like to make it show the center of the background image instead of the corner.
* {
margin: 0;
padding: 0;
}
html {
width: 100vw;
height: 100vh;
}
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top;
background-image: url(https://images.unsplash.com/photo-1477346611705-65d1883cee1e?dpr=0.800000011920929&auto=format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=);
width: 100%;
height: 100%;
font-family: Arial, Helvetica;
letter-spacing: 0.02em;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
.blurred-box {
position: fixed;
width: 550px;
height: 670px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: inherit;
border-radius: 2px;
overflow: hidden;
}
.blurred-box:after {
content: '';
width: 1000px;
height: 1000px;
background: inherit;
position: absolute;
bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
}
.user-login-box {
position: relative;
margin-top: 50px;
text-align: center;
z-index: 1;
}
.user-login-box>* {
display: inline-block;
}
<div class="blurred-box">
<div class="user-login-box">
<h1>text here</h1>
</div>
</div>
If someone posts a solution I would like to have a link for documentation with those informations(if that is okay), thanks.
You are almost good, remove the use of translate() which is creating the issue and center your element using margin:auto instead:
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top;
background-image: url(https://images.unsplash.com/photo-1477346611705-65d1883cee1e?dpr=0.800000011920929&auto=format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=);
margin:0;
height: 100vh;
font-family: Arial, Helvetica;
letter-spacing: 0.02em;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
.blurred-box {
position: fixed;
width: 550px;
height: 670px;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
background: inherit;
border-radius: 2px;
overflow: hidden;
}
.blurred-box:after {
content: '';
width: 1000px;
height: 1000px;
background: inherit;
position: absolute;
bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
}
.user-login-box {
position: relative;
margin-top: 50px;
text-align: center;
z-index: 1;
}
.user-login-box>* {
display: inline-block;
}
<div class="blurred-box">
<div class="user-login-box">
<h1>text here</h1>
</div>
</div>
I am new to the world of webdesign and am not completely not entirely sure how to create a full background image.
I am playing around with the warship.ts example on typescriptlang.org, and I am trying to add in a background photo of a battleship. Below is the code of the CSS file:
html
{
width: 100%;
height: 100%;
-ms-content-zooming: none;
margin: 0px;
border: 0px;
padding: 0px;
background-image: url(pictures/cats.jpg); //My code
background-size: cover;
}
body {
font-family: Verdana;
width: 100%;
height: 100%;
/*background-color: #b5caae;*/
background: url('img/bg2.jpg');
margin: 0px;
border: 0px;
padding: 0px;
min-height: 480px;
min-width: 640px;
}
#header {
width: 100%;
height: 25%;
}
#boards {
width: 100%;
height: 75%;
}
.quadrant
{
display: inline-block;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 40%;
margin: 2%;
vertical-align: top;
}
#banner {
font-size: 40pt;
font-weight: 800;
font-style: italic;
color: white;
text-shadow: -1px 0 black, 0 2px black, 1px 0 black, 0 -1px black;
height: 100px;
}
#status
{
width: 80%;
border: 1px dotted gray;
padding: 1%;
background-color: #CCCCCC;
height: 80%;
}
.board {
background-color: #111111;
border: 2px groove black;
height: 80%;
padding: 0%;
position: relative;
}
.cell {
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
height: 10%;
width: 10%;
border: 1px dotted #A0A0FF;
margin: 0px;
padding: 0px;
position: relative;
}
.notBombed {
opacity: 0.2;
background: url('img/bg.jpg') repeat;
/*background-color: black;*/
z-index: 0;
}
.cellHit {
opacity: 0.5;
background-color: #C00000;
z-index: 2;
}
.cellMiss{
opacity: 0.5;
background-color: #008000;
z-index: 2;
}
.ship {
position: absolute;
box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 0%;
padding: 0%;
width: 10%;
height: 10%;
border-radius: 20%;
/*background-color: #FFFF80;*/
background: #666666;
border: 2px solid black;
z-index: 1;
-ms-touch-action: none;
}
.dropTarget {
background-color: white;
}
As an IDE, I am using Visual Studio 2015. From the examples I have seen online, I place the url image in the solution explorer, then I reference it in the html method, and then set the image as a color. However, whenever I try to run it, nothing changes. Is there something that I am missing from the code, or am I updating this in the wrong spot? Do I need to change the HTML/ts code?
If you are trying to html background image in every resolution, try with this code
background: url(pictures/cats.jpg) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
do this for only body{} sector. remove background images code from other sectors.
I made a modal and it does not do the transition effect when I apply a background-color to my #main div which contains all the content, after removing the background the modal does do the transition effect and disappears slowly.
To ge the modal just click on register on the top navbar.
Live demo for the modal along with the background-color on #main:
http://79.179.201.217/
Live demo for the modal long without the background-color on #main:
http://79.179.201.217/test.php
Just to note that the following under #main causes the issue.
background-color: #eee;
CSS:
#main {
width: 85%;
max-width: 875px;
margin: 70px auto;
border-radius: 5px;
padding: 15px;
z-index: -600;
background-color: #eee;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: -500;
transition: opacity 0.18s linear, transform 0.18s linear;
transform: scale(1.4);
opacity: 0;
}
.modal-close {
display: block;
color: #555;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
position: absolute;
top: 6px;
right: 20px;
}
.modal-content {
display: block;
margin-top: 10px;
}
.modal-container {
display: table;
margin: 220px auto;
position: relative;
border: 1px solid #eee;
background-color: #eee;
padding: 25px;
border-radius: 3px;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5);
}
.modal-container.x2 {
width: 80%;
max-width: 200px;
}
.modal-container.x3 {
width: 80%;
max-width: 300px;
}
.modal-container.x4 {
width: 80%;
max-width: 400px;
}
.modal-container.x5 {
width: 80%;
max-width: 500px;
}
.modal-container.x6 {
width: 80%;
max-width: 600px;
}
.modal-container.x7 {
width: 80%;
max-width: 700px;
}
.modal-container.x8 {
width: 80%;
max-width: 800px;
}
.modal-header {
margin-bottom: 20px;
border-bottom: 1px solid gray;
font-size: 18px;
color: #555555;
font-weight: 500;
text-transform: uppercase;
}
.modal.modal-visible {
opacity: 1;
z-index: 1000000;
transform: scale(1.0);
}
Whats going on with my site at minimized widths and how can I fix it?
Problem
It looks good on a mobile phone and full screen, but when sizing down, my background image disappears and the top bar seems to be acting weird (with the logo doing crazy stuff) at around 600ish pixels.
My #media query code:
#media only screen and (min-width:1024px)
{
div.large-7.push-5.columns.last{
height: emCalc(1px);
}
}
#media only screen and (max-width: 1023px) and (min-width:675 px){ //745 //481
.top-bar .toggle-topbar.menu-icon a {
color: $steel;
height: 34px;
line-height: 33px;
padding: 0 25px 0 0;
position: relative;
}
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
height: 66rem; /*645px*/
//overflow: hidden;
background-image: url('/img/losang.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
.top-bar{
// overflow: hidden;
}
.top-bar .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
content: "";
display: block;
height: 0;
position: absolute;
right: 5px;
top: 0;
width: 16px;
}
}
#media only screen and (max-width: 674px) { //480
// .title-area {
// max-width: 40%; //or whatever you need for your layout. px will work there, too
// }
// .title-area .logo {
// width: 100%;
// height: auto;
// }
#icons .hover1 {
.iconlinks {
color:$iconcolor1;
}
}
#icons .hover2 {
.iconlinks {
color:$iconcolor2;
}
}
#icons .hover3 {
.iconlinks {
color:$iconcolor3;
}
}
.path-container .path-item .circle.circle-right {
right: 90px;
}
.path-container {
text-align: center;
}
.path-container .circle {
top: 0;
// right: 0;
// left: 0;
float: none;
margin-bottom: 30px !important;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}
.top-bar .toggle-topbar.menu-icon a {
color: $steel;
height: 34px;
line-height: 33px;
padding: 0 25px 0 0;
position: relative;
}
.top-bar .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
content: "";
display: block;
height: 0;
position: absolute;
right: 5px;
top: 0;
width: 16px;
}
.top-bar {
overflow: hidden;
}
.orbit-container{
height: 12.5rem;
}
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
height: 66rem; /*645px*/
overflow: hidden;
background-image: url('/img/losang.jpg');
background-size: 100%;
background-repeat: no-repeat;
/*background-color: #ccc;
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
//height: 65rem; /*645px*/
// background-color: blue;
}
.servicesminicontainer{
margin-top:emCalc(0px);
}
.serviceimgs{
margin: emCalc(0px) auto;
}
.servicescontainer{
/*background: linear-gradient(to bottom, yellow, magenta);*/
// height:40rem; /*645px*/
overflow: hidden;
background: none;
/*background-image: url('../img/laback.jpg');*/
background-size: 100%;
//background-repeat: no-repeat;
// background-color: rgba(30,144,255, .7)
//background: linear-gradient(to bottom, $background-color-top, white);
//background-image: url('../img/losang.jpg');
}
#icons{
position: relative;
top: initial;
margin-top: 50px
}
.logo{
width: 50%;
// position:relative;
// top:emCalc(-27px);
}
#topbutton{
position: relative;
top: 2rem;
}
#icons{
/*position: relative;
top:6rem;*/
}
.container1 p, h4{
color:black;
}
header{
margin-top: 0rem;
background-image: none;
}
}
I am not sure try with the following styles. Hope it will fix the top header issues.
#media only screen and(min-width:500px) and (max-width: 600px)
{
.top-bar .name
{
height:auto;
}
.top-bar
{
height:5rem;
}
}