I am sure I am missing something simple, but I can't seem to find it.
On michelleforboe.com, I am trying to get the background image to cover the whole space of a div. I am using calc to set the height of the div, but the div is resolving slightly higher that what it should be. Also, if you scroll down & back up, the black bar at the bottom of the image is even larger. There is a another div sitting on top of the image; I had thought maybe that was causing the extra space, but I don't think it is. Anyone see what I am missing?
.home-section-1 .wrap {
margin-left: 0;
}
.home .site-inner {
margin-top: 140px;
}
.home-section-1.widget-area {
background-size: 100% calc(100vw/2.9);
background-position: 50% 50%;
height: calc(100vw/2.9);
padding-top: 0;
padding-bottom: 0;
}
#text-7 {
height: calc(100vw/2.9);
}
#text-7 .widget-wrap {
height: 100%;
position: relative;
}
#text-7 .widget-wrap .textwidget {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#text-7 a.button {
font-size: 2vw;
padding: 1vw;
}
.home-section-1 .widget-wrap {
width: 50%;
}
try this css
.home-section-1.widget-area {
background-size: cover !important;
background-position: 50% 50%;
height: auto;
padding-top: 0;
padding-bottom: 0;
}
If u wanna full screen of image then remove height from css
.home-section-1.widget-area {
background-size: cover !important;
background-position: 50% 50%;
padding-top: 0;
padding-bottom: 0;
}
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>
When setting a background gradient to background-attachment: fixed it is suddenly cropped to 50% of the page width. It seems related to the position left: 50%. I wonder if this is a bug or if I'm using the CSS wrong here:
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
transform: translate(-50%);
}
.container.fixed-bg:before {
background-attachment: fixed; /* <-- This line causes the problem. Why? */
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
I know that I can bypass the issue by removing the styles left: 50%; and transform: ... but that's not a practical solution in my case. The container has an unknown left margin and the pattern needs to reach from edge to edge.
Does that mean my CSS is wrong? What CSS would display the fixed background pattern in full width?
Update
I notice that there is a different behavior across browsers:
The bug seems to be related to transform. Use margin instead
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
margin-left:-50vw;
}
.container.fixed-bg:before{
background-attachment: fixed;
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
The header position of my website is always aligning to the left side in IE.
But it should be in the middle, in Chrome and Firefox its working without problems.
May i ask for your expertice for this?
Homepage:
CSS Code:
.header {
left: 0;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
Please try this code for proper solution.
For header class you need to add below CSS
.header {
width: 100%;
}
and for navigation part, you need to update left side margin with below CSS.
.nav .ul .li {
margin-left: 32px;
}
By margin auto and max-width fixed no need to give left and right .It will automatically placed in the center of the page.
So just remove left and right
.header {
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
I currently have this code:
body {
margin: 0;
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
background: #151626;
width: 100vw;
height: 100vh;
}
.bg {
margin: 0;
overflow: hidden;
position: fixed;
height: 100vh;
top: 0;
bottom: 0;
}
.bg figure {
background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
width: 100vw;
transform: scale(1.05);
filter: blur(10px);
opacity: 0.5;
}
<div class="bg"><figure></figure></div>
The image is used as a sitewide background-image for a new platform and the reason for not just putting it into the body as a background-image is that I want to be able to use the CSS3 Filter (blur) on it + opacity, which for both I plan to animate in certain sections of the site.
However if I do this I have to use absolute positioning for all other content on the site which is kinda messy. Is there a better way to insert this image as a background without using absolute positioning?
I strongly prefer a CSS3-only solution.
Add the image using pseudo element, like this, and you can have other content floating on top.
If you get issues with the z-index: -1;, which keep the image to stay in the background, you can remove it and give immediate children of the body position: relative instead.
body {
margin: 0;
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
background: #151626;
height: 100vh;
}
body::before {
content: '';
position: fixed;
height: 100%;
width: 100%;
background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center;
background-size: cover;
transform: scale(1.05);
filter: blur(10px);
opacity: 0.5;
z-index: -1;
}
div {
color: white;
font-size: 30px;
}
<div>Hey there....</div>
I am trying to code the attached layout (needs to be responsive and not use JavaScript if possible). I want to support IE8, or if not, a gracefully degrading solution would be great.
I found ways to make the semicircle cutout using pseudo-elements and border-radius, but the background image of the previous div needs to show through and I can't figure out how to do it. Please help!! I have highlighted the area covered by the background image, in case it is not clear. Here is the layout
I got this far: https://jsfiddle.net/dcwoLb7f/
HTML:
<div id="first"><p>IMAGE CREDIT: WIKIPEDIA</p></div>
<div id="second"></div>
CSS:
#first {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/5/5a/VirtuellesStudio_Greenbox.jpg');
background-size: cover;
position: relative;
}
p {
color: white;
text-align: center;
margin: auto;
font-size: 40px;
}
#first, #second {
width: 100%;
height: 200px;
}
#second {
background-color: blue;
}
#first:after {
content: '';
background-color: white;
height: 40px;
width: 40px;
border-radius: 100%;
position: absolute;
bottom: -20px;
left: 50%;
transform: translate(-50%, 0);
}