My webpage (a web im doing to learn) have the background splitted in two parts.
Here is the css code
body {
background: #466368;
background: -webkit-linear-gradient(#648880, #293f50);
background: -moz-linear-gradient(#648880, #293f50);
background: linear-gradient(#648880, #293f50);
}
your background is repeating due to the height of the body try this:
body {
background: #466368 no-repeat center center fixed;
background: -webkit-linear-gradient(#648880, #293f50) no-repeat center center fixed;
background: -moz-linear-gradient(#648880, #293f50) no-repeat center center fixed;
background: linear-gradient(#648880, #293f50) no-repeat center center fixed;
}
i solve the problem
body{
background: #466368;
background: -webkit-linear-gradient(#648880, #293f50);
background: -moz-linear-gradient(#648880, #293f50);
background: linear-gradient(#648880, #293f50);
margin: 0px;
height: 100%;
min-height: 100%;
}
html{
margin: 0px;
height: 100%;
}
Related
In CSS, I want to make a background with 50% of a color and 50% of another color but this color need to be terminated by a wave like that:
Actually I have that:
But it doesn't take 50% of screen.
Here is my code:
body {
background-color: #3f2982;
}
#wavebg {
position: relative;
content: "";
bottom: 0;
background: url('https://i.imgur.com/IJelEnu.png');
background-size: contain;
background-repeat: no-repeat;
width: 50%;
height: 100%;
float: left;
}
<div id='wavebg'></div>
How I can change it for take 50% of the screen?
body {
background-color: #3f2982;
}
#dark-bg {
width: 45%;
height: 100vh;
background-color: #27184f;
float: left;
}
#wavebg {
position: relative;
content: "";
bottom: 0;
background: url(https://i.imgur.com/IJelEnu.png);
background-size: contain;
background-repeat: no-repeat;
width: 50%;
height: 100vh;
float: left;
}
<div id="bg-container">
<div id="dark-bg"></div>
<div id='wavebg'>
</div>
</div>
Since the width of your image is not sufficient to cover 50% of screen width, your background image looks as if its stuck in the left border of the browser.
The trick is to apply a div immediately left to the image with the same color as the image.
This will get you the desired result of wave in approximate center of the screen. You may need to adjust #dark-bg width with css #media queries for a better responsive layout.
I sincerely hope it helps. This is the result you can have:
body {
background-color: #3f2982;
}
body,html{
height: 100%;
width: 100%;
margin: 0;
}
#wavebg {
background: url('https://i.imgur.com/IJelEnu.png');
background-size: 70% 100%;
background-repeat: no-repeat;
width: 60%;
height: 200%;
}
<html><body><div id='wavebg'></div></body></html>
We are using EO.pdf 16, we have css for body tag
body {
background-image: url(../images/background.jpg);
background-repeat: repeat-y;
background-position: center center;
/*background-size: cover;*/
height: 98%;
width:100%;
padding: 0px !important;
margin: 0px !important;
}
We want the background-image on the browser but not in the PDF.
Thanks in advance,
Anjan
This is fixed in version 16.2.9 of EO.
I am making a simple landing page and am trying to get the following image to be the background fullscreen: image
My CSS currently looks like this:
body {
background-image: url('/images/bg.jpeg');
width: 100%;
height: 100%;
position: fixed;
}
A majority of the image is getting cut off, what's the best way to remedy this?
Thanks !
Did you tried this :
body {
margin:0;
padding:0;
background: url('/images/bg.jpeg') no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
}
Heres a cool idea for a landing page. The background, being fixed is a popular cool way for landing pages. Please, to see this properly, click "Full Page" on the top right after clicking run code snippet.
#import url(https://fonts.googleapis.com/css?family=Lato:300);
div:nth-child(1){
background-image: url(https://images.unsplash.com/photo-1431538510849-b719825bf08b?q=80&fm=jpg&s=6fd7a983e3b43e66d2b6062856b9df66);
height: 750px;
width: 100%;
background-size: cover;
background-attachment: fixed;
}
div:nth-child(2){
height:400px;
width: 100%;
background-color: black;
z-index: 1;
}
h1{
text-align: center;
color: white;
background-attachment: fixed;
font-family: 'Lato', sans-serif;
padding-top: 300px;
z-index: 0;
text-shadow: 0 0 2px black;
font-size: 50px;
}
<div>
<h1> Michael Barreiro </h1>
</div>
<div></div>
I want the div to appear like it is blurring the background image of the page. Should work when div position is changed. Consider window resizing.
I was able to come up with a neat solution that requires no js. The technique was to use the same backgroud with specific common settings
JSFIDDLE
HTML:
<div class="mydiv">
<div class='bgblur'></div>
</div>
CSS:
body {
background: url('/etc/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
.bgblur {
background: url('/etc/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-filter: blur(26px);
-moz-filter: blur(26px);
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
}
.mydiv {
position: relative;
overflow: hidden;
// not necessary
border: 2px solid black;
height: 200px;
width: 200px;
}
I have a problem with my background on Phonegap
I'm also using JQuery mobile
this is my css code witch generate the background
html, body {
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.ui-page{
top: 0px;
left: 0px;
background: url('../img/bg.jpg') 0 0 no-repeat fixed !important;
background-size: auto 100%;
height: 100%;
width: 100%;
font-family: MankSans;
background-position:fixed;
background-color:#102a3e;
}
When I scroll in the page my background stay at the top and but the part where my background isn't fetch stay white and I can't understand why
Thanks for your help
Remove the !important from your style. This overrides your background-color. Just use
.ui-page {
background: #102a3e url('../img/bg.jpg') 0 0 no-repeat fixed;
}